From 3594e8c8ea3ddc1a29701f82830abca448fe91d4 Mon Sep 17 00:00:00 2001 From: "localizeflow[bot]" Date: Wed, 7 Jan 2026 08:36:13 +0000 Subject: [PATCH] chore(i18n): sync translations with latest source changes (chunk 9/20, 42 files) --- .../README.md | 884 ++++++--- .../2-github-basics/README.md | 714 ++++--- .../3-accessibility/README.md | 1025 +++++++--- .../bg/10-ai-framework-project/README.md | 853 ++++++--- .../bg/2-js-basics/1-data-types/README.md | 561 ++++-- .../2-js-basics/2-functions-methods/README.md | 486 ++++- .../2-js-basics/3-making-decisions/README.md | 581 ++++-- .../bg/2-js-basics/4-arrays-loops/README.md | 661 +++++-- .../bg/3-terrarium/1-intro-to-html/README.md | 576 ++++-- .../bg/3-terrarium/2-intro-to-css/README.md | 594 ++++-- .../3-intro-to-DOM-and-closures/README.md | 738 +++++-- translations/bg/3-terrarium/README.md | 43 +- .../bg/3-terrarium/solution/README.md | 2 +- translations/bg/4-typing-game/README.md | 276 ++- .../bg/4-typing-game/typing-game/README.md | 602 +++--- .../1-about-browsers/README.md | 545 ++++-- .../2-forms-browsers-local-storage/README.md | 656 +++++-- .../README.md | 627 ++++-- translations/bg/5-browser-extension/README.md | 2 +- .../bg/5-browser-extension/solution/README.md | 4 +- .../solution/translation/README.fr.md | 4 +- .../solution/translation/README.hi.md | 4 +- .../solution/translation/README.it.md | 4 +- .../solution/translation/README.ja.md | 4 +- .../solution/translation/README.ms.md | 4 +- .../bg/5-browser-extension/start/README.md | 4 +- .../bg/6-space-game/1-introduction/README.md | 573 ++++-- .../2-drawing-to-canvas/README.md | 573 ++++-- .../3-moving-elements-around/README.md | 730 +++++-- .../4-collision-detection/README.md | 597 ++++-- .../bg/6-space-game/5-keeping-score/README.md | 399 +++- .../bg/6-space-game/6-end-condition/README.md | 588 ++++-- .../7-bank-project/1-template-route/README.md | 716 ++++--- .../bg/7-bank-project/2-forms/README.md | 827 +++++--- .../bg/7-bank-project/3-data/README.md | 866 ++++++--- .../4-state-management/README.md | 724 +++++-- .../4-state-management/assignment.md | 2 +- translations/bg/7-bank-project/README.md | 2 +- .../1-using-a-code-editor/README.md | 648 +++++-- .../1-using-a-code-editor/assignment.md | 6 +- translations/bg/9-chat-project/README.md | 1695 ++++++++++------- translations/bg/README.md | 295 ++- 42 files changed, 14209 insertions(+), 5486 deletions(-) diff --git a/translations/bg/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/bg/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 0139bf102..101200ec8 100644 --- a/translations/bg/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/bg/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,106 +1,189 @@ -# Въведение в програмните езици и съвременните инструменти за разработчици - -Здравей, бъдещ разработчик! 👋 Мога ли да ти споделя нещо, което все още ме кара да настръхвам всеки ден? Ти си на път да откриеш, че програмирането не е просто за компютри – то е като да имаш суперсили, които ти позволяват да превърнеш най-смелите си идеи в реалност! - -Знаеш ли онзи момент, когато използваш любимото си приложение и всичко просто работи перфектно? Когато натиснеш бутон и се случва нещо абсолютно магическо, което те кара да си кажеш: „Уау, как го направиха това?“ Е, някой точно като теб – вероятно седнал в любимото си кафене в 2 сутринта с третото си еспресо – е написал кода, който е създал тази магия. И ето какво ще те изуми: до края на този урок не само ще разбереш как са го направили, но и ще ти се прииска да опиташ сам! - -Виж, напълно разбирам, ако програмирането ти се струва плашещо в момента. Когато започнах, честно казано, мислех, че трябва да си някакъв математически гений или да програмираш от петгодишен. Но ето какво напълно промени гледната ми точка: програмирането е точно като да се научиш да водиш разговори на нов език. Започваш с „здравей“ и „благодаря“, след това преминаваш към поръчване на кафе и преди да се усетиш, водиш дълбоки философски дискусии! Само че в този случай водиш разговори с компютри и честно казано? Те са най-търпеливите партньори за разговори, които някога ще имаш – никога не съдят грешките ти и винаги са готови да опитат отново! - -Днес ще разгледаме невероятните инструменти, които правят съвременното уеб разработване не само възможно, но и наистина пристрастяващо. Говоря за същите редактори, браузъри и работни процеси, които разработчиците в Netflix, Spotify и любимото ти студио за независими приложения използват всеки ден. И ето частта, която ще те накара да танцуваш от радост: повечето от тези професионални инструменти, които са стандарт в индустрията, са напълно безплатни! - -![Въведение в програмирането](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.bg.png) -> Скица от [Tomomi Imura](https://twitter.com/girlie_mac) - +# Въведение в програмен език и съвременни инструменти за разработчици + +Здрасти, бъдещ разработчик! 👋 Мога ли да ти разкажа нещо, което всеки ден ми надава тръпки? Ти си на прага да откриеш, че програмирането не е просто за компютри – то е за това да имаш истински суперсили, с които да оживяваш най-дивите си идеи! + +Знаеш ли онзи момент, когато използваш любимото си приложение и всичко просто пасва перфектно? Когато натиснеш бутон и се случва нещо абсолютно магическо, което те кара да се чудиш: "Уау, как ТЕ го направиха?" Е, някой точно като теб – вероятно седнал в любимото си кафе в 2 през нощта с третото си еспресо – е написал кода, който създаде тази магия. И ето какво ще те изуми: в края на този урок не само ще разбереш как са го направили, но и ще гориш от желание да пробваш сам! + +Виж, разбирам напълно, ако програмирането ти изглежда страшно сега. Когато започвах, честно казано си мислех, че трябва да си някакъв математически гений или да си кодил от петгодишен. Но ето какво напълно промени гледната ми точка: програмирането е точно като да се научиш да водиш разговор на нов език. Започваш с "здравей" и "благодаря", после стигаш до поръчване на кафе, а преди да се усетиш вече водиш дълбоки философски дискусии! Освен че в този случай разговаряш с компютри, и честно? Те са най-търпеливите събеседници, които някога ще срещнеш – никога не съдят грешките ти и винаги с ентусиазъм приемат да опитат отново! + +Днес ще разгледаме невероятните инструменти, които правят съвременното уеб разработване не само възможно, но и наистина пристрастяващо. Говоря за същите редактори, браузъри и работни процеси, които разработчиците в Netflix, Spotify и любимото ти инди студио използват всеки ден. И ето и частта, която ще те накара да се зарадваш: повечето от тези професионални, индустриални инструменти са напълно безплатни! + +![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.bg.png) +> Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac) + +```mermaid +journey + title Вашето Програмиране Днес + section Открийте + Какво е Програмиране: 5: You + Езиците за Програмиране: 4: You + Преглед на Инструментите: 5: You + section Изследвайте + Редактори на Код: 4: You + Браузъри и Инструменти за Разработчици: 5: You + Команден Ред: 3: You + section Практика + Детектив на Езици: 4: You + Изследване на Инструменти: 5: You + Свързване с Общността: 5: You +``` ## Да видим какво вече знаеш! -Преди да се потопим в забавната част, любопитно ми е – какво вече знаеш за света на програмирането? И слушай, ако гледаш тези въпроси и си мислиш „буквално нямам никаква представа за това“, това не само че е добре, но е и перфектно! Това означава, че си точно на правилното място. Помисли за този тест като за разтягане преди тренировка – просто загряваме мозъчните мускули! +Преди да се хвърлим в забавните неща, любопитно ми е – какво вече знаеш за този програмен свят? И слушай, ако гледаш тези въпроси и мислиш "Аз нямам абсолютно никаква представа за нищо от това," това не е просто окей, а направо перфектно! Значи си на правилното място. Помисли за този тест като за разтягане преди тренировка – едва загряваме мозъчните мускули! -[Направи предварителния тест](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +[Вземи теста преди урока](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) -## Приключението, което ни предстои заедно +## Приключението, на което ще тръгнем заедно -Добре, наистина съм развълнуван за това, което ще изследваме днес! Сериозно, бих искал да видя лицето ти, когато някои от тези концепции ти станат ясни. Ето невероятното пътешествие, което ще предприемем заедно: +Окей, сериозно съм супер развълнуван от това, което ще изследваме днес! Наистина, искам да видя лицето ти, когато някои от тези концепции изведнъж "кликнат". Ето какво невероятно пътешествие ни очаква заедно: -- **Какво всъщност е програмирането (и защо е най-якото нещо на света!)** – Ще открием как кодът е буквално невидимата магия, която движи всичко около теб – от алармата, която знае, че е понеделник сутрин, до алгоритъма, който перфектно подбира препоръките ти в Netflix. -- **Програмни езици и техните невероятни личности** – Представи си, че влизаш на парти, където всеки човек има напълно различни суперсили и начини за решаване на проблеми. Такъв е светът на програмните езици и ще ти хареса да ги опознаеш! -- **Основните градивни елементи, които правят дигиталната магия възможна** – Помисли за тях като за най-добрия творчески комплект LEGO. След като разбереш как тези части се съчетават, ще осъзнаеш, че можеш буквално да създадеш всичко, което въображението ти измисли. -- **Професионални инструменти, които ще те накарат да се почувстваш като магьосник с вълшебна пръчка** – Не преувеличавам – тези инструменти наистина ще те накарат да се почувстваш като притежател на суперсили, а най-хубавото? Те са същите, които използват професионалистите! +- **Какво всъщност е програмирането (и защо е най-готиното нещо някога!)** – Ще разберем как кодът буквално е невидимата магия, която движи всичко около теб – от алармата, която някак разбира, че е понеделник сутрин, до алгоритъма, който перфектно селектира препоръките ти в Netflix +- **Програмен език и техните удивителни личности** – Представи си, че влизаш на парти, където всеки човек има съвсем различни суперсили и начини да решава проблеми. Това е светът на програмните езици, и ти ще обикнеш да ги срещаш! +- **Основните градивни блокчета, които правят дигиталната магия възможна** – Мисли ги като най-ултимативния креативен комплект LEGO. След като разбереш как се съчетават тези части, осъзнаваш, че можеш буквално да построиш всичко, за което мечтае въображението ти +- **Професионални инструменти, които ще те накарат да се чувстваш сякаш току-що са ти дали вълшебна пръчка** – Не преувеличавам – тези инструменти наистина ще те накарат да се почувстваш като че имаш суперсили, а най-хубавото? Това са същите, които професионалистите използват! -> 💡 **Ето какво е важно**: Дори не си помисляй да се опитваш да запомниш всичко днес! В момента просто искам да почувстваш искрата на вълнение за това, което е възможно. Детайлите ще се запомнят естествено, докато практикуваме заедно – така се случва истинското учене! +> 💡 **Ето нещо:** Не мисли въобще да се опитваш да запомниш всичко днес! Сега искам просто да усетиш искрата на вълнението за това, което е възможно. Детайлите ще се залепят естествено, докато практикуваме заедно – така се случва истинското учене! -> Можеш да вземеш този урок на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> Можеш да направиш този урок и на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! ## Какво всъщност *е* програмирането? -Добре, нека се справим с въпроса за милион долара: какво всъщност е програмирането? - -Ще ти разкажа една история, която напълно промени начина, по който мисля за това. Миналата седмица се опитвах да обясня на майка ми как да използва новото дистанционно за нашия смарт телевизор. Хванах се да казвам неща като „Натисни червения бутон, но не големия червен бутон, малкия червен бутон отляво... не, от другата ти лява страна... добре, сега го задръж за две секунди, не за една, не за три...“ Звучи ли ти познато? 😅 - -Това е програмирането! Това е изкуството да даваш изключително подробни, стъпка по стъпка инструкции на нещо, което е много мощно, но има нужда всичко да му бъде обяснено перфектно. Само че вместо да обясняваш на майка си (която може да попита „кой червен бутон?!“), ти обясняваш на компютър (който просто прави точно това, което му кажеш, дори ако това, което си казал, не е точно това, което си имал предвид). - -Ето какво ме изуми, когато за първи път научих това: компютрите всъщност са доста прости в основата си. Те буквално разбират само две неща – 1 и 0, което е просто „да“ и „не“ или „включено“ и „изключено“. Това е всичко! Но ето къде става магическо – не е нужно да говорим на 1 и 0, сякаш сме в „Матрицата“. Тук идват **програмните езици** на помощ. Те са като най-добрия преводач в света, който превежда твоите напълно нормални човешки мисли в езика на компютрите. - -И ето какво все още ме кара да настръхвам всяка сутрин, когато се събудя: буквално *всичко* дигитално в живота ти е започнало с някой точно като теб, вероятно седнал в пижамата си с чаша кафе, пишейки код на лаптопа си. Този Instagram филтър, който те прави безупречен? Някой го е кодирал. Препоръката, която те доведе до новата ти любима песен? Разработчик е създал този алгоритъм. Приложението, което ти помага да разделиш сметката за вечеря с приятели? Да, някой си е помислил „това е досадно, сигурно мога да го оправя“ и след това... го е направил! - -Когато се научиш да програмираш, ти не просто усвояваш ново умение – ти ставаш част от тази невероятна общност от решаващи проблеми хора, които прекарват дните си, мислейки: „Какво ако мога да създам нещо, което да направи деня на някого малко по-добър?“ Честно казано, има ли нещо по-готино от това? - -✅ **Забавен факт за търсене**: Ето нещо супер интересно, което да потърсиш, когато имаш свободен момент – кой според теб е бил първият програмист в света? Ще ти дам подсказка: може би не е този, когото очакваш! Историята зад този човек е абсолютно завладяваща и показва, че програмирането винаги е било свързано с творческо решаване на проблеми и мислене извън рамките. - -## Програмните езици са като различни вкусове на магия - -Добре, това може да звучи странно, но остани с мен – програмните езици са много като различни видове музика. Помисли: имаш джаз, който е плавен и импровизационен, рок, който е мощен и директен, класическа музика, която е елегантна и структурирана, и хип-хоп, който е креативен и изразителен. Всеки стил има своя собствена атмосфера, своя собствена общност от страстни фенове и всеки е идеален за различни настроения и поводи. - -Програмните езици работят точно по същия начин! Не би използвал един и същ език, за да създадеш забавна мобилна игра, както би използвал за обработка на огромни количества климатични данни, точно както не би пуснал хеви метъл на йога клас (е, поне на повечето йога класове! 😄). - -Но ето какво ме изумява всеки път, когато се замисля за това: тези езици са като да имаш най-търпеливия, най-блестящия преводач в света, който седи точно до теб. Можеш да изразиш идеите си по начин, който се чувства естествен за човешкия мозък, и те се справят с цялата невероятно сложна работа по превеждането на това в 1 и 0, които компютрите всъщност разбират. Това е като да имаш приятел, който е перфектно владеещ както „човешката креативност“, така и „компютърната логика“ – и той никога не се уморява, никога не се нуждае от кафе паузи и никога не те съди, че задаваш един и същ въпрос два пъти! - -### Популярни програмни езици и техните приложения - -| Език | Най-подходящ за | Защо е популярен | -|------|-----------------|------------------| +Добре, нека се заемем с въпроса за милиони долари: какво всъщност е програмирането? + +Ще ти разкажа история, която напълно промени гледната ми точка. Миналата седмица се опитвах да обясня на майка си как да използва дистанционното на нашия нов умен телевизор. Хванах се как казвам неща като "Натисни червения бутон, но не големия червен бутон, а малкия червен бутон отляво... не, другата ти лява... окей, сега го задръж за две секунди, не за една, не за три..." Звучи ли ти познато? 😅 + +Това е програмиране! То е изкуството да даваш изключително подробни, стъпка по стъпка инструкции на нещо много мощно, но което трябва всичко да му се изясни много точно. Освен че вместо да обясняваш на майка си (която може да попита "кой червен бутон?!"), ти обясняваш на компютър (който просто прави точно това, което му кажеш, дори и да не е съвсем това, което си имал предвид). + +Ето какво ме изуми, когато за първи път научих това: компютрите са всъщност доста прости по своята същност. Те разбират буквално само две неща – 1 и 0, което е просто "да" и "не" или "вкл." и "изкл." Това е! Но тук идва магията – не трябва да говорим само на 1 и 0, като в Матрицата. Тук на помощ идват **програмените езици**. Те са като най-добрия преводач в света, който взема твоите напълно нормални човешки мисли и ги превръща в компютърен език. + +И ето какво все още ми дава истински тръпки всяка сутрин, когато се събудя: буквално *всичко* цифрово в живота ти е започнало с някой като теб, вероятно в пижама с чаша кафе, клавиатурно кодиращ на лаптопа си. Този Instagram филтър, който те кара да изглеждаш безупречен? Някой го е програмирал. Препоръката, която те доведе до новата ти любима песен? Алгоритъм, създаден от разработчик. Приложението, което ти помага да делите сметките с приятели? Да, някой е казал "Това е дразнещо, сигурен съм, че мога да го оправя" и го е направил! + +Когато научиш програмиране, не просто придобиваш ново умение – ти ставаш част от тази невероятна общност от решавачи на проблеми, които прекарват дните си, питащи се: "Какво ще стане, ако мога да създам нещо, което прави нечий ден малко по-добър?" Честно казано, има ли нещо по-готино от това? + +✅ **Забавно търсене на факт:** Ето нещо супер интересно, което да провериш, когато имаш време – кой мислиш, че е първият програмист в света? Ще ти дам подсказка: може да не е този, когото очакваш! Историята за този човек е абсолютно завладяваща и показва, че програмирането винаги е било за креативно решаване на проблеми и мислене извън рамките. + +### 🧠 **Време за проверка: Как се чувстваш?** + +**Отдели момент за размисъл:** +- Стана ли ти ясно какво значи "даваш инструкции на компютрите"? +- Можеш ли да се сетиш за ежедневна задача, която би искал да автоматизираш с програмиране? +- Какви въпроси ти идват на ум за цялата тази работа с програмирането? + +> **Помни:** Напълно нормално е някои концепции да ти изглеждат размити в момента. Учението на програмиране е като учене на нов език – отнема време на мозъка да изгради тези невронни пътеки. Ти се справяш страхотно! + +## Програмен език е като различни вкусове магия + +Окей, това ще ти прозвучи странно, но остани с мен – програмените езици са много като различни музикални стилове. Помисли: имаш джаз, който е плавен и импровизационен, рок, който е мощен и директен, класическа музика, която е елегантна и структурирана, и хип-хоп, който е креативен и експресивен. Всеки стил има своя вибрация, своя общност от страстни фенове, и всеки е идеален за различни настроения и случаи. + +Програмените езици работят по същия начин! Не би използвал един и същ език да създадеш забавна мобилна игра, който би използвал за обработка на огромни количества климатични данни, точно както не би пускал дет метъл на йога клас (поне повечето йога класове! 😄). + +Но ето какво винаги ме изумява: тези езици са като да имаш най-търпеливия, гениален преводач в света, който седи точно до теб. Можеш да изразяваш идеите си по начин, който е естествен за мозъка ти, а те се грижат за целия сложен превод в 1 и 0, на които компютрите всъщност говорят. Просто имаш приятел, който е напълно владеещ и на "човешкото творчество", и на "компютърната логика" – и никога не се уморява, не му трябват почивки за кафе и никога не те съди, ако попиташ два пъти едно и също! + +### Популярни програмни езици и употреби + +```mermaid +mindmap + root((Езици за програмиране)) + Уеб разработка + JavaScript + Магия във фронтенд + Интерактивни уебсайтове + TypeScript + JavaScript + Типове + Предприятия приложения + Данни и ИИ + Python + Наука за данни + Машинно обучение + Автоматизация + R + Статистика + Изследвания + Мобилни приложения + Java + Android + Предприятие + Swift + iOS + Екосистема на Apple + Kotlin + Модерен Android + Кръст-платформен + Системи и производителност + C++ + Игри + Критично за производителността + Rust + Паметна безопасност + Системно програмиране + Go + Облачни услуги + Масшабируем бекенд +``` +| Език | Най-добър за | Защо е популярен | +|----------|----------|------------------| | **JavaScript** | Уеб разработка, потребителски интерфейси | Работи в браузъри и захранва интерактивни уебсайтове | -| **Python** | Наука за данни, автоматизация, AI | Лесен за четене и учене, мощни библиотеки | -| **Java** | Корпоративни приложения, Android приложения | Независим от платформата, надежден за големи системи | -| **C#** | Windows приложения, разработка на игри | Силна поддръжка от екосистемата на Microsoft | +| **Python** | Наука за данни, автоматизация, ИИ | Лесен за четене и учене, мощни библиотеки | +| **Java** | Предприятия, Android приложения | Независим от платформа, стабилен за големи системи | +| **C#** | Windows приложения, разработка на игри | Силна поддръжка на Microsoft екосистема | | **Go** | Облачни услуги, бекенд системи | Бърз, прост, създаден за модерни изчисления | -### Високо ниво срещу ниско ниво на програмни езици +### Езици от високо ниво срещу ниско ниво -Добре, това беше концепцията, която наистина ме обърка, когато започнах да уча, затова ще споделя аналогията, която най-накрая ме накара да я разбера – и наистина се надявам да ти помогне и на теб! +Окей, това честно беше концепцията, която ми "счупи" мозъка, когато започнах да уча, затова ще ти споделя аналогията, която най-накрая ми помогна да я разбера – и се надявам да помогне и на теб! -Представи си, че посещаваш страна, чийто език не говориш, и отчаяно трябва да намериш най-близката тоалетна (всички сме били там, нали? 😅): +Представи си, че посещаваш страна, в която не говориш езика и отчаяно трябва да намериш най-близката тоалетна (сигурно сме били там, нали? 😅): -- **Програмиране на ниско ниво** е като да научиш местния диалект толкова добре, че можеш да разговаряш с бабата, която продава плодове на ъгъла, използвайки културни препратки, местен жаргон и вътрешни шеги, които само някой, израснал там, би разбрал. Супер впечатляващо и невероятно ефективно... ако случайно си експерт! Но доста объркващо, когато просто се опитваш да намериш тоалетна. +- **Програмиране на ниско ниво** е като да научиш местния диалект толкова добре, че можеш да говориш с бабата, която продава плодове на ъгъла, използвайки културни препратки, местен жаргон и вътрешни шеги, които само някой, израснал там, би разбрал. Супер впечатляващо и невероятно ефективно... ако случайно си владеещ езика! Но доста объркващо, когато просто търсиш тоалетна. -- **Програмиране на високо ниво** е като да имаш онзи невероятен местен приятел, който просто те разбира. Можеш да кажеш „Наистина трябва да намеря тоалетна“ на обикновен английски, и той се справя с цялото културно превеждане и ти дава указания по начин, който има смисъл за твоя неместен мозък. +- **Програмиране на високо ниво** е като да имаш този невероятен местен приятел, който просто те разбира. Можеш да кажеш "Наистина трябва да намеря тоалетна" на чист английски, а той се занимава с цялата културна интерпретация и ти дава упътвания по начин, който напълно има смисъл за твоя чуждоземен мозък. -В програмните термини: -- **Езици на ниско ниво** (като Assembly или C) ти позволяват да водиш изключително подробни разговори с хардуера на компютъра, но трябва да мислиш като машина, което е... е, нека просто кажем, че е доста голяма умствена промяна! -- **Езици на високо ниво** (като JavaScript, Python или C#) ти позволяват да мислиш като човек, докато те се справят с всички машинни команди зад кулисите. Освен това, те имат невероятно приветливи общности, пълни с хора, които помнят какво е да си нов и искрено искат да ти помогнат! +В програмирането: +- **Езици от ниско ниво** (като Assembly или C) ти позволяват да провеждаш много детайлни разговори с хардуера на компютъра, но трябва да мислиш като машина, което е... добре, голям умствен преход! +- **Езици от високо ниво** (като JavaScript, Python, или C#) ти позволяват да мислиш като човек, докато те вършат цялата машинна работа зад кулисите. Освен това имат толкова приветливи общности, пълни с хора, които помнят какво е да си нов и искрено искат да помогнат! -Познай кои ще ти предложа да започнеш? 😉 Езиците на високо ниво са като да имаш помощни колела, които никога не искаш да махнеш, защото правят целия опит толкова по-приятен! +Познай с кои ще ти предложа да започнеш? 😉 Езици от високо ниво са като помощните колелца на колело, които никога всъщност не искаш да свалиш, защото правят цялото изживяване толкова по-приятно! -### Нека ти покажа защо езиците на високо ниво са толкова по-дружелюбни +```mermaid +flowchart TB + A["👤 Човешка мисъл:
'Искам да изчислявам числа от Фибоначи'"] --> B{Избери ниво на езика} + + B -->|Високо ниво| C["🌟 JavaScript/Python
Лесен за четене и писане"] + B -->|Ниско ниво| D["⚙️ Асемблер/C
Директен контрол на хардуера"] + + C --> E["📝 Напиши: fibonacci(10)"] + D --> F["📝 Напиши: mov r0,#00
sub r0,r0,#01"] + + E --> G["🤖 Компютърно разбиране:
Преводачът се справя със сложността"] + F --> G + + 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 -// Step 1: Basic Fibonacci setup +// Стъпка 1: Основна настройка на Фибоначи const fibonacciCount = 10; let current = 0; let next = 1; @@ -109,17 +192,17 @@ console.log('Fibonacci sequence:'); ``` **Ето какво прави този код:** -- **Декларира** константа, за да определи колко числа от Фибоначи искаме да генерираме -- **Инициализира** две променливи за проследяване на текущото и следващото число в последователността -- **Задава** началните стойности (0 и 1), които определят модела на Фибоначи -- **Показва** заглавно съобщение за идентифициране на резултата +- **Декларира** константа, която задава колко Фибоначи числа искаме да генерираме +- **Инициализира** две променливи, които следят текущото и следващото число в последователността +- **Задава** началните стойности (0 и 1), които дефинират модела Фибоначи +- **Показва** заглавно съобщение, което идентифицира резултата ни ```javascript -// Step 2: Generate the sequence with a loop +// Стъпка 2: Генерирайте последователността с цикъл for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Calculate next number in sequence + // Изчислете следващото число в последователността const sum = current + next; current = next; next = sum; @@ -127,124 +210,182 @@ for (let i = 0; i < fibonacciCount; i++) { ``` **Разбивка на това, което се случва тук:** -- **Цикъл** през всяка позиция в нашата последователност, използвайки `for` цикъл -- **Показва** всяко число с неговата позиция, използвайки шаблонно форматиране -- **Изчислява** следващото число от Фибоначи, като добавя текущите и следващите стойности -- **Обновява** нашите проследяващи променливи, за да -✅ **За последователността на Фибоначи**: Тази невероятно красива числова последователност (където всяко число е равно на сумата от предходните две: 0, 1, 1, 2, 3, 5, 8...) се появява буквално *навсякъде* в природата! Ще я откриете в спиралите на слънчогледите, шарките на шишарките, извивките на черупките на наутилусите и дори в начина, по който растат клоните на дърветата. Удивително е как математиката и програмирането могат да ни помогнат да разберем и пресъздадем моделите, които природата използва, за да създаде красота! +- **Обхожда** всяка позиция в последователността с помощта на `for` цикъл +- **Показва** всяко число заедно с позицията му, използвайки шаблонно форматиране +- **Изчислява** следващото число във Фибоначи като събира текущото и следващото +- **Обновява** променливите, за да премине към следващата итерация +```javascript +// Стъпка 3: Модерен функционален подход +const generateFibonacci = (count) => { + const sequence = [0, 1]; + + for (let i = 2; i < count; i++) { + sequence[i] = sequence[i - 1] + sequence[i - 2]; + } + + return sequence; +}; + +// Пример за употреба +const fibSequence = generateFibonacci(10); +console.log(fibSequence); +``` + +**В горния пример ние:** +- **Създадохме** многократно използваща се функция с модерен синтаксис за стрелкови функции +- **Построихме** масив, за да съхраним цялата последователност вместо да показваме числата поединично +- **Използвахме** индексиране на масиви, за да изчислим всяко ново число от предишните стойности +- **Върнахме** цялата последователност за гъвкава употреба в други части на програмата + +**Език от ниско ниво (ARM Assembly) – Компютърно приятелски:** + +```assembly + area ascen,code,readonly + entry + code32 + adr r0,thumb+1 + bx r0 + code16 +thumb + mov r0,#00 + sub r0,r0,#01 + mov r1,#01 + mov r4,#10 + ldr r2,=0x40000000 +back add r0,r1 + str r0,[r2] + add r2,#04 + mov r3,r0 + mov r0,r1 + mov r1,r3 + sub r4,#01 + cmp r4,#00 + bne back + end +``` + +Обърни внимание как версията на JavaScript изглежда почти като инструкции на английски, докато версията на Assembly използва загадъчни команди, които директно контролират процесора на компютъра. И двата изпълняват точно същата задача, но езикът от високо ниво е много по-лесен за разбиране, писане и поддръжка от хората. + +**Основните разлики, които ще забележиш:** +- **Четливост**: JavaScript използва описателни имена като `fibonacciCount`, докато Assembly използва тайни означения като `r0`, `r1` +- **Коментари**: Високо нивото на езиците насърчава обяснителни коментари, които правят кода самодокументиращ се +- **Структура**: Логическата последователност на JavaScript съвпада с начина, по който хората мислят стъпка по стъпка за проблемите +- **Поддръжка**: Актуализирането на версията на JavaScript за различни изисквания е лесно и ясно + +✅ **За последователността на Фибоначи**: Този абсолютно прекрасен числов модел (където всяко число е равно на сумата на двете предишни: 0, 1, 1, 2, 3, 5, 8...) се среща буквално *навсякъде* в природата! Ще го откриете в спиралите на слънчогледите, в моделите на шишарки, начина, по който се извиват мидите на наутилуса и дори в начина, по който растат клоните на дърветата. Наистина е удивително как математиката и кодът ни помагат да разберем и възпроизведем моделите, които природата използва, за да създаде красота! -## Основите, които правят магията възможна +## Строителните елементи, които правят магията възможна -Добре, след като вече видяхте как изглеждат програмните езици в действие, нека разгледаме основните елементи, които съставят буквално всяка програма, писана някога. Мислете за тях като за основните съставки на любимата ви рецепта – щом разберете какво прави всяка от тях, ще можете да четете и пишете код на почти всеки език! +Добре, сега след като видяхте как изглеждат програмните езици в действие, нека разгледаме основните части, които съставляват буквално всяка написана програма. Можете да ги мислите като незаменимите съставки в любимата ви рецепта – след като разберете какво прави всяка една, ще можете да четете и пишете код на почти всеки език! -Това е малко като да научите граматиката на програмирането. Спомняте ли си в училище, когато учехте за съществителни, глаголи и как да съставяте изречения? Програмирането има своя версия на граматика и честно казано, тя е много по-логична и прощаваща от английската граматика! 😄 +Това е нещо като изучаването на граматиката на програмирането. Спомняте ли си уроците в училище за съществителните, глаголите и как се съставят изречения? Програмирането има своя собствена граматика и честно казано, тя е много по-логична и по-прощаваща от английската граматика някога! 😄 -### Изречения: Стъпка по стъпка инструкции +### Изрази: Стъпка по стъпка инструкции -Да започнем с **изреченията** – те са като отделни изречения в разговор с вашия компютър. Всяко изречение казва на компютъра да направи нещо конкретно, малко като даване на указания: "Завий наляво тук", "Спри на червената светлина", "Паркирай на това място." +Нека започнем с **изразите** – те са като отделни изречения в разговор с вашия компютър. Всеки израз казва на компютъра да направи нещо конкретно, почти като даване на указания: „Завий наляво тук“, „Спри на червената светлина“, „Паркирай на това място“. -Това, което обичам в изреченията, е колко четими са обикновено. Вижте това: +Обичам изразите, защото обикновено са много четими. Вижте това: ```javascript -// Basic statements that perform single actions +// Основни изявления, които изпълняват единични действия const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` - -**Ето какво прави този код:** -- **Декларира** постоянна променлива за съхранение на името на потребителя -- **Показва** поздравително съобщение в конзолата -- **Изчислява** и съхранява резултата от математическа операция + +**Ето какво прави този код:** +- **Декларира** константна променлива за съхранение на име на потребител +- **Показва** поздравително съобщение в конзолата +- **Изчислява** и съхранява резултат от математическа операция ```javascript -// Statements that interact with web pages +// Изявления, които взаимодействат с уеб страници document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` + +**Стъпка по стъпка, ето какво се случва:** +- **Променя** заглавието на уеб страницата, което се показва в таба на браузъра +- **Променя** цвета на фона на цялото тяло на страницата -**Стъпка по стъпка, ето какво се случва:** -- **Променя** заглавието на уеб страницата, което се появява в раздела на браузъра -- **Сменя** цвета на фона на цялото тяло на страницата - -### Променливи: Системата за памет на вашата програма +### Променливи: Паметната система на вашата програма Добре, **променливите** са честно казано една от любимите ми концепции за преподаване, защото са толкова подобни на неща, които вече използвате всеки ден! -Помислете за списъка с контакти на телефона си за момент. Не запомняте телефонните номера на всички – вместо това запазвате "Мама", "Най-добър приятел" или "Пицарията, която доставя до 2 сутринта" и оставяте телефона си да запомни действителните номера. Променливите работят точно по същия начин! Те са като етикетирани контейнери, където вашата програма може да съхранява информация и да я извлича по-късно, използвайки име, което всъщност има смисъл. +Помислете за контактите на телефона си за момент. Не запаметявате телефонните номера на всички – вместо това записвате „Мама“, „Най-добър приятел“ или „Пицарията, която доставя до 2 сутринта“ и оставяте телефона да запомни числата. Променливите работят по абсолютно същия начин! Те са като надписани контейнери, в които вашата програма може да съхранява информация и да я извлича по-късно, използвайки име, което има смисъл. -Ето какво е наистина страхотно: променливите могат да се променят, докато програмата ви работи (оттук и името "променлива" – виждате ли какво са направили?). Точно както може да актуализирате контакта на пицарията, когато откриете още по-добро място, променливите могат да се актуализират, докато програмата ви научава нова информация или когато ситуациите се променят! +Ето кое е истински готино: променливите могат да се променят докато вашата програма работи (оттук и името „променлива“ – вижте какво са направили?). Точно както бихте обновили контакта на пицарията, когато намерите още по-добро място, променливите могат да се обновяват, докато програмата научава нова информация или когато се променят обстоятелствата! -Позволете ми да ви покажа колко красиво просто може да бъде това: +Нека ви покажа колко красиво просто може да бъде това: ```javascript -// Step 1: Creating basic variables +// Стъпка 1: Създаване на основни променливи const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` - -**Разбиране на тези концепции:** -- **Съхранявайте** непроменящи се стойности в `const` променливи (като име на сайт) -- **Използвайте** `let` за стойности, които могат да се променят в хода на програмата -- **Присвоявайте** различни типове данни: низове (текст), числа и булеви стойности (истина/лъжа) -- **Избирайте** описателни имена, които обясняват какво съдържа всяка променлива + +**Разбиране на тези концепции:** +- **Съхраняване** на неизменяеми стойности в `const` променливи (като името на сайта) +- **Използване** на `let` за стойности, които могат да се променят през програмата +- **Присвояване** на различни типове данни: низове (текст), числа и булеви стойности (true/false) +- **Избор** на описателни имена, обясняващи какво съдържа всяка променлива ```javascript -// Step 2: Working with objects to group related data +// Стъпка 2: Работа с обекти за групиране на свързани данни const weatherData = { location: "San Francisco", humidity: 65, windSpeed: 12 }; ``` - -**В горния пример сме:** -- **Създали** обект за групиране на свързана информация за времето -- **Организирали** множество части от данни под едно име на променлива -- **Използвали** двойки ключ-стойност за ясно етикетиране на всяка част от информацията + +**В горното сме:** +- **Създали** обект за групиране на свързана информация за времето +- **Организирали** множество данни под едно име на променлива +- **Използвали** ключ-стойност двойки, за да надпишем всяка информация ясно ```javascript -// Step 3: Using and updating variables +// Стъпка 3: Използване и актуализиране на променливи console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Updating changeable variables +// Актуализиране на променливи, които могат да се променят currentWeather = "cloudy"; temperature = 68; ``` - -**Нека разберем всяка част:** -- **Показване** на информация с помощта на шаблонни литерали със синтаксис `${}` -- **Достъп** до свойства на обекти с точкова нотация (`weatherData.windSpeed`) -- **Актуализиране** на променливи, декларирани с `let`, за да отразяват променящите се условия -- **Комбиниране** на множество променливи за създаване на смислени съобщения + +**Нека разберем всяка част:** +- **Показване** на информация с помощта на шаблонни литерали с `${}` синтаксис +- **Достъп** до свойства на обекти с точкова нотация (`weatherData.windSpeed`) +- **Обновяване** на променливи, декларирани с `let`, за да се отразят променящите се условия +- **Комбиниране** на няколко променливи за създаване на смислени съобщения ```javascript -// Step 4: Modern destructuring for cleaner code +// Стъпка 4: Модерен деструктуриране за по-чист код const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` + +**Какво трябва да знаете:** +- **Извличане** на специфични свойства от обекти чрез деструктуриращо присвояване +- **Създаване** на нови променливи автоматично с имената на ключовете на обекта +- **Опрощаване** на кода чрез избягване на повтарящата се точкова нотация -**Какво трябва да знаете:** -- **Извличане** на конкретни свойства от обекти с помощта на деструктуриращо присвояване -- **Създаване** на нови променливи автоматично със същите имена като ключовете на обекта -- **Опростяване** на кода, като се избягва повтаряща се точкова нотация - -### Управление на потока: Да научим програмата да мисли +### Контролен поток: Учите вашата програма да мисли -Добре, тук програмирането става абсолютно удивително! **Управлението на потока** е основно да научите програмата си как да взема интелигентни решения, точно както правите всеки ден, без дори да се замисляте. +Добре, тук програмирането става абсолютно удивително! **Контролният поток** е на практика начин да научите програмата си да взема умни решения, точно както вие го правите всеки ден без да се замисляте. -Представете си това: тази сутрин вероятно сте преминали през нещо като "Ако вали, ще взема чадър. Ако е студено, ще облека яке. Ако закъснявам, ще пропусна закуската и ще взема кафе по пътя." Вашият мозък естествено следва тази логика "ако-тогава" десетки пъти всеки ден! +Представете си: тази сутрин вероятно сте минали през нещо като „Ако вали, ще взема чадър. Ако е студено, ще нося якето. Ако закъснявам, ще пропусна закуската и ще взема кафе по пътя.“ Вашият мозък естествено следва тази логика „ако-тогава“ десетки пъти на ден! -Това е, което прави програмите да изглеждат интелигентни и живи, вместо просто да следват някакъв скучен, предвидим сценарий. Те всъщност могат да разгледат дадена ситуация, да оценят какво се случва и да реагират съответно. Това е като да дадете на програмата си мозък, който може да се адаптира и да прави избори! +Това прави програмите да изглеждат интелигентни и живи, а не просто да следват някакъв скучен, предсказуем скрипт. Те всъщност могат да анализират ситуацията, да оценят какво се случва и да отговорят адекватно. Това е като да дадете на програмата си мозък, който се адаптира и прави избори! Искате ли да видите колко красиво работи това? Нека ви покажа: ```javascript -// Step 1: Basic conditional logic +// Стъпка 1: Основна условна логика const userAge = 17; if (userAge >= 18) { @@ -254,15 +395,15 @@ if (userAge >= 18) { console.log(`You'll be able to vote in ${yearsToWait} year(s).`); } ``` - -**Ето какво прави този код:** -- **Проверява** дали възрастта на потребителя отговаря на изискванията за гласуване -- **Изпълнява** различни блокове код в зависимост от резултата от условието -- **Изчислява** и показва колко време остава до допустимостта за гласуване, ако е под 18 години -- **Осигурява** конкретна, полезна обратна връзка за всеки сценарий + +**Ето какво прави този код:** +- **Проверява** дали възрастта на потребителя отговаря на изискванията за гласуване +- **Изпълнява** различни блокове код в зависимост от резултата на условието +- **Изчислява** и показва колко остава до достигане на право на глас, ако е под 18 +- **Дава** конкретна, полезна обратна връзка за всяка ситуация ```javascript -// Step 2: Multiple conditions with logical operators +// Стъпка 2: Множество условия с логически оператори const userAge = 17; const hasPermission = true; @@ -274,26 +415,26 @@ if (userAge >= 18 && hasPermission) { console.log("Sorry, you must be at least 16 years old."); } ``` - -**Разбивка на случващото се тук:** -- **Комбинира** множество условия с помощта на оператора `&&` (и) -- **Създава** йерархия от условия с помощта на `else if` за множество сценарии -- **Обработва** всички възможни случаи с финалното изявление `else` -- **Осигурява** ясна, приложима обратна връзка за всяка различна ситуация + +**Разбивка на случващото се тук:** +- **Комбинира** няколко условия с оператора `&&` (и) +- **Създава** йерархия от условия с `else if` за множество сценарии +- **Обработва** всички възможни случаи с крайно `else` изявление +- **Дава** ясна, приложима обратна връзка за всяка различна ситуация ```javascript -// Step 3: Concise conditional with ternary operator +// Стъпка 3: Кратко условие с тернарен оператор const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` - -**Какво трябва да запомните:** -- **Използвайте** тернарния оператор (`? :`) за прости условия с две опции -- **Напишете** условието първо, последвано от `?`, след това резултата за истина, след това `:`, след това резултата за лъжа -- **Приложете** този модел, когато трябва да присвоявате стойности въз основа на условия + +**Какво трябва да запомните:** +- **Използвайте** тернарния оператор (`? :`) за прости двоични условия +- **Пишете** условието първо, следвано от `?`, после истинския резултат, после `:`, после фалшивия резултат +- **Прилагайте** този модел когато трябва да присвоите стойности според условия ```javascript -// Step 4: Handling multiple specific cases +// Стъпка 4: Обработка на множество конкретни случаи const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -312,275 +453,410 @@ switch (dayOfWeek) { console.log("Invalid day of the week"); } ``` - -**Този код постига следното:** -- **Сравнява** стойността на променливата с множество конкретни случаи -- **Групира** подобни случаи заедно (работни дни срещу уикенди) -- **Изпълнява** подходящия блок код, когато се намери съвпадение -- **Включва** случай `default` за обработка на неочаквани стойности -- **Използва** изявления `break`, за да предотврати продължаването на кода към следващия случай - -> 💡 **Аналогия от реалния свят**: Помислете за управлението на потока като за най-търпеливия GPS в света, който ви дава указания. Може да каже "Ако има трафик на Main Street, вземете магистралата вместо това. Ако строителството блокира магистралата, опитайте живописния маршрут." Програмите използват точно същия тип условна логика, за да реагират интелигентно на различни ситуации и винаги да предоставят на потребителите най-доброто възможно изживяване. - -✅ **Какво предстои**: Ще се забавляваме страхотно, като се задълбочим в тези концепции, докато продължаваме това невероятно пътешествие заедно! Засега просто се фокусирайте върху усещането за вълнение от всички невероятни възможности, които ви очакват. Конкретните умения и техники ще се запомнят естествено, докато практикуваме заедно – обещавам, че това ще бъде много по-забавно, отколкото може би очаквате! - - -## Инструменти за работа - -Добре, честно казано, тук съм толкова развълнуван, че едва се сдържам! 🚀 Ще говорим за невероятните инструменти, които ще ви накарат да се почувствате сякаш току-що сте получили ключовете за дигитален космически кораб. - -Знаете ли как един готвач има онези перфектно балансирани ножове, които се чувстват като продължение на ръцете му? Или как един музикант има онази китара, която сякаш пее, щом я докосне? Е, разработчиците имаме своя версия на тези магически инструменти, и ето какво ще ви удиви – повечето от тях са напълно безплатни! - -Буквално подскачам на стола си, мислейки за това да ги споделя с вас, защото те напълно революционизираха начина, по който създаваме софтуер. Говорим за асистенти, задвижвани от AI, които могат да помогнат да напишете кода си (не се шегувам!), облачни среди, където можете да изграждате цели приложения от буквално всяко място с Wi-Fi, и инструменти за дебъгване, толкова сложни, че са като да имате рентгеново зрение за вашите програми. - -И ето частта, която все още ме кара да настръхвам: това не са "начинаещи инструменти", които ще надраснете. Това са същите професионални инструменти, които разработчиците в Google, Netflix и онова независимо студио за приложения, което обичате, използват точно в този момент. Ще се почувствате като истински професионалист, използвайки ги! - - -### Редактори на код и IDE: Вашите нови дигитални най-добри приятели - -Нека поговорим за редакторите на код – те сериозно ще станат вашите нови любими места за прекарване на време! Мислете за тях като за вашето лично светилище за програмиране, където ще прекарвате по-голямата част от времето си, създавайки и усъвършенствайки своите дигитални творения. - -Но ето какво е абсолютно магическо в съвременните редактори: те не са просто лъскави текстови редактори. Те са като да имате най-блестящия, подкрепящ ментор по програмиране, който седи до вас 24/7. Те хващат вашите грешки, преди дори да ги забележите, предлагат подобрения, които ви карат да изглеждате като гений, помагат ви да разберете какво прави всяка част от кода и някои от тях дори могат да предвидят какво ще напишете и да предложат да завършат мислите ви! - -Спомням си, когато за първи път открих автоматичното довършване – буквално се почувствах, сякаш живея в бъдещето. Започвате да пишете нещо и вашият редактор казва: "Хей, мислеше ли за тази функция, която прави точно това, от което се нуждаеш?" Това е като да имате гадател за приятел в програмирането! + +**Този код постига следното:** +- **Сравнява** стойността на променливата с няколко конкретни случая +- **Групира** подобни случаи (делници срещу уикенди) +- **Изпълнява** подходящия блок код при намерено съвпадение +- **Включва** `default` случай за обработка на неочаквани стойности +- **Използва** `break` изрази, за да предотврати изпълнение на следващите случаи + +> 💡 **Аналогия от реалния свят**: Мислете за контролния поток като най-търпеливата GPS навигация на света, която ви дава указания. Може да каже „Ако има трафик по Главната улица, вземи магистралата. Ако строителство блокира магистралата, опитай живописния маршрут.“ Програмите използват същия вид условна логика, за да реагират интелигентно на различни ситуации и винаги да предоставят най-доброто възможно изживяване на потребителите. + +### 🎯 **Проверка на концепциите: Владение на строителните елементи** + +**Нека видим как се справяте с основите:** +- Можете ли да обясните с ваши думи разликата между променлива и израз? +- Помислете за реален пример, в който бихте използвали if-then решение (като нашия пример с гласуването) +- Кое е нещо в логиката на програмирането, което ви изненада? + +**Бързо уверяване:** +```mermaid +flowchart LR + A["📝 Изрази
(Инструкции)"] --> B["📦 Променливи
(Съхранение)"] --> C["🔀 Управляващ поток
(Решения)"] --> D["🎉 Работеща програма!"] + + style A fill:#ffeb3b + style B fill:#4caf50 + style C fill:#2196f3 + style D fill:#ff4081 +``` +✅ **Какво предстои:** Ще се забавляваме да навлезем по-дълбоко в тези концепции, докато продължаваме това невероятно пътешествие заедно! Засега се съсредоточете просто върху това да почувствате вълнението за всичките удивителни възможности пред вас. Конкретните умения и техники ще се запечатат естествено, докато практикуваме заедно – обещавам, че ще бъде много по-забавно, отколкото предполагате! + +## Инструментите на занаята + +Добре, честно казано сега се вълнувам толкова, че едва се сдържам! 🚀 Ще говорим за невероятните инструменти, които ще ви накарат да се почувствате така, сякаш току-що са ви дали ключовете на цифров космически кораб. + +Знаете как готвачът има перфектно балансирани ножове, които се чувстват като продължения на ръцете му? Или как музикантът има онзи китара, която сякаш пее в момента, в който я докосне? Е, разработчиците имаме нашата версия на тези магически инструменти и ето какво ще ви пометне главата – повечето от тях са напълно безплатни! + +Почти скачам на стола, докато мисля да ви ги покажа, защото напълно революционизираха начина, по който изграждаме софтуер. Говорим за AI-подсилени асистенти, които могат да помагат да пишете код (и не се шегувам!), облачни среди, в които можете да изграждате цели приложения от буквално всяко място с Wi-Fi, и инструменти за отстраняване на грешки толкова сложни, че са като да имате рентгеново зрение за вашите програми. + +И ето частта, която все още ме кара да настръхвам: това не са „начинаещи инструменти“, които ще ви омръзнат бързо. Това са точно същите професионални инструменти, които разработчиците в Google, Netflix и онова инди студио за приложения, което обичате, използват точно в този момент. Ще се почувствате като истински професионалист, ползвайки ги! + +```mermaid +graph TD + A["💡 Вашата Идея"] --> B["⌨️ Редактор на код
(VS Code)"] + B --> C["🌐 Инструменти за разработка в браузър
(Тестване и отстраняване на грешки)"] + C --> D["⚡ Команден ред
(Автоматизация и инструменти)"] + D --> E["📚 Документация
(Обучение и справка)"] + E --> F["🚀 Удивително уеб приложение!"] + + B -.-> G["🤖 AI Асистент
(GitHub Copilot)"] + C -.-> H["📱 Тестване на устройства
(Отзивчив дизайн)"] + D -.-> I["📦 Пакетни мениджъри
(npm, yarn)"] + E -.-> J["👥 Общност
(Stack Overflow)"] + + style A fill:#fff59d + style F fill:#c8e6c9 + style G fill:#e1f5fe + style H fill:#f3e5f5 + style I fill:#ffccbc + style J fill:#e8eaf6 +``` +### Редактори на код и IDE: Вашите нови цифрови най-добри приятели + +Нека поговорим за редакторите на код – тези наистина ще станат вашето ново любимо място за престой! Мислете за тях като за вашето лично убежище за кодиране, където ще прекарвате по-голямата част от времето си, създавайки и усъвършенствайки цифровите си творения. + +Но ето кое е абсолютно магическо в съвременните редактори: те не са просто обикновени текстови редактори. Те са като най-блестящият, подкрепящ ментор по кодиране, седнал точно до вас 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)** (Безплатен) -- Най-популярен сред уеб разработчиците -- Отлична екосистема от разширения -- Вграден терминал и интеграция с 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) - Открива правописни грешки в кода ви - -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Платен, безплатен за студенти) -- Разширени инструменти за дебъгване и тестване -- Интелигентно довършване на код -- Вграден контрол на версиите +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Безплатен) +- Най-популярен сред уеб разработчиците +- Отлична екосистема от разширения +- Вграден терминал и интеграция с 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) - Хваща правописни грешки в кода -**Облачни IDE** (Различни цени) -- [GitHub Codespaces](https://github.com/features/codespaces) - Пълен VS Code във вашия браузър -- [Replit](https://replit.com/) - Отличен за учене и споделяне на код -- [StackBlitz](https://stackblitz.com/) - Моментална, пълноценна уеб разработка +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Платен, безплатен за студенти) +- Напреднали инструменти за отстраняване на грешки и тестване +- Интелигентно допълване на кода +- Вграден контрол на версиите -> 💡 **Съвет за начало**: Започнете с Visual Studio Code – той е безплатен, широко използван в индустрията и има огромна общност, която създава полезни уроци и разширения. +**Облачни IDE-та** (Различна ценова политика) +- [GitHub Codespaces](https://github.com/features/codespaces) - Пълен VS Code в браузъра ви +- [Replit](https://replit.com/) - Отличен за учене и споделяне на код +- [StackBlitz](https://stackblitz.com/) - Мигновено, пълноценна уеб разработка +> 💡 **Съвет за начало**: Започнете с Visual Studio Code – безплатен е, широко използван в индустрията и има огромна общност, създаваща полезни уроци и разширения. ### Уеб браузъри: Вашата тайна лаборатория за разработка -Доб -| **Конзола** | Преглед на съобщения за грешки и тестване на JavaScript | Откриване на проблеми и експериментиране с код | -| **Мрежов монитор** | Проследяване на зареждането на ресурси | Оптимизиране на производителността и времето за зареждане | -| **Проверка за достъпност** | Тестване за инклузивен дизайн | Уверете се, че сайтът ви работи за всички потребители | -| **Симулатор на устройства** | Преглед на различни размери на екрана | Тестване на адаптивен дизайн без множество устройства | +Добре, пригответе се умът ви да бъде напълно изумен! Знаете как сте използвали браузърите, за да превъртате социалните медии и да гледате видеа? Оказва се, че те са крили тази невероятна тайна лаборатория за разработчици през цялото време, само чакайки да я откриете! + +Всеки път, когато щракнете с десен бутон върху уеб страница и изберете „Inspect Element“ (Инспектиране на елемент), отваряте скрит свят на инструменти за разработчици, които са истински по-мощни от някои скъпи софтуери, за които някога съм плащал стотици долари. Това е като да откриете, че обикновената ви кухня крие професионална готварска лаборатория зад тайна врата! +Първия път, когато някой ми показа DevTools на браузъра, прекарах около три часа просто кликайки наоколо и казвайки си "ЧАКАЙ, ТО МОЖЕ И ТОВА ТАКА?!". Можеш буквално да редактираш всеки уебсайт в реално време, да видиш колко бързо всичко се зарежда, да тестваш как изглежда сайта ти на различни устройства и дори да дебъгваш JavaScript като пълен професионалист. Абсолютно удивително е! + +**Ето защо браузърите са твоето тайно оръжие:** + +Когато създаваш уебсайт или уеб приложение, трябва да видиш как изглежда и се държи в реалния свят. Браузърите не само показват твоята работа, но и предоставят детайлна обратна връзка за производителността, достъпността и потенциални проблеми. + +#### Инструменти за разработчици в браузъра (DevTools) + +Модерните браузъри включват пълни комплекти за разработка: -#### Препоръчителни браузъри за разработка +| Категория на инструмента | Какво прави | Примерна употреба | +|--------------------------|-------------|-------------------| +| **Инспектор на елементи** | Преглед и редакция на HTML/CSS в реално време | Регулиране на стила за мигновени резултати | +| **Конзола** | Преглед на съобщения за грешки и тест на JavaScript | Дебъгване на проблеми и експериментиране с код | +| **Монитор на мрежата** | Следене на зареждането на ресурси | Оптимизиране на производителността и времето за зареждане | +| **Проверка на достъпността** | Тестване за приобщаващ дизайн | Осигуряване, че сайтът работи за всички потребители | +| **Симулатор на устройства** | Преглед на различни размери на екрана | Тест на адаптивен дизайн без нужда от няколко устройства | -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Стандартни инструменти за разработка с обширна документация +#### Препоръчани браузъри за разработка + +- **[Chrome](https://developers.google.com/web/tools/chrome-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 +- **[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-те, а аз определено не съм достатъчно умен за това!" 😅 +Добре, нека бъдем напълно честни за командния ред, защото искам да чуеш това от човек, който наистина го разбира. Когато го видях за първи път – просто този страшен черен екран с мигащ текст – буквално си помислих: "Не, абсолютно не! Това изглежда като нещо от хакерски филм от 80-те и аз определено не съм достатъчно умен за това!" 😅 -Но ето какво бих искал някой да ми каже тогава, и какво ви казвам сега: командният ред не е страшен – всъщност е като да водите директен разговор с вашия компютър. Представете си го като разликата между това да поръчате храна чрез лъскаво приложение с картинки и менюта (което е приятно и лесно) и това да влезете в любимия си местен ресторант, където готвачът знае точно какво харесвате и може да приготви нещо перфектно само като му кажете "изненадай ме с нещо невероятно." +Но ето какво бих искал някой да ми е казал тогава, и което ти казвам сега: командният ред не е страшен – той е като директен разговор с компютъра ти. Представи си го като разликата между поръчване на храна чрез лъскаво приложение със снимки и менюта (което е лесно и удобно) и влизане в любимия ти местен ресторант, където готвачът знае точно какво обичаш и може да ти приготви нещо перфектно само като кажеш "изненадай ме с нещо невероятно." -Командният ред е мястото, където разработчиците се чувстват като абсолютни магьосници. Напишете няколко на пръв поглед магически думи (добре, те са просто команди, но се чувстват магически!), натиснете Enter и БУМ – създавате цели проектни структури, инсталирате мощни инструменти от целия свят или публикувате приложението си в интернет за милиони хора. След като усетите тази сила за първи път, честно казано, става доста пристрастяващо! +Командният ред е мястото, където разработчиците се чувстват като истински магьосници. Въвеждаш няколко на пръв поглед магически думи (добре, просто команди, но звучат магически!), натискаш enter и БАМ – създал си цели проектни структури, инсталирал си мощни инструменти от цял свят или публикувал приложението си в интернет, за да го видят милиони хора. След първия вкус на тази сила, честно казано, става доста пристрастяващо! -**Защо командният ред ще стане вашият любим инструмент:** +**Защо командният ред ще стане любимият ти инструмент:** -Докато графичните интерфейси са страхотни за много задачи, командният ред превъзхожда в автоматизация, прецизност и скорост. Много инструменти за разработка работят предимно чрез интерфейси за команден ред, а научаването как да ги използвате ефективно може значително да подобри вашата продуктивност. +Докато графичните интерфейси са страхотни за много задачи, командният ред превъзхожда в автоматизацията, прецизността и бързината. Много инструменти за разработка работят основно чрез команден ред и да се научиш да ги използваш ефективно може драстично да подобри продуктивността ти. ```bash -# Step 1: Create and navigate to project directory +# Стъпка 1: Създайте и отидете в директорията на проекта mkdir my-awesome-website cd my-awesome-website ``` -**Какво прави този код:** -- **Създава** нова директория, наречена "my-awesome-website" за вашия проект -- **Навигира** в новосъздадената директория, за да започнете работа +**Ето какво прави този код:** +- **Създава** нова директория с името "my-awesome-website" за проекта ти +- **Влиза** в новосъздадената директория, за да започне работа ```bash -# Step 2: Initialize project with package.json +# Стъпка 2: Инициализирайте проекта с package.json npm init -y -# Install modern development tools +# Инсталирайте съвременни инструменти за разработка npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` **Стъпка по стъпка, ето какво се случва:** -- **Инициализира** нов Node.js проект с настройки по подразбиране, използвайки `npm init -y` -- **Инсталира** Vite като модерен инструмент за изграждане за бърза разработка и продукционни билдове -- **Добавя** Prettier за автоматично форматиране на код и ESLint за проверка на качеството на кода +- **Инициализира** нов Node.js проект с настройки по подразбиране чрез `npm init -y` +- **Инсталира** Vite като модерен инструмент за бърза разработка и продукционни сборки +- **Добавя** Prettier за автоматично форматиране на кода и ESLint за проверки на качеството на кода - **Използва** флага `--save-dev`, за да маркира тези зависимости като само за разработка ```bash -# Step 3: Create project structure and files +# Стъпка 3: Създаване на структура на проекта и файлове mkdir src assets echo 'My Site

Hello World

' > index.html -# Start development server +# Стартиране на сървър за разработка npx vite ``` -**В горното сме:** -- **Организирали** нашия проект, като сме създали отделни папки за изходен код и ресурси -- **Генерирали** основен HTML файл с правилна структура на документа -- **Стартирали** Vite сървър за разработка за автоматично презареждане и замяна на модули в реално време +**В горното ние:** +- **Организирахме** проекта чрез създаване на отделни папки за сорс кода и активите +- **Генерирахме** основен HTML файл с правилна структура на документа +- **Стартирахме** Vite сървър за разработка с опция за live reloading и hot module replacement -#### Основни инструменти за команден ред за уеб разработка +#### Основни инструменти на командния ред за уеб разработка -| Инструмент | Цел | Защо ви е нужен | -|------------|-----|-----------------| -| **[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/)** | Форматиране на код | Поддържане на кода последователно форматиран и четим | +| Инструмент | Цел | Защо ти трябва | +|------------|-----|----------------| +| **[Git](https://git-scm.com/)** | Контрол на версиите | Следи промените, сътрудничество с други, резервно копие на работата | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript изпълнителна среда и управление на пакети | Стартирай JavaScript извън браузъра, инсталирай модерни инструменти за разработка | +| **[Vite](https://vitejs.dev/)** | Инструмент за сборка и dev сървър | Светкавично бърза разработка с hot module replacement | +| **[ESLint](https://eslint.org/)** | Качество на кода | Автоматично намиране и поправяне на проблеми в JavaScript кода | +| **[Prettier](https://prettier.io/)** | Форматиране на кода | Поддържай кода си последователно форматиран и четим | -#### Опции според платформата +#### Платформено-зависими опции **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Модерен, богат на функции терминал +- **[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 +- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Традиционен 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)** - Разширен емулатор на терминал +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Модерен емулатор на терминал -> 💻 = Предварително инсталиран на операционната система +> 💻 = Предварително инсталиран в операционната система -> 🎯 **Път на обучение**: Започнете с основни команди като `cd` (смяна на директория), `ls` или `dir` (списък с файлове) и `mkdir` (създаване на папка). Практикувайте с команди за модерен работен процес като `npm install`, `git status` и `code .` (отваря текущата директория в VS Code). С времето ще се чувствате по-уверени и ще научите по-сложни команди и техники за автоматизация. +> 🎯 **Път за учене**: Започни с основни команди като `cd` (смяна на директория), `ls` или `dir` (преглед на файлове) и `mkdir` (създаване на папка). Практикувай с модерни команди от работния процес като `npm install`, `git status` и `code .` (отваря текущата папка във VS Code). С времето естествено ще усвоиш по-сложни команди и техники за автоматизация. -### Документация: Вашият винаги наличен ментор за обучение +### Документация: Твоят винаги на разположение ментор за учене -Добре, ще ви споделя една малка тайна, която ще ви накара да се почувствате много по-добре като начинаещи: дори най-опитните разработчици прекарват огромна част от времето си в четене на документация. И това не е защото не знаят какво правят – всъщност това е знак за мъдрост! +Добре, нека ти споделя една малка тайна, която ще те накара да се чувстваш много по-добре като начинаещ: дори най-опитните разработчици прекарват голяма част от времето си в четене на документация. И не е защото не знаят какво правят – всъщност това е признак на мъдрост! -Помислете за документацията като за достъп до най-търпеливите, знаещи учители в света, които са на разположение 24/7. Затруднени сте с проблем в 2 часа сутринта? Документацията е там с топла виртуална прегръдка и точно отговора, който ви трябва. Искате да научите за някоя нова функция, за която всички говорят? Документацията ви подкрепя със стъпка по стъпка примери. Опитвате се да разберете защо нещо работи по определен начин? Познахте – документацията е готова да го обясни така, че най-накрая да ви стане ясно! +Помисли за документацията като достъп до най-търпеливите и най-знаещи учители по света, на които можеш да разчиташ по всяко време, ден и нощ. Заклещен си в проблем в 2 през нощта? Документацията е там с топла виртуална прегръдка и точно отговора, от който имаш нужда. Искаш да научиш за някоя нова функция, за която всички говорят? Документацията те подкрепя с подробни примери стъпка по стъпка. Опитваш се да разбереш защо нещо работи по определен начин? Позна – документацията е готова да го обясни така, че най-накрая да ти щракне! -Ето нещо, което напълно промени моята перспектива: светът на уеб разработката се движи невероятно бързо и никой (абсолютно никой!) не помни всичко. Виждал съм старши разработчици с над 15 години опит да търсят основен синтаксис, и знаете ли какво? Това не е срамно – това е умно! Не става въпрос за перфектна памет; става въпрос за това да знаете къде да намерите надеждни отговори бързо и да разбирате как да ги приложите. +Ето нещо, което напълно промени гледната ми точка: светът на уеб разработката се развива изключително бързо и никой (абсолютно никой!) не помни всичко. Гледал съм старши разработчици с над 15 години опит да търсят основен синтаксис и знаеш ли какво? Това не е срамно – това е умно! Не става дума за перфектна памет, а за това да знаеш къде да намериш надеждни отговори бързо и как да ги прилагаш. -**Ето къде се случва истинската магия:** +**Ето къде става истинската магия:** -Професионалните разработчици прекарват значителна част от времето си в четене на документация – не защото не знаят какво правят, а защото пейзажът на уеб разработката се развива толкова бързо, че за да останат актуални, е необходимо непрекъснато учене. Добрата документация ви помага да разберете не само *как* да използвате нещо, но и *защо* и *кога* да го използвате. +Професионалните разработчици прекарват значителна част от времето си в четене на документация – не защото не знаят какво правят, а защото уеб разработката се развива толкова бързо, че да си в крак изисква постоянно учене. Добрата документация ти помага да разбереш не само *как* да използваш нещо, но и *защо* и *кога* да го използваш. -#### Основни ресурси за документация +#### Основни източници на документация **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Златният стандарт за документация на уеб технологии +- Златният стандарт за документиране на уеб технологии - Изчерпателни ръководства за HTML, CSS и JavaScript -- Включва информация за съвместимост с браузъри -- Съдържа практически примери и интерактивни демонстрации +- Съдържа информация за съвместимост с браузъри +- Включва практични примери и интерактивни демонстрации **[Web.dev](https://web.dev)** (от Google) -- Най-добри практики за модерна уеб разработка +- Най-добри практики за съвременна уеб разработка - Ръководства за оптимизация на производителността -- Принципи за достъпност и инклузивен дизайн +- Принципи за достъпност и приобщаващ дизайн - Казуси от реални проекти **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Ресурси за разработка за браузъра Edge -- Ръководства за прогресивни уеб приложения -- Информация за разработка на различни платформи +- Ресурси за разработка на Edge браузър +- Ръководства за Progressive Web Apps +- Инсайти за кросплатформена разработка **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Структурирани учебни програми -- Видео курсове от експерти в индустрията -- Практически упражнения за програмиране - -> 📚 **Стратегия за учене**: Не се опитвайте да запомняте документацията – вместо това, научете как да я навигирате ефективно. Запазете често използваните референции и практикувайте използването на функциите за търсене, за да намирате бързо конкретна информация. - -✅ **Храна за размисъл**: Ето нещо интересно за размисъл – как мислите, че инструментите за създаване на уебсайтове (разработка) се различават от инструментите за проектиране на външния им вид (дизайн)? Това е като разликата между архитект, който проектира красива къща, и строител, който всъщност я изгражда. И двамата са от съществено значение, но се нуждаят от различни инструменти! Този начин на мислене наистина ще ви помогне да видите по-голямата картина за това как уебсайтовете оживяват. +- Структурирани учебни курикулуми +- Видеокурсове от експерти в индустрията +- Практически упражнения по програмиране + +> 📚 **Стратегия за учене**: Не се опитвай да запаметяваш документацията – вместо това се научи да я навигираш ефективно. Добавяй в отметки често използвани справки и практикувай използването на търсачката, за да намираш специфична информация бързо. + +### 🔧 **Проверка на умения: Кое ти допада най-много?** + +**Отдели момент да помислиш:** +- Кой инструмент се вълнуваш най-много да изпробваш първо? (Няма грешен отговор!) +- Все още ли ти се струва страшен командният ред, или вече си любопитен? +- Можеш ли да си представиш да използваш браузърните DevTools, за да надникнеш зад кулисите на любимите сайтове? + +```mermaid +pie title "Време прекарано от разработчика с инструменти" + "Редактор на код" : 40 + "Тестване в браузър" : 25 + "Команден ред" : 15 + "Четене на документация" : 15 + "Отстраняване на грешки" : 5 +``` +> **Забавен факт**: Повечето разработчици прекарват около 40% от времето в редактора на кода, но забележи колко време отделят за тестване, учене и решаване на проблеми. Програмирането не е само писане на код – то е създаване на преживявания! +✅ **Храна за размисъл**: Ето нещо интересно за обмисляне – мислиш ли, че инструментите за създаване на уебсайтове (разработка) могат да се различават от инструментите за дизайна им (визуален дизайн)? Това е като разликата между архитект, който проектира красива къща, и изпълнител, който я строи. И двете са важни, но имат различни инструменти! Такъв тип мислене ще ти помогне да видиш по-голямата картина за това как уебсайтовете оживяват. -## Предизвикателство с GitHub Copilot Agent 🚀 +## GitHub Copilot Agent Challenge 🚀 -Използвайте режима Agent, за да изпълните следното предизвикателство: +Използвай Agent режима за да изпълниш следната задача: -**Описание:** Разгледайте функциите на модерен редактор на код или 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/). Не се страхувайте да експериментирате – няма да счупите нищо! +- Прочетете за това как е възникнал любимият ви език. Сериозно, някои от тези истории за произхода са завладяващи и ще ви помогнат да разберете защо езиците работят така, както работят. -**Практикувай с програмни езици:** -- Посети официалните уебсайтове на 2-3 езика, които са привлекли вниманието ти. Всеки от тях -- Гледайте видеа за програмиране за начинаещи в YouTube. Има толкова много страхотни създатели, които помнят какво е да започваш от нулата. -- Помислете за присъединяване към местни срещи или онлайн общности. Повярвайте ми, разработчиците обожават да помагат на новаците! +**Запознайте се с новите си инструменти:** +- Свалете Visual Studio Code, ако още не сте го направили – безплатен е и ще ви хареса! +- Отделете няколко минути, за да разгледате Marketplace за разширения. Това е като магазин за приложения за вашия кодов редактор! +- Отворете Developer Tools на браузъра си и просто кликнете из тях. Не се притеснявайте да разберете всичко веднага – просто свиквайте с наличното. -> 🎯 **Слушайте, ето какво искам да запомните**: Не се очаква да станете магьосник в програмирането за една нощ! В момента просто опознавате този невероятен нов свят, от който скоро ще станете част. Отделете време, наслаждавайте се на пътуването и запомнете – всеки един разработчик, на когото се възхищавате, някога е бил точно там, където сте вие сега, изпълнен с вълнение и може би малко объркан. Това е напълно нормално и означава, че сте на прав път! +**Присъединете се към общността:** +- Последвайте някои технически общности в [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), или [GitHub](https://github.com/). Програмистката общност е изключително приветлива към новодошлите! +- Гледайте видео уроци за начинаещи в YouTube. Има толкова много страхотни създатели на съдържание, които помнят какво е да започнеш. +- Помислете за участие в местни срещи или онлайн групи. Повярвайте ми, програмистите обичат да помагат на новаците! + +> 🎯 **Слушайте, ето какво искам да запомните**: Не се очаква да станете програмен магьосник за една нощ! В момента просто се запознавате с тази удивителна нова вселена, към която ще принадлежите. Отделете си време, насладете се на пътешествието и запомнете – всеки един програмист, когото уважавате, някога е седял точно там, където сте вие сега, чувствайки се развълнуван и може би малко претоварен. Това е съвсем нормално и означава, че вървите в правилната посока! ## Задача -[Четене на документация](assignment.md) +[Reading the Docs](assignment.md) + +> 💡 **Малък тласък за задачата:** Много бих искал да видя как изследвате някои инструменти, които още не сме разглеждали! Прескочете редакторите, браузърите и командните инструменти, за които вече говорихме – има цяла невероятна вселена от страхотни инструменти за разработка, която само чака да бъде открита. Потърсете такива, които са активно поддържани и имат оживени, подкрепящи общности (те обикновено имат най-добрите уроци и най-подкрепящите хора, когато някога се затрудните и имате нужда от приятелска помощ). -> 💡 **Малко насърчение за вашата задача**: Ще се радвам да видя как изследвате някои инструменти, които все още не сме разглеждали! Пропуснете редакторите, браузърите и инструментите за команден ред, за които вече сме говорили – има цяла невероятна вселена от страхотни инструменти за разработка, които чакат да бъдат открити. Потърсете такива, които се поддържат активно и имат оживени, полезни общности (те обикновено предлагат най-добрите уроци и най-подкрепящите хора, когато неизбежно се затрудните и имате нужда от приятелска помощ). +--- + +## 🚀 Вашата Програмираща Пътеводителна Линия + +### ⚡ **Какво можете да направите следващите 5 минути** +- [ ] Запазете като отметки 2-3 уебсайта на програмни езици, които са ви направили впечатление +- [ ] Изтеглете Visual Studio Code, ако все още не сте го направили +- [ ] Отворете Developer Tools на браузъра си (F12) и кликнете из който и да е сайт +- [ ] Присъединете се към някоя програмираща общност (Dev.to, Reddit r/webdev, или Stack Overflow) + +### ⏰ **Какво можете да постигнете през този час** +- [ ] Попълнете теста след урока и обмислете отговорите си +- [ ] Настройте VS Code с разширението GitHub Copilot +- [ ] Опитайте упражнение „Hello World“ на 2 различни програмни езика онлайн +- [ ] Гледайте видео „Един ден в живота на програмиста“ в YouTube +- [ ] Започнете детективската си работа с програмните езици (от предизвикателството) + +### 📅 **Вашето приключение за една седмица** +- [ ] Завършете задачата и изследвайте 3 нови инструмента за разработка +- [ ] Последвайте 5 програмисти или програмни акаунти в социалните мрежи +- [ ] Опитайте да създадете нещо малко в CodePen или Replit (дори само „Hello, [Вашето име]!”) +- [ ] Прочетете един блог пост на програмист за неговото програмиращо пътешествие +- [ ] Присъединете се към виртуална среща или гледайте презентация по програмиране +- [ ] Започнете да учите избрания език с онлайн уроци + +### 🗓️ **Вашата месечна трансформация** +- [ ] Създайте първия си малък проект (дори и проста уеб страница се брои!) +- [ ] Допринасяйте за проект с отворен код (започнете с поправки на документация) +- [ ] Наставлявайте някого, който тепърва започва с програмирането +- [ ] Създайте своя уебсайт портфолио за разработчик +- [ ] Свържете се с местни общности на разработчици или учебни групи +- [ ] Започнете да планирате следващата си образователна цел + +### 🎯 **Финален рефлективен чек-ин** + +**Преди да продължите, отделете момент да отпразнувате:** +- Кое е едно нещо в програмирането, което ви развълнува днес? +- Кой инструмент или концепция искате да изследвате първо? +- Как се чувствате, започвайки това програмиращо пътешествие? +- Кой е един въпрос, който бихте искали да зададете на разработчик точно сега? + +```mermaid +journey + title Вашето пътешествие към изграждане на увереност + section Днес + Любопитен: 3: You + Претоварен: 4: You + Вълнуван: 5: You + section Тази седмица + Изследващ: 4: You + Учещ: 5: You + Свързващ се: 4: You + section Следващия месец + Изграждащ: 5: You + Уверен: 5: You + Помагащ на другите: 5: You +``` +> 🌟 **Запомнете**: Всеки експерт някога е бил начинаещ. Всеки старши разработчик някога се е чувствал точно както вие сега – развълнуван, може би малко претоварен и определено любопитен какво е възможно. Вие сте в удивителна компания и това пътешествие ще бъде невероятно. Добре дошли в прекрасния свят на програмирането! 🎉 --- + **Отказ от отговорност**: -Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да било недоразумения или погрешни интерпретации, произтичащи от използването на този превод. \ No newline at end of file +Този документ е преведен с използване на AI преводаческа услуга [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Ние не носим отговорност за каквито и да е недоразумения или неправилни тълкувания, произтичащи от използването на този превод. + \ No newline at end of file diff --git a/translations/bg/1-getting-started-lessons/2-github-basics/README.md b/translations/bg/1-getting-started-lessons/2-github-basics/README.md index 88174ce36..020c556e7 100644 --- a/translations/bg/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/bg/1-getting-started-lessons/2-github-basics/README.md @@ -1,52 +1,68 @@ # Въведение в GitHub -Здравей, бъдещ разработчик! 👋 Готов ли си да се присъединиш към милиони програмисти по света? Наистина съм развълнуван да те запозная с GitHub – представи си го като социална мрежа за програмисти, но вместо да споделяме снимки на обяд, ние споделяме код и създаваме невероятни неща заедно! +Здрасти, бъдещ разработчик! 👋 Готов ли си да се присъединиш към милионите програмисти по света? Наистина съм развълнуван да ти представя GitHub – помисли за него като социална мрежа за програмисти, но вместо да споделяме снимки на обяда си, ние споделяме код и създаваме невероятни неща заедно! -Ето какво ме изумява: всяко приложение на телефона ти, всеки уебсайт, който посещаваш, и повечето инструменти, които ще научиш да използваш, са създадени от екипи от разработчици, които си сътрудничат на платформи като GitHub. Това музикално приложение, което обичаш? Някой като теб е допринесъл за него. Тази игра, от която не можеш да се откъснеш? Да, вероятно е създадена с помощта на GitHub. А сега ТИ ще научиш как да станеш част от тази невероятна общност! +Ето нещо, което ме изумява: всяко приложение на телефона ти, всеки уебсайт, който посещаваш, и повечето от инструментите, които ще научиш да използваш, са създадени от екипи разработчици, които си сътрудничат на платформи като GitHub. Това музикално приложение, което обичаш? Някой като теб е допринесъл за него. Тази игра, която не можеш да оставиш? Да, вероятно е създадена чрез сътрудничество в GitHub. А сега ТИ ЩЕ се научиш как да бъдеш част от тази удивителна общност! -Знам, че в началото може да ти се струва трудно – помня как гледах първата си страница в GitHub и си мислех: "Какво, за Бога, означава всичко това?" Но ето какво ще ти кажа: всеки един разработчик е започнал точно там, където си ти в момента. До края на този урок ще имаш собствено GitHub хранилище (представи си го като твоя лична витрина за проекти в облака) и ще знаеш как да запазваш работата си, да я споделяш с другите и дори да допринасяш за проекти, които се използват от милиони хора. +Знам, че първоначално може да ти се стори много – чертите си спомням как гледах първата си страница в GitHub и мислех „Какво по дяволите означава всичко това?“ Но ето нещо: всеки разработчик е започнал точно там, където си ти сега. До края на този урок ще имаш собствен GitHub репозиторий (помисли за него като твоя лична изложба на проекти в облака) и ще знаеш как да запазваш работата си, да я споделяш с другите и дори да допринасяш за проекти, които използват милиони хора. -Ще извървим този път заедно, стъпка по стъпка. Без бързане, без напрежение – само ти, аз и някои наистина страхотни инструменти, които скоро ще станат твоите нови най-добри приятели! +Ще изминаем това пътешествие заедно, стъпка по стъпка. Без бързане, без натиск – само ти, аз и някои много яки инструменти, които ще станат твоите най-добри приятели! -![Въведение в GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.bg.png) -> Скица от [Tomomi Imura](https://twitter.com/girlie_mac) +![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.bg.png) +> Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac) -## Предварителен тест +```mermaid +journey + title Вашето приключение с GitHub днес + section Настройка + Инсталирайте Git: 4: You + Създаване на акаунт: 5: You + Първо репозитори: 5: You + section Овладейте Git + Локални промени: 4: You + Комити и изпращания: 5: You + Клонове: 4: You + section Сътрудничество + Форкване на проекти: 4: You + Pull заявки: 5: You + Отворен код: 5: You +``` +## Предварителен тест преди лекцията [Предварителен тест](https://ff-quizzes.netlify.app) ## Въведение -Преди да се потопим в наистина вълнуващите неща, нека подготвим компютъра ти за малко магия с GitHub! Представи си това като организиране на твоите художествени материали преди да създадеш шедьовър – наличието на правилните инструменти прави всичко много по-гладко и много по-забавно. +Преди да се потопим в наистина вълнуващите неща, нека подготвим компютъра ти за малко магия с GitHub! Помисли за това като да организираш художествените си материали преди да създадеш шедьовър – когато имаш правилните инструменти под ръка, всичко е много по-гладко и доста по-забавно. -Ще те преведа през всяка стъпка от настройката лично и обещавам, че не е толкова страшно, колкото изглежда на пръв поглед. Ако нещо не ти се изясни веднага, това е напълно нормално! Помня как настройвах първата си среда за разработка и се чувствах сякаш се опитвам да разчета древни йероглифи. Всеки един разработчик е бил точно там, където си ти в момента, чудейки се дали прави всичко правилно. Спойлер: ако си тук и учиш, вече го правиш правилно! 🌟 +Ще те преведа през всяка стъпка от настройката лично и обещавам, че не е толкова страшно, колкото може да изглежда на пръв поглед. Ако нещо не ти се получи от първия път, това е напълно нормално! Спомням си как настройвах първата си среда за разработка и имах чувството, че се опитвам да чета древни йероглифи. Всеки разработчик е бил точно там, където си ти сега, чудейки се дали го прави правилно. Малък спойлер: ако си тук и учиш, вече го правиш правилно! 🌟 В този урок ще разгледаме: -- как да следиш работата си на компютъра +- как да следиш работата, която вършиш на своя компютър - как да работиш по проекти с други хора -- как да допринасяш за софтуер с отворен код +- как да допринасяш към проекти с отворен код -### Предварителни изисквания +### Предварителни условия -Нека подготвим компютъра ти за малко магия с GitHub! Не се притеснявай – тази настройка трябва да направиш само веднъж и след това ще си готов за цялото си пътешествие в програмирането. +Нека подготвим компютъра ти за магия с GitHub! Не се притеснявай – тази настройка е нещо, което трябва да направиш само веднъж и след това си готов за цялото си пътешествие с програмирането. -Добре, да започнем с основите! Първо, трябва да проверим дали Git вече е инсталиран на компютъра ти. Git е като супер интелигентен асистент, който помни всяка промяна, която правиш в кода си – много по-добре от това да натискаш Ctrl+S на всеки две секунди (всички сме го правили!). +Добре, нека започнем с основите! Първо трябва да проверим дали Git вече е инсталиран на твоя компютър. Git е като много умен асистент, който запомня всяка промяна, която правиш в кода си – много по-добре от това да натискаш Ctrl+S панически на всяка две секунди (всички сме го правили!). -Нека видим дали Git вече е инсталиран, като напишем тази магическа команда в терминала: +Нека видим дали Git вече е инсталиран, като напишеш тази магическа команда в терминала си: `git --version` -Ако Git все още не е инсталиран, няма проблем! Просто отиди на [download Git](https://git-scm.com/downloads) и го изтегли. След като го инсталираш, трябва да представим Git на теб правилно: +Ако Git не е там все още, не се притеснявай! Просто отиди на [download Git](https://git-scm.com/downloads) и го изтегли. Когато го инсталираш, ще трябва да представиш Git правилно на компютъра си: -> 💡 **Първоначална настройка**: Тези команди казват на Git кой си. Тази информация ще бъде прикрепена към всяка промяна, която правиш, така че избери име и имейл, които си комфортен да споделиш публично. +> 💡 **Първоначална настройка**: Тези команди казват на Git кой си ти. Тази информация ще бъде прикачена към всяко "commit"-ване, което направиш, затова избери име и имейл, които си комфортен да споделяш публично. ```bash git config --global user.name "your-name" @@ -58,113 +74,136 @@ git config --global user.email "your-email" git config --list ``` -Ще ти трябва и GitHub акаунт, редактор за код (като Visual Studio Code) и трябва да отвориш терминала си (или командния ред). +Ще ти трябва също GitHub акаунт, редактор за код (като Visual Studio Code) и да отвориш своя терминал (или: командния прозорец). -Посети [github.com](https://github.com/) и създай акаунт, ако все още нямаш такъв, или влез и попълни профила си. +Посети [github.com](https://github.com/) и създай акаунт, ако все още нямаш, или влез в профила си и попълни своя профил. -💡 **Съвременен съвет**: Помисли за настройка на [SSH ключове](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) или използване на [GitHub CLI](https://cli.github.com/) за по-лесно удостоверяване без пароли. +💡 **Съвременен съвет**: Помисли за настройване на [SSH ключове](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) или използване на [GitHub CLI](https://cli.github.com/) за по-лесна автентикация без пароли. -✅ GitHub не е единственото хранилище за код в света; има и други, но GitHub е най-известното. +✅ GitHub не е единственият репозиторий за код в света; има и други, но GitHub е най-известният ### Подготовка -Ще ти трябва както папка с проект за код на локалния ти компютър (лаптоп или PC), така и публично хранилище в GitHub, което ще служи като пример за това как да допринасяш към проектите на други хора. +Ще ти трябва както папка с проект с код на твоя локален компютър (лаптоп или настолен), така и публичен репозиторий в GitHub, който ще служи като пример как да допринасяш за проекти на други хора. -### Запазване на кода ти безопасно +### Как да пазиш кода си в безопасност -Нека поговорим за сигурността за момент – но не се притеснявай, няма да те затрупаме със страшни неща! Представи си тези практики за сигурност като заключване на колата или дома ти. Те са прости навици, които стават естествени и пазят труда ти защитен. +Нека поговорим малко за сигурността – но не се притеснявай, няма да те затрупаме с плашещи неща! Помисли за тези практики като за заключване на колата или дома си. Това са прости навици, които стават втора природа и пазят труда ти защитен. -Ще ти покажем съвременните, сигурни начини за работа с GitHub още от самото начало. Така ще развиеш добри навици, които ще ти служат добре през цялата ти кариера в програмирането. +Ще ти покажем съвременните и сигурни начини да работиш с GitHub още от самото начало. По този начин ще развиеш добри навици, които ще ти служат добре през цялата ти програмситка кариера. Когато работиш с GitHub, е важно да следваш най-добрите практики за сигурност: -| Област на сигурност | Най-добра практика | Защо е важно | +| Област на сигурност | Най-добра практика | Защо е важна | |---------------------|--------------------|--------------| -| **Удостоверяване** | Използвай SSH ключове или Лични достъпни токени | Паролите са по-малко сигурни и постепенно се премахват | -| **Двуфакторно удостоверяване** | Активирай 2FA за акаунта си в GitHub | Добавя допълнителен слой защита на акаунта | -| **Сигурност на хранилището** | Никога не качвай чувствителна информация | API ключове и пароли не трябва да са в публични хранилища | -| **Управление на зависимости** | Активирай Dependabot за актуализации | Поддържа зависимостите ти сигурни и актуални | +| **Автентикация** | Използвай SSH ключове или лични достъпни токени | Паролите са по-малко сигурни и се премахват постепенно | +| **Двуфакторна автентикация** | Активирай 2FA в своя GitHub акаунт | Добавя допълнителен слой предпазване на акаунта | +| **Сигурност на репозитория** | Никога не вмъквай чувствителна информация | API ключове и пароли никога не трябва да бъдат в публични репозиторни | +| **Управление на зависимости** | Включи Dependabot за обновления | Поддържа зависимостите ти сигурни и актуални | -> ⚠️ **Критично напомняне за сигурност**: Никога не качвай API ключове, пароли или друга чувствителна информация в хранилище. Използвай променливи на средата и `.gitignore` файлове, за да защитиш чувствителните данни. +> ⚠️ **Критично предупреждение за сигурност**: Никога не вмъквай API ключове, пароли или други чувствителни данни в който и да е репозиторий. Използвай променливи на средата и `.gitignore` файлове за защита на конфиденциални данни. -**Съвременна настройка за удостоверяване:** +**Съвременна настройка на автентикация:** ```bash -# Generate SSH key (modern ed25519 algorithm) +# Генериране на SSH ключ (модерен алгоритъм ed25519) ssh-keygen -t ed25519 -C "your_email@example.com" -# Set up Git to use SSH +# Настройте Git да използва SSH git remote set-url origin git@github.com:username/repository.git ``` -> 💡 **Съвет**: SSH ключовете премахват нуждата от многократно въвеждане на пароли и са по-сигурни от традиционните методи за удостоверяване. +> 💡 **Професионален съвет**: SSH ключовете премахват необходимостта да въвеждаш пароли многократно и са по-сигурен метод от традиционните. --- -## Управление на кода ти като професионалист - -Добре, ТОВА е моментът, когато нещата стават наистина вълнуващи! 🎉 Ще научим как да следиш и управляваш кода си като професионалисти, и честно казано, това е едно от любимите ми неща за преподаване, защото е истински преломен момент. - -Представи си следното: пишеш невероятна история и искаш да следиш всяка чернова, всяка блестяща редакция и всеки "чакай, това е гениално!" момент по пътя. Това е точно това, което Git прави за твоя код! Това е като да имаш най-невероятния тетрадка за пътуване във времето, която помни ВСИЧКО – всяко натискане на клавиш, всяка промяна, всеки "о, не, това счупи всичко" момент, който можеш мигновено да отмениш. - -Ще бъда честен – в началото може да ти се струва объркващо. Когато започнах, си мислех "Защо просто не мога да запазя файловете си както обикновено?" Но ми се довери: щом Git ти стане ясен (а това ще се случи!), ще имаш един от онези моменти на просветление, когато си казваш "Как изобщо съм програмирал без това?" Това е като да откриеш, че можеш да летиш, след като цял живот си ходил пеша! - -Да кажем, че имаш папка локално с проект за код и искаш да започнеш да следиш напредъка си с помощта на git – системата за контрол на версиите. Някои хора сравняват използването на git с писане на любовно писмо до бъдещото си аз. Четейки съобщенията за промени (commit messages) след дни, седмици или месеци, ще можеш да си припомниш защо си взел дадено решение или да "върнеш" промяна – стига да пишеш добри съобщения за промените. - -### Задача: Създай своето първо хранилище! +## Управлявай кода си като професионалист + +Добре, ТУК нещата стават наистина вълнуващи! 🎉 Ще научим как да следиш и управляваш кода си като истински професионалисти, и честно казано, това е едно от любимите ми неща да преподавам, защото наистина променя играта. + +Представи си: пишеш невероятна история и искаш да следиш всеки проект, всяка блестяща редакция и всеки момент „чакай, това е гениално!“ Именно това прави Git за твоя код! Това е като най-невероятната тетрадка за пътуване във времето, която помни ВСИЧКО – всяко натискане на клавиш, всяка промяна, всеки момент „ой, съсипах всичко“, който можеш мигновено да отмениш. + +Честно казано – първоначално може да ти се стори объркващо. Когато аз започнах, мислех „Защо не мога просто да запазвам файловете си както винаги?“ Но повярвай ми: когато Git щракне за теб (а ще го направи!), ще имаш онзи момент, в който мислиш „Как въобще съм кодиран преди това без него?“ Това е като да откриеш, че можеш да летиш, след като цял живот си ходил пеша! + +Да кажем, че имаш папка локално с някакъв проект и искаш да започнеш да следиш напредъка си с git – системата за контрол на версиите. Някои хора сравняват използването на git с писане на любовно писмо до бъдещото си аз. Когато четеш съобщенията към commit през дни, седмици или месеци, ще можеш да си припомниш защо си направил дадено решение или да „върнеш“ промяна – при условие, че си писал добри съобщения към commit. + +```mermaid +flowchart TD + A[📁 Вашите проектни файлове] --> B{Това Git хранилище ли е?} + B -->|Не| C[git init] + B -->|Да| D[Направете промени] + C --> D + D --> E[git add .] + E --> F["git commit -m 'съобщение'"] + F --> G[git push] + G --> H[🌟 Код в GitHub!] + + H --> I{Искате ли да си сътрудничите?} + I -->|Да| J[Форк и клониране] + I -->|Не| D + J --> K[Създайте клон] + K --> L[Направете промени] + L --> M[Pull Request] + M --> N[🎉 Принос!] + + style A fill:#fff59d + style H fill:#c8e6c9 + style N fill:#ff4081,color:#fff +``` +### Задача: Създай първия си репозиторий! -> 🎯 **Твоята мисия (и съм толкова развълнуван за теб!)**: Ще създадем твоето първо GitHub хранилище заедно! До края на това, ще имаш свое малко кътче в интернет, където ще живее твоят код, и ще направиш първия си "commit" (това е разработчески жаргон за интелигентно запазване на работата ти). +> 🎯 **Твоята мисия (и аз съм супер развълнуван за теб!)**: Заедно ще създадем твоя първи GitHub репозиторий! Когато приключим, ще имаш свой собствен малък ъгъл в интернет, където живее твоя код и ще си направил своя първи "commit" (това е програмистки жаргон за интелигентно запазване на работата ти). > -> Това е наистина специален момент – ти официално се присъединяваш към глобалната общност на разработчиците! Все още помня тръпката от създаването на първото си хранилище и мисълта "Уау, наистина го правя!" +> Това е наистина специален момент – ти си на път да се присъединиш официално към глобалната общност на разработчици! Аз още помня трепета, когато създадох първия си репо и си мислех „Уау, наистина го правя!“ -Нека преминем през това приключение заедно, стъпка по стъпка. Отдели време за всяка част – няма награда за бързане и обещавам, че всяка стъпка ще има смисъл. Помни, всеки програмист, който възхищаваш, е бил точно там, където си ти, готов да създаде своето първо хранилище. Колко яко е това? +Нека преминем през това приключение заедно, стъпка по стъпка. Отнеми си време за всяка част – няма награда за бързане и обещавам, че всяка стъпка ще има смисъл. Помни, всеки легендарен програмист, който уважаваш, е седял точно там, където си ти сега, и е на път да създаде първия си репозиторий. Колко яко е това? -> Виж видеото +> Гледай видеото > -> [![Видео за основите на Git и GitHub](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4) +> [![Основи на Git и GitHub видео](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4) **Да го направим заедно:** -1. **Създай своето хранилище в GitHub**. Отиди на GitHub.com и потърси яркозеления бутон **New** (или знака **+** в горния десен ъгъл). Кликни върху него и избери **New repository**. +1. **Създай репозитория си в GitHub**. Отиди на GitHub.com и потърси онзи яркозелен бутон **New** (или знака **+** в горния десен ъгъл). Кликни го и избери **New repository**. Ето какво да направиш: - 1. Дай име на хранилището си – нека бъде нещо значимо за теб! - 1. Добави описание, ако искаш (това помага на другите да разберат за какво става въпрос в проекта ти) - 1. Реши дали искаш да бъде публично (всеки може да го види) или частно (само за теб) - 1. Препоръчвам да отметнеш полето за добавяне на README файл – това е като началната страница на проекта ти - 1. Кликни **Create repository** и празнувай – току-що създаде първото си хранилище! 🎉 + 1. Дай име на репозитория си – нещо, което има значение за теб! + 1. Добави описание, ако искаш (за да помогнеш на другите да разберат какво представлява проектът) + 1. Реши дали да е публичен (всеки може да го види) или частен (само ти) + 1. Препоръчвам да маркираш кутията за README файл – това е като корицата на проекта ти + 1. Натисни **Create repository** и се зарадвай – току-що създаде първия си репозиторий! 🎉 -2. **Отиди до папката на проекта си**. Сега нека отворим терминала ти (не се притеснявай, не е толкова страшно, колкото изглежда!). Трябва да кажем на компютъра ти къде се намират файловете на проекта. Напиши тази команда: +2. **Отиди до папката с твоя проект**. Сега нека отворим терминала ти (не се притеснявай, не е толкова страшно). Трябва да кажем на компютъра къде са файловете на проекта. Въведи тази команда: ```bash cd [name of your folder] ``` **Какво правим тук:** - - Казваме на компютъра "Хей, заведи ме до папката на проекта ми" - - Това е като да отвориш конкретна папка на работния плот, но го правим с текстови команди - - Замени `[name of your folder]` с действителното име на папката на проекта ти + - Казваме на компютъра „Ей, отведи ме до папката на проекта ми“ + - Това е като да отвориш конкретна папка на десктопа си, но го правим с текстови команди + - Замени `[name of your folder]` с истинското име на твоята папка с проект -3. **Превърни папката си в Git хранилище**. Тук се случва магията! Напиши: +3. **Преобразувай папката си в Git репозиторий**. Тук настъпва магията! Въведи: ```bash git init ``` - **Ето какво се случи (доста яко нещо!):** - - Git току-що създаде скрита `.git` папка в проекта ти – няма да я видиш, но тя е там! - - Обикновената ти папка вече е "хранилище", което може да следи всяка промяна, която правиш - - Представи си го като да дадеш на папката си суперсили да помни всичко + **Ето какво току-що се случи (много яко!):** + - Git създаде скрита папка `.git` в твоя проект – няма да я видиш, но е там! + - Твоята обикновена папка вече е "репозиторий", който може да следи всяка промяна, която правиш + - Помисли за това като за даване на суперсили на папката да помни всичко -4. **Провери какво се случва**. Нека видим какво мисли Git за проекта ти в момента: +4. **Провери какво става**. Нека видим какво Git мисли за твоя проект в момента: ```bash git status ``` - **Разбиране на това, което Git ти казва:** + **Разбиране на информацията от Git:** - Може да видиш нещо, което изглежда така: + Може да видиш нещо такова: ```output Changes not staged for commit: @@ -175,48 +214,48 @@ git remote set-url origin git@github.com:username/repository.git modified: file2.txt ``` - **Не се паникьосвай! Ето какво означава това:** - - Файловете в **червено** са файлове, които имат промени, но все още не са готови за запазване - - Файловете в **зелено** (когато ги видиш) са готови за запазване - - Git е полезен, като ти казва точно какво можеш да направиш след това + **Не се паникьосвай! Това означава:** + - Файлове в **червено** са файлове с направени промени, но все още не са готови за запазване + - Файлове в **зелено** (когато ги видиш) са готови за запазване + - Git е полезен и ти казва какво можеш да направиш след това - > 💡 **Съвет**: Командата `git status` е твоят най-добър приятел! Използвай я винаги, когато си объркан какво се случва. Това е като да питаш Git "Хей, каква е ситуацията в момента?" + > 💡 **Професионален съвет**: Командата `git status` е твоят най-добър приятел! Използвай я винаги когато си объркан какво се случва. Това е като да питаш Git „Ей, каква е ситуацията точно сега?“ -5. **Подготви файловете си за запазване** (това се нарича "стейджинг"): +5. **Подготви файловете си за запазване** (това се нарича "staging"): ```bash git add . ``` **Какво току-що направихме:** - - Казахме на Git "Хей, искам да включа ВСИЧКИ мои файлове в следващото запазване" - - Точката (`.`) е като да кажеш "всичко в тази папка" - - Сега файловете ти са "стейджнати" и готови за следващата стъпка + - Казахме на Git „Искам да включа ВСИЧКИ мои файлове в следващото запазване“ + - Точката `.` е като да кажеш „всичко в тази папка“ + - Сега файловете ти са "подготвени" и готови за следващата стъпка - **Искаш да бъдеш по-селективен?** Можеш да добавиш само конкретни файлове: + **Искаш да бъдеш по-прецизен?** Можеш да добавиш само конкретни файлове: ```bash git add [file or folder name] ``` - **Защо може да искаш да направиш това?** + **Защо може да искаш това?** - Понякога искаш да запазиш свързани промени заедно - - Помага ти да организираш работата си в логически части - - Улеснява разбирането какво се е променило и кога + - Това ти помага да организираш работата си в логични части + - Прави по-лесно разбирането какво и кога се е променило - **Промени мнението си?** Няма проблем! Можеш да премахнеш файлове от стейджинга така: + **Промени ли си решението?** Няма проблем! Можеш да извадиш файлове от подготовката по този начин: ```bash - # Unstage everything + # Премахнете всичко от подготвянето git reset - # Unstage just one file + # Премахнете от подготвянето само един файл git reset [file name] ``` - Не се притеснявай – това не изтрива работата ти, просто премахва файловете от "готови за запазване" купчината. + Не се притеснявай – това не изтрива твоята работа, просто изважда файловете от групата на „готови за запазване“. -6. **Запази работата си завинаги** (направи първия си commit!): +6. **Запази работата си окончателно** (направи първия си commit!): ```bash git commit -m "first commit" @@ -225,17 +264,29 @@ git remote set-url origin git@github.com:username/repository.git **🎉 Поздравления! Току-що направи първия си commit!** **Ето какво се случи:** - - Git направи "моментна снимка" на всички стейджнати файлове в този конкретен момент - - Съобщението за commit "first commit" обяснява за какво става въпрос в тази точка на запазване - - Git даде на тази моментна снимка уникален идентификатор, за да можеш винаги да я намериш по-късно - - Официално започна да следиш историята на проекта си! + - Git направи „снимка“ на всички подготвени файлове в този точен момент + - Съобщението към commit „first commit“ обяснява какво представлява тази точка на запазване + - Git даде на тази снимка уникално ID, така че винаги да можеш да я намериш по-късно + - Официално започнаш да следиш историята на проекта си! + + > 💡 **Бъдещи съобщения към commit**: Следващите пъти бъди по-описателен! Вместо „updated stuff“, опитай „Добави форма за контакти на началната страница“ или „Поправи бъг в менюто за навигация“. Твоето бъдещо аз ще ти благодари! + +7. **Свържи своя локален проект с GitHub**. В момента проектът ти съществува само на твоя компютър. Нека го свържем с твоя GitHub репозиторий, за да можеш да го споделяш със света! - > 💡 **Бъдещи съобщения за commit**: За следващите си commits бъди по-описателен! Вместо "обновени не - - Създадохме връзка между вашия локален проект и вашето GitHub хранилище. - - "Origin" е просто прякор за вашето GitHub хранилище – като да добавите контакт в телефона си. - - Сега вашият локален Git знае къде да изпраща вашия код, когато сте готови да го споделите. + Първо отиди на страницата на твоя GitHub репозитория и копирай URL адреса. След това се върни тук и напиши: - 💡 **По-лесен начин**: Ако имате инсталиран GitHub CLI, можете да направите това с една команда: + ```bash + git remote add origin https://github.com/username/repository_name.git + ``` + + (Замени този URL с истинския URL на твоя репозитория!) + + **Какво току-що направихме:** + - Създадохме връзка между вашия локален проект и вашето репозитори в GitHub + - "Origin" е просто прякор за вашето GitHub репозитори – все едно добавяте контакт във вашия телефон + - Сега вашият локален Git знае къде да изпрати вашия код, когато сте готови да го споделите + + 💡 **По-лесен начин**: Ако имате инсталиран GitHub CLI, можете да го направите с една команда: ```bash gh repo create my-repo --public --push --source=. ``` @@ -246,19 +297,19 @@ git remote set-url origin git@github.com:username/repository.git git push -u origin main ``` - **🚀 Това е! Качвате кода си в GitHub!** + **🚀 Това е то! Качвате кода си в GitHub!** **Какво се случва:** - - Вашите комити пътуват от компютъра ви към GitHub. - - Флагът `-u` установява постоянна връзка, така че бъдещите изпращания да са по-лесни. - - "main" е името на вашия основен клон (като основната папка). - - След това можете просто да напишете `git push` за бъдещи качвания! + - Вашите комити пътуват от компютъра ви до GitHub + - Флагът `-u` установява постоянна връзка, за да улесни бъдещите push операции + - "main" е името на основния ви клон (като главната папка) + - След това просто можете да пишете `git push` за бъдещите качвания! - 💡 **Бърза бележка**: Ако вашият клон се нарича нещо друго (като "master"), използвайте това име. Можете да проверите с `git branch --show-current`. + 💡 **Бърза забележка**: Ако вашият клон има друго име (като "master"), използвайте това име вместо това. Можете да проверите с `git branch --show-current`. -9. **Вашият нов ежедневен ритъм на кодиране** (тук става пристрастяващо!): +9. **Вашият нов ежедневен ритъм на кодиране** (това става пристрастяващо!): - Оттук нататък, когато правите промени в проекта си, имате този прост тройен танц: + От сега нататък, когато правите промени в проекта си, имате този прост тристъпков танц: ```bash git add . @@ -266,308 +317,461 @@ git remote set-url origin git@github.com:username/repository.git git push ``` - **Това става вашият ритъм на кодиране:** - - Направете страхотни промени в кода си ✨ - - Подгответе ги с `git add` ("Хей Git, обърни внимание на тези промени!") - - Запазете ги с `git commit` и описателно съобщение (бъдещото ви аз ще ви благодари!) - - Споделете ги със света, използвайки `git push` 🚀 - - Повторете – сериозно, това става толкова естествено, колкото дишането! - - Обичам този работен процес, защото е като да имате множество точки за запазване в видео игра. Направихте промяна, която обичате? Комитнете я! Искате да опитате нещо рисковано? Няма проблем – винаги можете да се върнете към последния си комит, ако нещо се обърка! - - > 💡 **Съвет**: Може също да искате да използвате файл `.gitignore`, за да предотвратите появата на файлове, които не искате да следите, в GitHub – като например файл с бележки, който съхранявате в същата папка, но няма място в публично хранилище. Можете да намерите шаблони за файлове `.gitignore` на [.gitignore templates](https://github.com/github/gitignore) или да създадете такъв, използвайки [gitignore.io](https://www.toptal.com/developers/gitignore). + **Това става вашето кодиращо сърцебиене:** + - Направете някои страхотни промени в кода си ✨ + - Подгответе ги с `git add` ("Хей, Git, обърни внимание на тези промени!") + - Запазете ги с `git commit` и описателно съобщение (бъдещото вие ще ви е благодарно!) + - Споделете ги с света чрез `git push` 🚀 + - Изпълнявайте отново и отново – сериозно, това става толкова естествено, колкото дишането! + + Харесвам този работен поток, защото е като да имаш множество точки на запис в една видео игра. Направихте промяна, която харесвате? Комитирайте я! Искате да пробвате нещо рисковано? Няма проблем – винаги можете да се върнете към последния си комит, ако нещо се обърка! + + > 💡 **Съвет**: Може би искате да използвате `.gitignore`, за да предотвратите появата на файлове, които не искате да следите в GitHub - като онзи файл с бележки, който държите в същата папка, но няма място в публично репозитори. Можете да намерите шаблони за `.gitignore` файлове на [.gitignore templates](https://github.com/github/gitignore) или да създадете такъв чрез [gitignore.io](https://www.toptal.com/developers/gitignore). + +### 🧠 **Първо качване в репозитори: Как се почувства това?** + +**Отделете време да отпразнувате и да си помислите:** +- Как се почувствахте, когато видяхте кода си за първи път в GitHub? +- Коя стъпка беше най-объркваща, а коя изненадващо лесна? +- Можете ли да обясните разликата между `git add`, `git commit` и `git push` с ваши думи? + +```mermaid +stateDiagram-v2 + [*] --> LocalFiles: Създай проект + LocalFiles --> Staged: git add . + Staged --> Committed: git commit + Committed --> GitHub: git push + GitHub --> [*]: Успех! 🎉 + + note right of Staged + Файлове готови за запис + end note + + note right of Committed + Създаден моментен образ + end note +``` +> **Запомнете**: Дори опитни разработчици понякога забравят точните команди. За да стане този работен поток навик, трябва практика – справяте се чудесно! -#### Съвременни работни процеси с Git +#### Модерни Git работни процеси -Помислете за приемане на тези съвременни практики: +Обмислете възприемането на следните модерни практики: -- **Конвенционални комити**: Използвайте стандартизиран формат за съобщения на комити като `feat:`, `fix:`, `docs:` и др. Научете повече на [conventionalcommits.org](https://www.conventionalcommits.org/) -- **Атомарни комити**: Нека всеки комит представлява една логическа промяна. -- **Чести комити**: Комитвайте често с описателни съобщения, вместо големи, редки комити. +- **Conventional Commits**: Използвайте стандартизиран формат за съобщения на комит като `feat:`, `fix:`, `docs:`, и т.н. Научете повече на [conventionalcommits.org](https://www.conventionalcommits.org/) +- **Атомарни комити**: Правете всеки комит да представлява една логична промяна +- **Чести комити**: Комитирайте често с описателни съобщения, вместо с големи и редки -#### Съобщения за комити +#### Съобщения на комити -Добро заглавие на съобщение за Git комит завършва следното изречение: -Ако бъде приложен, този комит ще <вашето заглавие тук> +Страхотен Git комит субект завършва следното изречение: +Ако бъде приложен, този комит ще <вашия субект тук> -За заглавието използвайте повелително наклонение, сегашно време: "промени", а не "променен" или "промени". -Както в заглавието, така и в тялото (по избор) използвайте повелително наклонение, сегашно време. Тялото трябва да включва мотивацията за промяната и да я сравни с предишното поведение. Обяснявате `защо`, а не `как`. +За субекта използвайте императивно, сегашно време: "prouveshtavam", а не "prouchi" или "prouchva". +Както при субекта, в тялото (по желание) също използвайте императивно, сегашно време. Тялото трябва да включва мотивацията за промяната и да я сравнява с предишното поведение. Обяснявате „защо“, а не „как“. -✅ Отделете няколко минути, за да разгледате GitHub. Можете ли да намерите наистина страхотно съобщение за комит? Можете ли да намерите наистина минимално? Каква информация смятате, че е най-важна и полезна за предаване в съобщение за комит? +✅ Отделете няколко минути да разгледате GitHub. Можете ли да намерите наистина добро съобщение за комит? Можете ли да намерите много кратко? Коя информация смятате за най-важна и полезна да бъде предадена в съобщение на комит? -## Работа с други (забавната част!) +## Работа с Други (Забавната Част!) -Дръжте се здраво, защото ТОВА е мястото, където GitHub става абсолютно магически! 🪄 Вече сте усвоили управлението на собствения си код, но сега се потапяме в моята абсолютна любима част – сътрудничеството с невероятни хора от цял свят. +Дръжте си шапката, защото ТОВА е моментът, в който GitHub става абсолютно магичен! 🪄 Вие овладяхте управлението на собствения си код, но сега навлизаме в моята абсолютна любима част – сътрудничество с невероятни хора от цял свят. -Представете си това: събуждате се утре и виждате, че някой в Токио е подобрил вашия код, докато сте спали. След това някой в Берлин поправя бъг, който ви е затруднявал. До следобед разработчик в Сао Пауло е добавил функция, за която дори не сте се сетили. Това не е научна фантастика – това е просто обикновен вторник в GitHub вселената! +Представете си следното: събуждате се утре и виждате, че някой в Токио е подобрил вашия код, докато сте спали. После някой в Берлин оправя бъг, с който сте заседнали. Следобед разработчик в Сао Пауло добавя функция, за която никога не сте мислили. Това не е научна фантастика – това е просто вторник в GitHub вселената! -Това, което наистина ме вълнува, е, че уменията за сътрудничество, които ще научите? Това са ТОЧНО същите работни процеси, които екипите в Google, Microsoft и любимите ви стартиращи компании използват всеки ден. Не просто учите готин инструмент – учите тайния език, който кара целия софтуерен свят да работи заедно. +Това, което ме вълнува истински, е че уменията за сътрудничество, които ще научите, са ТОЧНО същите работни процеси, които екипите в Google, Microsoft и любимите ви стартъпи използват всеки ден. Не просто учите готин инструмент – учите тайния език, който кара целия софтуерен свят да работи заедно. -Сериозно, след като изпитате тръпката от това някой да обедини първото ви pull request, ще разберете защо разработчиците са толкова страстни към отворения код. Това е като да сте част от най-големия, най-креативен екипен проект в света! +Сериозно, щом усетите тръпката от първия си merged pull request, ще разберете защо разработчиците се вълнуват толкова от отворения код. Това е като да си част от най-големия и най-креативен екипен проект в света! > Вижте видеото > -> [![Основи на Git и GitHub видео](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8) +> [![Git и GitHub основи видео](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8) + +Основната причина да се качва на GitHub е, за да е възможно сътрудничеството с други разработчици. + +```mermaid +flowchart LR + A[🔍 Намери проект] --> B[🍴 Създай форк на хранилище] + B --> C[📥 Клонирай локално] + C --> D[🌿 Създай клон] + D --> E[✏️ Направи промени] + E --> F[💾 Запиши промени (commit)] + F --> G[📤 Изпрати клон] + G --> H[🔄 Създай pull request] + H --> I{Преглед от поддържащ} + I -->|✅ Одобрено| J[🎉 Сливи!] + I -->|❓ Поискано е изменение| K[📝 Направи актуализации] + K --> F + J --> L[🧹 Почисти клонове] + + style A fill:#e3f2fd + style J fill:#e8f5e8 + style L fill:#fff3e0 +``` +Във вашето репозитори отидете на `Insights > Community`, за да видите как проектът ви се сравнява с препоръчаните стандарти на общността. -Основната причина да качвате неща в GitHub е да направите възможно сътрудничеството с други разработчици. +Искате вашето репозитори да изглежда професионално и приветливо? Отидете в репозитори и кликнете върху `Insights > Community`. Тази готина функция ви показва как вашият проект се съотнася към това, което GitHub общността счита за "добри практики за репозитори". -Във вашето хранилище, навигирайте до `Insights > Community`, за да видите как вашият проект се сравнява с препоръчаните стандарти на общността. +> 🎯 **Да направим вашия проект да блести**: Добре организирано репозитори с добра документация е като чист и приветлив магазин на улицата. То казва на хората, че ви е грижа за работата ви и кара другите да искат да допринасят! -Искате ли вашето хранилище да изглежда професионално и приветливо? Отидете до вашето хранилище и кликнете върху `Insights > Community`. Тази страхотна функция ви показва как вашият проект се сравнява с това, което GitHub общността счита за "добри практики за хранилище". +**Ето какво прави едно репозитори страхотно:** -> 🎯 **Направете проекта си да блести**: Добре организирано хранилище с добра документация е като чист, приветлив магазин. То показва, че се грижите за работата си и кара другите да искат да допринесат! +| Какво да добавите | Защо е важно | Какво ви дава | +|-------------------|--------------|---------------| +| **Описание** | Първото впечатление е важно! | Хората веднага знаят за какво е проектът ви | +| **README** | Началната страница на проекта | Като приятелски гид за новите посетители | +| **Правила за принос** | Показва, че приветствате помощ | Хората знаят точно как могат да помогнат | +| **Кодекс на поведение** | Създава приятелско пространство | Всеки се чувства добре дошъл да участва | +| **Лиценз** | Правна яснота | Другите знаят как могат да използват кода ви | +| **Политика за сигурност** | Показва отговорност | Демонстрира професионални практики | -**Ето какво прави едно хранилище страхотно:** +> 💡 **Професионален съвет**: GitHub предлага шаблони за всички тези файлове. Когато създавате ново репозитори, маркирайте кутийките за автоматично генериране на тези файлове. -| Какво да добавите | Защо е важно | Какво прави за вас | -|-------------------|--------------|--------------------| -| **Описание** | Първото впечатление е важно! | Хората веднага разбират какво прави вашият проект | -| **README** | Началната страница на вашия проект | Като приятелски гид за новите посетители | -| **Насоки за принос** | Показва, че приветствате помощ | Хората знаят точно как могат да ви помогнат | -| **Кодекс на поведение** | Създава приятелска среда | Всеки се чувства добре дошъл да участва | -| **Лиценз** | Юридическа яснота | Другите знаят как могат да използват вашия код | -| **Политика за сигурност** | Показва, че сте отговорни | Демонстрира професионални практики | +**Модерни GitHub Функции за Разглеждане:** -> 💡 **Професионален съвет**: GitHub предоставя шаблони за всички тези файлове. Когато създавате ново хранилище, проверете кутиите, за да генерирате автоматично тези файлове. +🤖 **Автоматизация и CI/CD:** +- **GitHub Actions** за автоматично тестване и внедряване +- **Dependabot** за автоматични обновления на зависимости -**Съвременни функции на GitHub за изследване:** +💬 **Община и управление на проекти:** +- **GitHub Discussions** за разговори в общността извън проблемите +- **GitHub Projects** за управление на проекти в стил канбан +- **Правила за защита на клонове** за налагане на стандарти за качество на кода -🤖 **Автоматизация и CI/CD:** -- **GitHub Actions** за автоматизирано тестване и внедряване. -- **Dependabot** за автоматични актуализации на зависимости. -💬 **Общност и управление на проекти:** -- **GitHub Discussions** за разговори в общността извън проблемите. -- **GitHub Projects** за управление на проекти в стил канбан. -- **Правила за защита на клонове** за налагане на стандарти за качество на кода. +Всички тези ресурси ще улеснят включването на нови членове в екипа. А те често са първото нещо, което новите допринасящи разглеждат, преди изобщо да погледнат кода ви, за да преценят дали проектът ви е подходящо място за техния труд. -Всички тези ресурси ще бъдат полезни за въвеждане на нови членове на екипа. А това са обикновено нещата, които новите сътрудници разглеждат, преди дори да погледнат вашия код, за да разберат дали вашият проект е подходящото място, където да инвестират времето си. +✅ README файловете, макар че отнемат време за подготовка, често се пренебрегват от заетите поддържащи. Можете ли да намерите пример за особено описателен такъв? Забележка: има [инструменти за създаване на добри README](https://www.makeareadme.com/), които може да искате да изпробвате. -✅ README файловете, въпреки че отнемат време за подготовка, често се пренебрегват от заети поддръжници. Можете ли да намерите пример за особено описателен? Забележка: има някои [инструменти за създаване на добри README файлове](https://www.makeareadme.com/), които може да искате да опитате. +### Задача: Обединяване на код -### Задача: Обединете малко код +Документацията за принос помага на хората да се включат в проекта. Тя обяснява какви видове приноси търсите и как работи процесът. Съдействащите трябва да преминат през серия от стъпки, за да могат да допринасят във вашето репозитори в GitHub: -Документите за принос помагат на хората да допринасят за проекта. Те обясняват какви видове приноси търсите и как работи процесът. Сътрудниците ще трябва да преминат през серия от стъпки, за да могат да допринесат за вашето хранилище в GitHub: -1. **Форкване на вашето хранилище**. Вероятно ще искате хората да _форкнат_ вашия проект. Форкването означава създаване на копие на вашето хранилище в техния GitHub профил. -1. **Клониране**. Оттам те ще клонират проекта на своя локален компютър. -1. **Създаване на клон**. Ще искате да ги помолите да създадат _клон_ за своята работа. -1. **Фокусиране на промяната върху една област**. Помолете сътрудниците да се концентрират върху една промяна наведнъж – така шансовете да можете да _обедините_ тяхната работа са по-големи. Представете си, че те пишат поправка на бъг, добавят нова функция и актуализират няколко теста – какво ако искате или можете да приложите само 2 от 3, или 1 от 3 промени? +1. **Форкване на вашето репозитори** Вие вероятно искате хората да _форкват_ проекта ви. Форкването означава създаване на копие на вашето репозитори в техния GitHub профил. +1. **Клониране**. След това те клонират проекта на своя локален компютър. +1. **Създаване на клон**. Можете да ги помолите да създадат _клон_ за своята работа. +1. **Фокусиране на промяната върху една област**. Помолете съдействащите да се съсредоточат върху една промяна наведнъж – така шансът да можете да _обедините_ техния труд е по-голям. Представете си, че някой пише поправка на бъг, добавя нова функция и обновява няколко теста – какво ако искате или можете да приложите само 2 от 3 или 1 от 3 промени? -✅ Представете си ситуация, в която клоновете са особено критични за писането и доставката на добър код. Какви случаи на употреба можете да си представите? +✅ Представете си ситуация, в която клоновете са особено важни за писането и пускането на добър код. Какви случаи на употреба можете да измислите? -> Забележка: Бъдете промяната, която искате да видите в света, и създавайте клонове за собствената си работа също. Всички комити, които правите, ще бъдат направени на клона, на който сте "преминали". Използвайте `git status`, за да видите кой е този клон. +> Забележка, бъдете промяната, която искате да видите в света, и създавайте клонове и за собствената си работа. Всеки комит, който направите, ще бъде върху клона, който в момента сте „разгърнали“. Използвайте `git status`, за да видите кой е той. -Нека преминем през работния процес на сътрудник. Да предположим, че сътрудникът вече е _форкнал_ и _клонирал_ хранилището, така че има готов Git хранилище за работа на своя локален компютър: +Нека преминем през работния процес на съдействащ. Да предположим, че съдействащият вече е _форкнал_ и _клонирал_ репото, така че има Git репо готово за работа на своя локален компютър: -1. **Създаване на клон**. Използвайте командата `git branch`, за да създадете клон, който ще съдържа промените, които възнамеряват да допринесат: +1. **Създаване на клон**. Използвайте командата `git branch` за създаване на клон, който ще съдържа промените, които искат да допринесат: ```bash git branch [branch-name] ``` - > 💡 **Съвременен подход**: Можете също така да създадете и преминете към новия клон с една команда: + > 💡 **Модерен подход**: Можете също така да създадете и превключите към новия клон с една команда: ```bash git switch -c [branch-name] ``` -1. **Преминаване към работния клон**. Преминете към посочения клон и актуализирайте работната директория с `git switch`: +1. **Превключване към работен клон**. Превключете към посочения клон и обновете работната директория с `git switch`: ```bash git switch [branch-name] ``` - > 💡 **Съвременна бележка**: `git switch` е съвременният заместител на `git checkout`, когато сменяте клонове. Той е по-ясен и по-безопасен за начинаещи. + > 💡 **Модерна забележка**: `git switch` е съвременната замяна на `git checkout` при смяна на клонове. По-ясна и по-безопасна за начинаещи. -1. **Работа**. На този етап искате да добавите вашите промени. Не забравяйте да кажете на Git за тях със следните команди: +1. **Работа по промените**. На този етап искате да добавите промените си. Не забравяйте да уведомите Git с командите: ```bash git add . git commit -m "my changes" ``` - > ⚠️ **Качество на съобщението за комит**: Уверете се, че давате на вашия комит добро име, както за вас, така и за поддръжника на хранилището, на което помагате. Бъдете конкретни за това, което сте променили! + > ⚠️ **Качество на съобщението за комит**: Уверете се, че комитът ви има добро име, както за ваша полза, така и за този, който поддържа репото, в което помагате. Бъдете конкретни какво сте променили! -1. **Комбинирайте работата си с клона `main`**. В даден момент сте готови с работата си и искате да я комбинирате с тази на клона `main`. Междувременно клонът `main` може да се е променил, така че се уверете, че първо го актуализирате до последната версия със следните команди: +1. **Обединявате своята работа с клона `main`**. След като приключите с работата, искате да обедините своя труд с този на клона `main`. Междувременно `main` може да се е променил, затова първо го обновете до най-новата версия с командите: ```bash git switch main git pull ``` - На този етап искате да се уверите, че всички _конфликти_, ситуации, в които Git не може лесно да _комбинира_ промените, се случват във вашия работен клон. Затова изпълнете следните команди: + Тук искате да се уверите, че всички _конфликти_, ситуации, в които Git не може лесно да _обедини_ промените, се случват в работния ви клон. Затова изпълнете следните команди: ```bash git switch [branch_name] git merge main ``` - Командата `git merge main` ще включи всички промени от `main` във вашия клон. Надяваме се, че можете просто да продължите. Ако не, VS Code ще ви покаже къде Git е _объркан_ и просто променяте засегнатите файлове, за да кажете кое съдържание е най-точно. + Командата `git merge main` ще донесе всички промени от `main` във вашия клон. Надяваме се просто да продължите. Ако не, VS Code ще ви покаже къде Git се _обърква_ и вие просто променяте засегнатите файлове, за да кажете кое съдържание е най-точно. - 💡 **Съвременна алтернатива**: Помислете за използване на `git rebase` за по-чиста история: + 💡 **Модерна алтернатива**: Обмислете използването на `git rebase` за по-чиста история: ```bash git rebase main ``` - Това преиграва вашите комити върху последния клон main, създавайки линейна история. + Това преиграва вашите комити върху най-новия main клон, създавайки линейна история. -1. **Изпратете работата си в GitHub**. Изпращането на вашата работа в GitHub означава две неща. Качване на вашия клон в хранилището и след това отваряне на PR, Pull Request. +1. **Изпращане на вашата работа в GitHub**. Изпращането на работата означава две неща. Качване на клона ви в репото и след това създаване на PR, Pull Request. ```bash git push --set-upstream origin [branch-name] ``` - Горната команда създава клона във вашето форкнато хранилище. + Горната команда създава клона във вашето форкнато репо. + +### 🤝 **Проверка на умения за сътрудничество: Готови ли сте да работите с други?** + +**Нека видим как се чувствате относно сътрудничеството:** +- Има ли смисъл за вас сега концепцията за форк и pull requests? +- Какво бихте искали да упражнявате повече по отношение на работа с клонове? +- Колко комфортно се чувствате да допринасяте към чужд проект? + +```mermaid +mindmap + root((Сътрудничество в Git)) + Branching + Feature branches + Bug fix branches + Experimental work + Pull Requests + Преглед на кода + Обсъждане + Тестване + Best Practices + Ясни съобщения за комити + Малки фокусирани промени + Добра документация +``` +> **Повишаване на увереността**: Всеки един разработчик, когото уважавате, някога е бил нервен за първия си pull request. GitHub общността е изключително приветлива към начинаещите! -1. **Отворете PR**. След това искате да отворите PR. Това правите, като навигирате до форкнатото хранилище в GitHub. Ще видите индикация в GitHub, където се пита дали искате да създадете нов PR, кликвате върху това и ще бъдете отведени до интерфейс, където можете да промените заглавието на съобщението за комит, да му дадете по-подходящо описание. Сега поддръжникът на хранилището, което сте форкнали, ще види този PR и _да се надяваме_ ще оцени и _обедини_ вашия PR. Вече сте сътрудник, ура :) +1. **Отваряне на PR**. След това искате да отворите PR. Прави се като отидете в форкнатото репо на GitHub. Ще видите индикация в GitHub, която пита дали искате да създадете нов PR, натискате там и ви отваря интерфейс, където можете да промените заглавието на комита, да му дадете по-подходящо описание. След това поддържащият на репото, което сте форкнали, ще види този PR и _пожелаваме му успех_ да го оцени и _слее_ с основния клон. Сега сте съдействащ, ура :) - 💡 **Съвременен съвет**: Можете също така да създавате PRs, използвайки GitHub CLI: + 💡 **Модерен съвет**: Можете също да създавате PR-та чрез GitHub CLI: ```bash gh pr create --title "Your PR title" --body "Description of changes" ``` - 🔧 **Най-добри практики за PRs**: - - Свържете с релевантни проблеми, използвайки ключови думи като "Fixes #123". - - Добавете скрийншоти за промени в потребителския интерфейс. - - Поискайте конкретни рецензенти. - - Използвайте чернови PRs за работа в процес. - - Уверете се, че всички CI проверки са преминати, преди да поискате рецензия. - -1. **Почистване**. Счита се за добра практика да _почистите_ след като успешно обедините PR. Искате да почистите както вашия локален клон, така и клона, който сте качили в GitHub. Първо го изтрийте локално със следната команда: + 🔧 **Добри практики за PR:** + - Свържете с релевантни issues с ключови думи като "Fixes #123" + - Добавете скрийншотове за промени в UI + - Искайте конкретни рецензенти + - Използвайте draft PR за работа в процес на развитие + - Уверете се, че всички CI проверки са преминали преди да поискате преглед +1. **Почистване**. Счита се за добра практика да _почистите_ след успешното сливане на PR. Искате да почистите както вашия локален клон, така и клона, който сте пуснали в GitHub. Първо нека го изтрием локално с командата: ```bash git branch -d [branch-name] ``` - Уверете се, че сте отишли на страницата на GitHub за форкнатото хранилище и премахнете отдалечения клон, който току-що сте качили. - -`Pull request` изглежда като странен термин, защото всъщност искате да качите вашите промени в проекта. -🤞Стискам палци всички проверки да минат успешно и собствениците на проекта да обединят вашите промени в проекта🤞 - -Актуализирайте текущия локален работен клон с всички нови комити от съответния отдалечен клон в GitHub: + След това се уверете, че сте отишли на страницата в GitHub за форкнатото хранилище и сте премахнали отдалечения клон, който току-що сте пуснали. -`git pull` - -## Принос към Open Source (Вашият шанс да направите промяна!) +`Pull request` изглежда като глупав термин, защото всъщност искате да "пуснете" промените си в проекта. Но поддръжникът (собственикът на проекта) или основният екип трябва да разгледат промените ви преди да ги слеят с "main" клона на проекта, така че всъщност вие искате решение за промяна от поддръжника. -Готови ли сте за нещо, което ще ви остави без думи? 🤯 Нека поговорим за приноса към open source проекти – и само мисълта за това ме кара да настръхна! +Pull request е мястото, където се сравняват и обсъждат разликите, въведени в клон с ревюта, коментари, интегрирани тестове и още. Един добър pull request следва приблизително същите правила като съобщение за commit. Можете да добавите препратка към issue в тракера за проблеми, когато вашата работа например оправя някой проблем. Това се прави като използвате `#`, последвано от номера на проблема. Например `#97`. -Това е вашият шанс да станете част от нещо наистина невероятно. Представете си, че подобрявате инструментите, които милиони разработчици използват всеки ден, или че поправяте бъг в приложение, което вашите приятели обожават. Това не е просто мечта – това е същността на приноса към open source! +🤞 Кръстосваме пръсти всички проверки да минат и собствениците на проекта да слеят промените ви в проекта 🤞 -Ето какво ме кара да настръхвам всеки път, когато мисля за това: всеки един инструмент, с който сте се учили – вашият редактор на код, фреймуърковете, които ще изследваме, дори браузърът, в който четете това – е започнал с някой точно като вас, който прави първия си принос. Този брилянтен разработчик, който е създал любимото ви разширение за VS Code? Той също е бил начинаещ, който е кликнал "create pull request" с треперещи ръце, точно както вие сте на път да направите. +Обновете текущия си локален работен клон с всички нови комити от съответния отдалечен клон в GitHub: -И ето най-красивата част: общността на open source е като най-голямата групова прегръдка в интернет. Повечето проекти активно търсят нови участници и имат задачи, маркирани като "good first issue", специално за хора като вас! Поддръжниците наистина се вълнуват, когато видят нови участници, защото си спомнят своите първи стъпки. +`git pull` -Тук не просто се учите да програмирате – вие се подготвяте да се присъедините към глобално семейство от създатели, които се събуждат всеки ден с мисълта "Как можем да направим дигиталния свят малко по-добър?" Добре дошли в клуба! 🌟 +## Допринасяне в Open Source (Възможността ви да направите впечатление!) + +Готови ли сте за нещо, което ще ви вземе ума? 🤯 Нека поговорим за допринасянето в проекти с отворен код – и аз получавам тръпки само като мисля да споделя това с вас! + +Това е вашият шанс да станете част от нещо наистина изключително. Представете си, че подобрявате инструментите, които милиони разработчици използват всеки ден, или оправяте бъг в приложение, което вашите приятели обожават. Това не е просто мечта – това е същността на приноса към отворен код! + +Това, което ме кара да се треперя всеки път, когато го мисля: всеки инструмент, с който сте учили – вашият код редактор, фреймуърците, които ще разглеждаме, дори браузърът, в който четете това – е започнал с някой като вас, който е направил първия си принос. Този изключителен разработчик, който е създал любимото ви разширение за VS Code? Някога и те са били начинаещи с треперещи ръце, кликайки "create pull request", точно както и вие сега. + +И най-хубавото: общността на отворения код е като най-голямата групова прегръдка в интернет. Повечето проекти активно търсят новаци и имат обозначения "good first issue" специално за хора като вас! Поддръжниците наистина се вълнуват, когато видят нови допринасящи, защото си спомнят първите си стъпки. + +```mermaid +flowchart TD + A[🔍 Разгледайте GitHub] --> B[🏷️ Намерете "добър първи проблем"] + B --> C[📖 Прочетете Насоки за приноси] + C --> D[🍴 Форкнете хранилището] + D --> E[💻 Настройте локална среда] + E --> F[🌿 Създайте клон за функция] + F --> G[✨ Направете вашия принос] + G --> H[🧪 Тествайте промените си] + H --> I[📝 Напишете ясен комит] + I --> J[📤 Изпратете и създайте PR] + J --> K[💬 Взаимодействайте с обратната връзка] + K --> L[🎉 Сляти! Вие сте приносител!] + L --> M[🌟 Намерете следващия проблем] + + style A fill:#e1f5fe + style L fill:#c8e6c9 + style M fill:#fff59d +``` +Тук не само се учите да кодирате – вие се подготвяте да се присъедините към глобално семейство от строители, които всеки ден се будят с мисълта "Как можем да направим дигиталния свят малко по-добър?" Добре дошли в клуба! 🌟 -Първо, нека намерим хранилище (или **repo**) в GitHub, което ви интересува и към което искате да направите промяна. Ще трябва да копирате съдържанието му на вашата машина. +Първо, нека намерим репозитория (или **repo**) в GitHub, който ви интересува и към който бихте искали да направите промяна. Ще искате да копирате съдържанието му на своя компютър. -✅ Добър начин да намерите хранилища, подходящи за начинаещи, е да [търсите по етикет 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). +✅ Един добър начин да намерите 'начинаещи-приятелски' репота е да [търсите по етикет 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Копиране на хранилище локално](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.bg.png) +![Копиране на репо локално](../../../../translated_images/clone_repo.5085c48d666ead57.bg.png) -Има няколко начина за копиране на код. Един от тях е да "клонирате" съдържанието на хранилището, използвайки HTTPS, SSH или GitHub CLI (Command Line Interface). +Има няколко начина да копирате кода. Един от тях е да "клонирате" съдържанието на репозитория, използвайки HTTPS, SSH или с помощта на GitHub CLI (Интерфейс на командния ред). -Отворете терминала си и клонирайте хранилището по следния начин: +Отворете терминала си и клонирайте репозитория по следния начин: ```bash -# Using HTTPS +# Използване на HTTPS git clone https://github.com/ProjectURL -# Using SSH (requires SSH key setup) +# Използване на SSH (изисква настройка на SSH ключ) git clone git@github.com:username/repository.git -# Using GitHub CLI +# Използване на GitHub CLI gh repo clone username/repository ``` За да работите по проекта, преминете към правилната папка: `cd ProjectURL` -Можете също да отворите целия проект, използвайки: -- **[GitHub Codespaces](https://github.com/features/codespaces)** - Облачна среда за разработка на GitHub с VS Code в браузъра +Можете също да отворите целия проект с: +- **[GitHub Codespaces](https://github.com/features/codespaces)** - облачната среда за разработка на GitHub с VS Code в браузъра - **[GitHub Desktop](https://desktop.github.com/)** - GUI приложение за Git операции -- **[GitHub.dev](https://github.dev)** - Натиснете клавиша `.` на всяко GitHub хранилище, за да отворите VS Code в браузъра -- **VS Code** с разширението за Pull Requests на GitHub +- **[GitHub.dev](https://github.dev)** - Натиснете бутона `.` върху всеки GitHub репо, за да отворите VS Code в браузъра +- **VS Code** с разширението GitHub Pull Requests -Накрая можете да изтеглите кода в компресиран файл. +Накрая, можете да изтеглите кода в архивирана папка. -### Няколко интересни неща за GitHub +### Още няколко интересни неща за GitHub -Можете да добавите звезда, да следите и/или да "fork"-нете всяко публично хранилище в GitHub. Можете да намерите вашите хранилища със звезда в падащото меню горе вдясно. Това е като да запазите отметка, но за код. +Можете да поставяте звезда, да наблюдавате и/или да "форквате" произволен публичен репозитория в GitHub. Вашите звезди можете да намерите в падащото меню горе вдясно. Това е като отметка, но за код. -Проектите имат тракер за проблеми, най-често в GitHub в раздела "Issues", освен ако не е посочено друго, където хората обсъждат проблеми, свързани с проекта. А разделът Pull Requests е мястото, където хората обсъждат и преглеждат промени, които са в процес на работа. +Проектите имат тракер за проблеми, най-често в GitHub в таба "Issues", освен ако не е посочено друго, където хората обсъждат въпроси, свързани с проекта. А разделът Pull Requests е мястото, където се обсъждат и ревюират промените в процес на работа. -Проектите може също да имат дискусии във форуми, пощенски списъци или чат канали като Slack, Discord или IRC. +Проектите може също да имат обсъждания във форуми, по пощенски списъци или в чат канали като Slack, Discord или IRC. 🔧 **Модерни функции на GitHub**: - **GitHub Discussions** - Вграден форум за разговори в общността -- **GitHub Sponsors** - Финансова подкрепа за поддръжниците -- **Security tab** - Доклади за уязвимости и съвети за сигурност -- **Actions tab** - Вижте автоматизирани работни процеси и CI/CD пайплайни -- **Insights tab** - Анализи за участници, комити и здравето на проекта +- **GitHub Sponsors** - Финансова подкрепа на поддръжниците +- **Security tab** - Доклади за уязвимости и съвети за сигурността +- **Actions tab** - Вижте автоматизираните работни процеси и CI/CD пайплайни +- **Insights tab** - Анализи за допринасящите, комитите и здравето на проекта - **Projects tab** - Вградени инструменти за управление на проекти в GitHub -✅ Разгледайте новото си хранилище в GitHub и опитайте няколко неща, като редактиране на настройки, добавяне на информация към хранилището, създаване на проект (като Kanban дъска) и настройка на GitHub Actions за автоматизация. Има много неща, които можете да направите! +✅ Разгледайте новото си GitHub репо и пробвайте няколко неща, като редактиране на настройки, добавяне на информация, създаване на проект (като Kanban табло) и настройване на GitHub Actions за автоматизация. Много неща можете да направите! --- -## 🚀 Предизвикателство +## 🚀 Предизвикателство -Добре, време е да тествате новите си суперсили в GitHub! 🚀 Ето едно предизвикателство, което ще направи всичко да щракне по най-удовлетворяващия начин: +Добре, време е да изпитате новите си суперсили в GitHub! 🚀 Ето едно предизвикателство, което ще направи всичко да си дойде на мястото по най-приятния начин: -Вземете приятел (или този член на семейството, който винаги пита какво правите с всичките тези "компютърни неща") и се впуснете заедно в приключение за съвместно програмиране! Тук се случва истинската магия – създайте проект, оставете ги да го fork-нат, направете няколко клона и обединете промените като професионалистите, които ставате. +Вземете приятел (или някой от семейството, който постоянно пита с какво се занимавате с цялата тази "компютърна работа") и започнете съвместно приключение в кодирането! Тук се случва истинската магия – създайте проект, нека го форкне, създайте няколко клона и слейте промените като истински професионалисти, които вече сте. -Няма да лъжа – вероятно ще се смеете в даден момент (особено когато и двамата се опитате да промените една и съща линия), може би ще се почешете по главата в недоумение, но със сигурност ще имате тези невероятни моменти "аха!", които правят цялото учене да си струва. Освен това има нещо специално в това да споделите първото успешно обединение с някой друг – това е като малко празненство за напредъка, който сте постигнали! +Няма да крия – вероятно ще се посмеете (особено когато се опитате и двамата да промените един и същи ред), може да се почешете по главата в объркване, но ще имате онези страхотни "аха!" моменти, които правят всичко учене заслужаващо си. Освен това има нещо специално в това да споделите първото успешно сливане с някого – това е като малко празненство за свършената работа! -Все още нямате партньор за програмиране? Няма проблем! Общността на GitHub е пълна с невероятно приветливи хора, които си спомнят какво е да си новак. Потърсете хранилища с етикет "good first issue" – те основно казват "Хей, начинаещи, елате да учите с нас!" Колко страхотно е това? +Все още нямате партньор за кодиране? Без притеснения! Общността на GitHub е пълна с изключително приветливи хора, които помнят как е било да си нов. Потърсете репозитории с етикет "good first issue" – те казват "Хей, начинаещи, елате да учите с нас!" Колко страхотно е това? -## Тест след лекцията -[Тест след лекцията](https://ff-quizzes.netlify.app/web/en/) +## Куиз след лекцията +[Post-lecture quiz](https://ff-quizzes.netlify.app/web/en/) ## Преглед и продължавайте да учите -Уау! 🎉 Вижте се – току-що овладяхте основите на GitHub като абсолютен шампион! Ако мозъкът ви се чувства малко претоварен в момента, това е напълно нормално и честно казано добър знак. Току-що научихте инструменти, за които ми отне седмици, за да се почувствам комфортно с тях, когато започнах. +Уф! 🎉 Вижте ви – току-що покрихте основите на GitHub като абсолютен шампион! Ако мозъкът ви в момента е леко претоварен, това е напълно нормално и всъщност е добър знак. Току-що сте се научили на инструменти, за които мен ми отне седмици да се чувствам комфортно, когато започнах. -Git и GitHub са невероятно мощни (наистина мощни), и всеки разработчик, когото познавам – включително тези, които сега изглеждат като магьосници – трябваше да практикува и да се лута малко, преди всичко да се изясни. Фактът, че сте преминали през този урок, означава, че вече сте на път да овладеете някои от най-важните инструменти в арсенала на разработчика. +Git и GitHub са изключително мощни (наистина мощни), и всеки разработчик, когото познавам – включително тези, които сега изглеждат като вълшебници – е трябвало да тренира и да се спъва малко преди всичко да се нареди. Фактът, че стигнахте до края на този урок, означава, че вече сте по пътя към овладяване на някои от най-важните инструменти в инструментариума на разработчика. -Ето някои наистина фантастични ресурси, които ще ви помогнат да практикувате и да станете още по-добри: +Ето някои абсолютно фантастични ресурси, които да ви помогнат да упражнявате и да станете още по-яки: -- [Ръководство за принос към софтуер с отворен код](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – Вашата карта за правене на разлика -- [Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/) – Дръжте го под ръка за бърза справка! +- [Ръководство за допринасяне към софтуер с отворен код](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – Вашата карта за постигане на влияние +- [Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/) – Дръжте го под ръка за бързи справки! -И помнете: практиката води до напредък, а не до съвършенство! Колкото повече използвате Git и GitHub, толкова по-естествено ще става. GitHub е създал някои невероятни интерактивни курсове, които ви позволяват да практикувате в безопасна среда: +И помнете: практиката води до прогрес, не до съвършенство! Колкото повече използвате Git и GitHub, толкова по-естествено ще ви се струва. GitHub е създал страхотни интерактивни курсове, които ви позволяват да практикувате в сигурна среда: - [Въведение в GitHub](https://github.com/skills/introduction-to-github) - [Комуникация с Markdown](https://github.com/skills/communicate-using-markdown) - [GitHub Pages](https://github.com/skills/github-pages) -- [Управление на конфликти при обединение](https://github.com/skills/resolve-merge-conflicts) +- [Управление на конфликти при сливане](https://github.com/skills/resolve-merge-conflicts) -**Чувствате се авантюристично? Разгледайте тези модерни инструменти:** +**Чувствате се приключенски настроени? Вижте тези модерни инструменти:** - [Документация за GitHub CLI](https://cli.github.com/manual/) – За когато искате да се почувствате като магьосник на командния ред -- [Документация за GitHub Codespaces](https://docs.github.com/en/codespaces) – Програмирайте в облака! +- [Документация за GitHub Codespaces](https://docs.github.com/en/codespaces) – Кодирайте в облака! - [Документация за GitHub Actions](https://docs.github.com/en/actions) – Автоматизирайте всичко -- [Най-добри практики за Git](https://www.atlassian.com/git/tutorials/comparing-workflows) – Подобрете работния си процес +- [Най-добри практики за Git](https://www.atlassian.com/git/tutorials/comparing-workflows) – Подобрете работния си процес ## Предизвикателство с GitHub Copilot Agent 🚀 -Използвайте режима Agent, за да завършите следното предизвикателство: +Използвайте Agent режима, за да изпълните следното предизвикателство: -**Описание:** Създайте съвместен проект за уеб разработка, който демонстрира пълния GitHub работен процес, който сте научили в този урок. Това предизвикателство ще ви помогне да практикувате създаването на хранилище, функциите за сътрудничество и модерните Git работни процеси в реална ситуация. +**Описание:** Създайте съвместен уеб разработващ проект, който демонстрира пълния GitHub работен процес, който сте научили в този урок. Това предизвикателство ще ви помогне да упражните създаването на репозитории, колаборационните функции и модерните Git работни потоци в реален сценарий. -**Задача:** Създайте ново публично хранилище в GitHub за прост проект "Ресурси за уеб разработка". Хранилището трябва да включва добре структурирана README.md файл, който изброява полезни инструменти и ресурси за уеб разработка, организирани по категории (HTML, CSS, JavaScript и др.). Настройте хранилището с подходящи стандарти за общността, включително лиценз, насоки за принос и кодекс за поведение. Създайте поне два клона за функции: един за добавяне на ресурси за CSS и друг за ресурси за JavaScript. Направете комити към всеки клон с описателни съобщения за комитите, след това създайте pull requests, за да обедините промените обратно в основния клон. Активирайте функции на GitHub като Issues, Discussions и настройте основен GitHub Actions работен процес за автоматизирани проверки. +**Задание:** Създайте нов публичен GitHub репозитория за прост проект "Ресурси за уеб разработка". Репозиторията трябва да включва добре структурирано README.md файл, изброяващ полезни уеб разработващи инструменти и ресурси, организирани по категории (HTML, CSS, JavaScript и др.). Настройте репозитория с подходящи стандарти на общността, включително лиценз, правила за допринасяне и кодекс за поведение. Създайте поне два клона за функции: един за добавяне на CSS ресурси и друг за JavaScript ресурси. Направете комити във всеки клон с описателни съобщения и после създайте pull request-и за сливане на промените обратно в main. Активирайте функции на GitHub като Issues, Discussions и настройте основен GitHub Actions workflow за автоматизирани проверки. -## Задача +## Задача -Вашата мисия, ако решите да я приемете: Завършете курса [Въведение в GitHub](https://github.com/skills/introduction-to-github) на GitHub Skills. Този интерактивен курс ще ви позволи да практикувате всичко, което сте научили, в безопасна, ръководена среда. Освен това ще получите страхотен значка, когато го завършите! 🏅 +Вашата мисия, ако решите да я приемете: Завършете курса [Introduction to GitHub](https://github.com/skills/introduction-to-github) в GitHub Skills. Този интерактивен курс ще ви позволи да практикувате всичко, което сте научили, в безопасна и насочена среда. Освен това ще получите страхотен значок, когато го завършите! 🏅 -**Чувствате се готови за още предизвикателства?** -- Настройте SSH автентикация за вашия GitHub акаунт (без повече пароли!) -- Опитайте да използвате GitHub CLI за ежедневните си Git операции -- Създайте хранилище с GitHub Actions работен процес -- Изследвайте GitHub Codespaces, като отворите това хранилище в облачен редактор +**Чувствате ли се готови за още предизвикателства?** +- Настройте SSH автентикация за GitHub акаунта си (без пароли!) +- Опитайте GitHub CLI за ежедневните си Git операции +- Създайте репозитория с GitHub Actions workflow +- Разгледайте GitHub Codespaces, като отворите този репо в облачна среда за редактиране + +--- + +## 🚀 Вашата времева линия за овладяване на GitHub + +### ⚡ **Какво може да направите през следващите 5 минути** +- [ ] Поставете звезда на този репозитория и още 3 проекта, които ви интересуват +- [ ] Настройте двуфакторна автентикация на GitHub акаунта си +- [ ] Създайте прост README за първия си репозитория +- [ ] Последвайте 5 разработчици, чиято работа ви вдъхновява + +### 🎯 **Какво може да постигнете през този час** +- [ ] Завършете теста след урока и размишлявайте върху GitHub пътешествието си +- [ ] Настройте SSH ключове за безпаролна GitHub автентикация +- [ ] Направете първия си значим комит с отлично съобщение +- [ ] Разгледайте таба "Explore" в GitHub, за да откриете популярни проекти +- [ ] Упражнявайте се да форквате репозитория и да правите малки промени + +### 📅 **Вашето седмично GitHub приключение** +- [ ] Завършете курсовете на GitHub Skills (Въведение в GitHub, Markdown) +- [ ] Направете първия си pull request към проект с отворен код +- [ ] Настройте GitHub Pages сайт, за да покажете вашата работа +- [ ] Включете се в GitHub Discussions за проекти, които ви вълнуват +- [ ] Създайте репозитория с подходящи стандарти на общността (README, Лиценз и др.) +- [ ] Опитайте GitHub Codespaces за разработка в облака + +### 🌟 **Вашата месечна трансформация** +- [ ] Допринасяйте към 3 различни проекта с отворен код +- [ ] Наставлявайте някого нов в GitHub (предавайте нататък!) +- [ ] Настройте автоматизирани работни потоци с GitHub Actions +- [ ] Създайте портфолио, показващо вашите GitHub приноси +- [ ] Участвайте в Hacktoberfest или подобни събития на общността +- [ ] Станете поддръжник на собствен проект, към който другите допринасят + +### 🎓 **Финална проверка на овладяването на GitHub** + +**Празнувайте постиженията си:** +- Кое е любимото ви нещо при използването на GitHub? +- Коя колаборационна функция ви вълнува най-много? +- Колко уверени се чувствате за допринасяне към отворен код сега? +- Към кой проект първи искате да допринесете? + +```mermaid +journey + title Вашето пътуване към увереност в GitHub + section Днес + Nervous: 3: You + Curious: 4: You + Excited: 5: You + section Тази седмица + Practicing: 4: You + Contributing: 5: You + Connecting: 5: You + section Следващия месец + Collaborating: 5: You + Leading: 5: You + Inspiring Others: 5: You +``` +> 🌍 **Добре дошли в глобалната общност на разработчиците!** Вече имате инструментите да си сътрудничите с милиони разработчици по целия свят. Първият ви принос може да изглежда малък, но помнете - всеки голям проект с отворен код е започнал с някой, направил първия си commit. Въпросът не е дали ще направите впечатление, а кой изключителен проект първо ще се възползва от уникалната ви гледна точка! 🚀 -Помнете: всеки експерт някога е бил начинаещ. Ще се справите! 💪 +Помнете: всеки експерт някога е бил начинаещ. Вие можете! 💪 --- -**Отказ от отговорност**: -Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод. \ No newline at end of file + +**Отказ от отговорност**: +Този документ е преведен с помощта на AI преводаческа услуга [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, имайте предвид, че автоматизираните преводи могат да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да е недоразумения или погрешни тълкувания, произтичащи от използването на този превод. + \ No newline at end of file diff --git a/translations/bg/1-getting-started-lessons/3-accessibility/README.md b/translations/bg/1-getting-started-lessons/3-accessibility/README.md index 96296e1de..3b9884f56 100644 --- a/translations/bg/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/bg/1-getting-started-lessons/3-accessibility/README.md @@ -1,189 +1,326 @@ -# Създаване на достъпни уеб страници +# Създаване на достъпни уебстраници -![Всичко за достъпността](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.bg.png) -> Скица от [Tomomi Imura](https://twitter.com/girlie_mac) +![Всичко за достъпността](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.bg.png) +> Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac) -## Тест преди лекцията -[Тест преди лекцията](https://ff-quizzes.netlify.app/web/) +```mermaid +journey + title Вашето приключение в ученето за достъпност + section Основи + Разбиране на потребителите: 5: You + Тестови инструменти: 4: You + Принципи на POUR: 5: You + section Изграждане на умения + Семантичен HTML: 4: You + Визуален дизайн: 5: You + ARIA техники: 4: You + section Умение във практика + Навигация с клавиатура: 5: You + Достъпност на формуляри: 4: You + Тестове в реалния свят: 5: You +``` +## Въпросник преди урока +[Въпросник преди урока](https://ff-quizzes.netlify.app/web/) -> Силата на интернет е в неговата универсалност. Достъпът за всеки, независимо от уврежданията, е съществен аспект. +> Силата на уеб е в неговата универсалност. Достъпът за всички, независимо от увреждане, е съществен аспект. > -> \- Сър Тимъти Бърнърс-Лий, директор на W3C и изобретател на Световната мрежа +> \- сър Тимъти Бърнърс-Лий, директор на W3C и изобретател на Световния широк интернет -Ето нещо, което може да ви изненада: когато създавате достъпни уебсайтове, не само помагате на хората с увреждания – всъщност правите интернет по-добър за всички! +Ето нещо, което може да ви изненада: когато създавате достъпни уебсайтове, вие не просто помагате на хора с увреждания — вие всъщност правите уеб по-добър за всички! -Забелязвали ли сте онези наклонени рампи на уличните ъгли? Първоначално те са били проектирани за инвалидни колички, но сега помагат на хора с детски колички, доставчици с колички, пътници с куфари на колелца и велосипедисти. Точно така работи достъпният уеб дизайн – решенията, които помагат на една група, често се оказват полезни за всички. Доста впечатляващо, нали? +Забелязвали ли сте онези наклони на тротоарите на ъгловете? Първоначално са проектирани за инвалидни колички, но сега помагат на хора с детски колички, доставчици с колички, пътници с ролков багаж и колоездачи. Точно така работи достъпният уеб дизайн — решения, които помагат на една група, често в крайна сметка ползват всички. Доста готино, нали? -В този урок ще разгледаме как да създаваме уебсайтове, които наистина работят за всички, независимо как използват интернет. Ще откриете практични техники, които вече са вградени в уеб стандартите, ще се запознаете с инструменти за тестване и ще видите как достъпността прави вашите сайтове по-удобни за всички потребители. +В този урок ще разгледаме как да създадем уебсайтове, които наистина работят за всички, без значение как сърфират в мрежата. Ще откриете практични техники, които вече са вградени в уеб стандартите, ще усвоите работа с тестови инструменти и ще видите как достъпността прави сайтовете ви по-лесни за използване за всички потребители. -До края на този урок ще имате увереността да направите достъпността естествена част от вашия работен процес на разработка. Готови ли сте да изследвате как внимателните дизайнерски решения могат да отворят интернет за милиарди потребители? Да започваме! +Към края на урока ще имате увереност да направите достъпността естествена част от работния си процес на разработка. Готови ли сте да разгледаме как внимателните дизайнерски решения могат да отворят уеб за милиарди потребители? Да започваме! -> Можете да вземете този урок на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)! +```mermaid +mindmap + root((Уеб достъпност)) + Users + Четци на екран + Навигация с клавиатура + Гласово управление + Увеличение + Technologies + HTML семантика + ARIA атрибути + CSS индикатори за фокус + Събития с клавиатура + Benefits + По-широка аудитория + По-добро SEO + Съответствие със закона + Универсален дизайн + Testing + Автоматизирани инструменти + Ръчно тестване + Обратна връзка от потребители + Реални помощни технологии +``` +> Можете да преминете този урок в [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)! ## Разбиране на помощните технологии -Преди да започнем с програмирането, нека отделим момент, за да разберем как хората с различни способности всъщност използват интернет. Това не е просто теория – разбирането на тези реални модели на навигация ще ви направи много по-добър разработчик! +Преди да започнем с кодирането, нека отделим миг да разберем как хора с различни способности всъщност преживяват уеб. Това не е само теория — разбирането на тези реални навигационни модели ще ви направи много по-добър разработчик! -Помощните технологии са невероятни инструменти, които помагат на хората с увреждания да взаимодействат с уебсайтове по начини, които може да ви изненадат. След като разберете как работят тези технологии, създаването на достъпни уеб изживявания става много по-интуитивно. Това е като да се научите да виждате кода си през очите на някой друг. +Помощните технологии са наистина впечатляващи инструменти, които помагат на хора с увреждания да взаимодействат с уебсайтове по начини, които може да ви изненадат. След като схванете как работят тези технологии, създаването на достъпни уеб преживявания става много по-интуитивно. Това е като да се научите да виждате кода си през очите на друг човек. -### Екранни четци +### Четещи екрани -[Екранните четци](https://en.wikipedia.org/wiki/Screen_reader) са доста сложни технологии, които преобразуват цифров текст в реч или брайлово изходно устройство. Въпреки че основно се използват от хора с увредено зрение, те са изключително полезни и за потребители с обучителни затруднения като дислексия. +[Четещи екрани](https://en.wikipedia.org/wiki/Screen_reader) са доста сложни технологии, които преобразуват цифровия текст в реч или брайлова изходна информация. Макар да се използват главно от хора с увреждания на зрението, те са много полезни и за потребители с обучителни затруднения като дислексия. -Обичам да мисля за екранния четец като за много умен разказвач, който ви чете книга. Той чете съдържанието на глас в логичен ред, обявява интерактивни елементи като "бутон" или "връзка" и предоставя клавишни комбинации за навигация из страницата. Но ето го важният момент – екранните четци могат да работят ефективно само ако създаваме уебсайтове с правилна структура и смислено съдържание. Тук идва вашата роля като разработчик! +Обичам да си представям четещия екран като много умен разказвач, който чете книга на глас. Той чете съдържанието на глас в логичен ред, обявява интерактивни елементи като "бутон" или "връзка" и осигурява клавишни комбинации за бързо придвижване из страницата. Но ето нещо — четещите екрани могат да работят магически само ако създаваме сайтове с правилна структура и смислено съдържание. Тук идвате вие като разработчик! -**Популярни екранни четци за различни платформи:** +**Популярни четещи екрани по платформи:** - **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (безплатен и най-популярен), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (вграден) - **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (вграден и много способен) - **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (вграден) - **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (безплатен и с отворен код) -**Как екранните четци навигират уеб съдържание:** +**Как четещите екрани навигират уеб съдържание:** -Екранните четци предоставят множество методи за навигация, които правят сърфирането ефективно за опитни потребители: -- **Последователно четене**: Чете съдържанието отгоре надолу, като следва книга -- **Навигация по маркери**: Прескачане между секции на страницата (заглавие, навигация, основно съдържание, долен колонтитул) +Четещите екрани предлагат няколко метода за навигация, които правят сърфирането ефективно за опитни потребители: +- **Последователно четене**: Чете съдържанието от горе до долу, като следване на книга +- **Навигация по ориентири**: Прескачане между секции на страница (заглавие, навигация, основна част, долен колонтитул) - **Навигация по заглавия**: Прескачане между заглавия за разбиране на структурата на страницата - **Списъци с връзки**: Генериране на списък с всички връзки за бърз достъп -- **Контроли на формуляри**: Директна навигация между полета за въвеждане и бутони +- **Управление на формуляри**: Навигация директно между полетата за въвеждане и бутоните -> 💡 **Ето нещо, което ме изуми**: 68% от потребителите на екранни четци навигират основно чрез заглавия ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding)). Това означава, че структурата на вашите заглавия е като карта за потребителите – когато я направите правилно, буквално помагате на хората да се ориентират по-бързо в съдържанието ви! +> 💡 **Ето нещо, което ме удиви**: 68% от потребителите на четещи екрани навигират предимно чрез заглавията ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding)). Това означава, че структурата на заглавията ви е като пътна карта за потребителите — когато е направена правилно, вие буквално им помагате да се ориентират по-бързо във вашето съдържание! -### Изграждане на вашия работен процес за тестване +### Създаване на вашия тестови работен процес -Ето добри новини – ефективното тестване за достъпност не трябва да бъде прекалено сложно! Ще искате да комбинирате автоматизирани инструменти (те са фантастични за откриване на очевидни проблеми) с малко ръчно тестване. Ето систематичен подход, който според мен улавя най-много проблеми, без да отнема целия ви ден: +Имам добра новина — ефективното тестване на достъпността не трябва да е претоварващо! Желаете да комбинирате автоматизирани инструменти (те са фантастични за откриване на очевидни проблеми) с ръчно тестване. Ето систематичен подход, който съм открил, че улавя най-много проблеми, без да ви отнема цял ден: -**Основен ръчен работен процес за тестване:** +**Основен работен процес за ръчно тестване:** ```mermaid -graph TD - A[Start Testing] --> B{Keyboard Navigation} - B --> C[Tab through all interactive elements] - C --> D{Screen Reader Testing} - D --> E[Test with NVDA/VoiceOver] - E --> F{Zoom Testing} - F --> G[Zoom to 200% and test functionality] - G --> H{Color/Contrast Check} - H --> I[Verify all text meets contrast ratios] - I --> J{Focus Management} - J --> K[Ensure focus indicators are visible] - K --> L[Testing Complete] +flowchart TD + A[🚀 Започнете тестване] --> B{⌨️ Навигация с клавиатура} + B --> C[Преминаване през всички интерактивни елементи с Tab] + C --> D{🎧 Тестване с екранен четец} + D --> E[Тествайте с NVDA/VoiceOver] + E --> F{🔍 Тестване на увеличение} + F --> G[Увеличете на 200% и тествайте функционалността] + G --> H{🎨 Проверка на цвят/контраст} + H --> I[Проверете дали целият текст отговаря на съотношенията на контраст] + I --> J{👁️ Управление на фокуса} + J --> K[Уверете се, че индикаторите за фокус са видими] + K --> L[✅ Тестването е завършено] + + style A fill:#e3f2fd + style L fill:#e8f5e8 + style B fill:#fff3e0 + style D fill:#f3e5f5 + style F fill:#e0f2f1 + style H fill:#fce4ec + style J fill:#e8eaf6 ``` - -**Контролен списък за тестване стъпка по стъпка:** +**Стъпка по стъпка контролен списък за тестове:** 1. **Навигация с клавиатура**: Използвайте само Tab, Shift+Tab, Enter, Space и стрелките -2. **Тестване с екранен четец**: Активирайте NVDA, VoiceOver или Narrator и навигирайте със затворени очи -3. **Тестване на увеличение**: Тествайте при нива на увеличение от 200% и 400% -4. **Проверка на контраста на цветовете**: Проверете целия текст и компонентите на потребителския интерфейс -5. **Тестване на индикатор за фокус**: Уверете се, че всички интерактивни елементи имат видими състояния на фокус +2. **Тестване с четещ екран**: Включете NVDA, VoiceOver или Narrator и навигирайте с затворени очи +3. **Тестване на увеличение**: Тествайте на нива 200% и 400% +4. **Проверка на цветен контраст**: Проверете целия текст и UI компоненти +5. **Тестване на индикатор за фокус**: Уверете се, че всички интерактивни елементи имат видими фокусни състояния -✅ **Започнете с Lighthouse**: Отворете DevTools на браузъра си, стартирайте проверка за достъпност с Lighthouse и използвайте резултатите, за да насочите ръчното си тестване. +✅ **Започнете с Lighthouse**: Отворете DevTools на браузъра, стартирайте Lighthouse одит за достъпност и използвайте резултатите, за да насочите ръчното си тестване. ### Инструменти за увеличение и мащабиране -Знаете ли как понякога увеличавате текста на телефона си, когато е твърде малък, или се напрягате да четете на екрана на лаптопа си при ярка слънчева светлина? Много потребители разчитат на инструменти за мащабиране, за да направят съдържанието четимо всеки ден. Това включва хора с намалено зрение, възрастни хора и всеки, който някога е опитвал да чете уебсайт на открито. +Знаете как понякога щипете за увеличение на телефона си, когато текстът е твърде малък, или присвивате очи към екрана на лаптопа под ярка слънчева светлина? Много потребители разчитат на инструменти за мащабиране, за да направят съдържанието четливо всеки ден. Това включва хора с понижено зрение, възрастни хора и всеки, който е опитвал да чете уебсайт навън. -Съвременните технологии за мащабиране са се развили отвъд просто увеличаване на размера. Разбирането как работят тези инструменти ще ви помогне да създавате адаптивни дизайни, които остават функционални и привлекателни при всяко ниво на мащабиране. +Съвременните технологии за увеличение вече са повече от просто уголемяване. Разбирането как работят тези инструменти ще ви помогне да създавате адаптивни дизайни, които остават функционални и привлекателни при всяко ниво на мащабиране. -**Съвременни възможности за мащабиране в браузърите:** -- **Мащабиране на страницата**: Пропорционално увеличава цялото съдържание (текст, изображения, оформление) - това е предпочитаният метод -- **Само текстово мащабиране**: Увеличава размера на шрифта, като запазва оригиналното оформление -- **Увеличение чрез щипка**: Поддръжка на мобилни жестове за временно мащабиране -- **Поддръжка от браузъри**: Всички съвременни браузъри поддържат мащабиране до 500% без нарушаване на функционалността +**Възможности за увеличение на съвременните браузъри:** +- **Увеличаване на страницата**: Пропорционално мащабиране на цялото съдържание (текст, изображения, оформление) – това е предпочитаният метод +- **Увеличаване само на текста**: Увеличава размера на шрифта, като запазва оригиналното оформление +- **Пиниране за увеличение**: Поддръжка на жестове за временно мащабиране на мобилни устройства +- **Поддръжка от браузърите**: Всички съвременни браузъри поддържат увеличение до 500% без да нарушават функционалността **Специализиран софтуер за мащабиране:** - **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (вграден), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) - **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (вграден с разширени функции) -> ⚠️ **Дизайнерско съображение**: WCAG изисква съдържанието да остане функционално при мащабиране до 200%. На това ниво хоризонталното превъртане трябва да бъде минимално, а всички интерактивни елементи трябва да останат достъпни. +> ⚠️ **Дизайнерска препоръка**: WCAG изисква съдържанието да остане функционално при мащабиране до 200%. На това ниво хоризонталното скролиране трябва да бъде минимално, а всички интерактивни елементи да останат достъпни. -✅ **Тествайте адаптивния си дизайн**: Увеличете браузъра си до 200% и 400%. Адаптира ли се вашето оформление добре? Можете ли все още да използвате всички функции без прекомерно превъртане? +✅ **Тествайте адаптивния си дизайн**: Увеличете браузъра си на 200% и 400%. Адаптира ли се оформлението плавно? Все още ли имате достъп до цялата функционалност без прекомерно скролиране? ## Съвременни инструменти за тестване на достъпност -Сега, когато разбирате как хората навигират в интернет с помощта на помощни технологии, нека разгледаме инструментите, които ви помагат да създавате и тествате достъпни уебсайтове. +Сега, след като разбирате как хората навигират в уеб с помощни технологии, нека разгледаме инструментите, които ви помагат да създавате и тествате достъпни уебсайтове. -Мислете за това така: автоматизираните инструменти са чудесни за откриване на очевидни проблеми (като липсващ alt текст), докато ръчното тестване ви помага да се уверите, че сайтът ви е удобен за използване в реалния свят. Заедно те ви дават увереност, че вашите сайтове работят за всички. +Мислете за това така: автоматизираните инструменти са отлични за намиране на очевидни проблеми (като липсващ alt текст), докато ръчното тестване ви помага да се уверите, че сайтът е удобен за използване в реалния свят. Заедно те ви дават увереност, че вашите сайтове работят за всички. -### Тестване на контраста на цветовете +### Тестване на цветен контраст -Ето добри новини: контрастът на цветовете е един от най-често срещаните проблеми с достъпността, но също така е един от най-лесните за коригиране. Добрият контраст е полезен за всички – от потребители с увредено зрение до хора, които се опитват да четат телефоните си на плажа. +Имам добра новина: цветният контраст е един от най-често срещаните проблеми с достъпността, но е и един от най-лесните за коригиране. Добър контраст е полезен за всички — от потребители със зрителни увреждания до хора, които се опитват да четат телефоните си на плажа. -**Изисквания за контраст според WCAG:** +**Изисквания на WCAG за контраст:** -| Тип текст | WCAG AA (Минимум) | WCAG AAA (Подобрен) | -|-----------|-------------------|---------------------| -| **Обикновен текст** (под 18pt) | 4.5:1 съотношение на контраста | 7:1 съотношение на контраста | -| **Голям текст** (18pt+ или 14pt+ удебелен) | 3:1 съотношение на контраста | 4.5:1 съотношение на контраста | -| **UI компоненти** (бутони, рамки на формуляри) | 3:1 съотношение на контраста | 3:1 съотношение на контраста | +| Вид текст | WCAG AA (Минимално) | WCAG AAA (Подобрен) | +|-----------|---------------------|---------------------| +| **Обикновен текст** (под 18pt) | съотношение 4.5:1 | съотношение 7:1 | +| **Голям текст** (над 18pt или над 14pt удебелен) | съотношение 3:1 | съотношение 4.5:1 | +| **UI компоненти** (бутони, граници на формуляри) | съотношение 3:1 | съотношение 3:1 | **Основни инструменти за тестване:** - [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - Десктоп приложение с избор на цветове -- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Уеб-базирано с незабавна обратна връзка -- [Stark](https://www.getstark.co/) - Плъгин за дизайн инструменти като Figma, Sketch, Adobe XD -- [Accessible Colors](https://accessible-colors.com/) - Намерете достъпни цветови палитри +- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Уеб базиран с незабавна обратна връзка +- [Stark](https://www.getstark.co/) - Плъгин за дизайнерски инструменти като Figma, Sketch, Adobe XD +- [Accessible Colors](https://accessible-colors.com/) - Намиране на достъпни цветови палитри -✅ **Създайте по-добри цветови палитри**: Започнете с цветовете на вашия бранд и използвайте инструменти за проверка на контраста, за да създадете достъпни вариации. Документирайте тези цветове като достъпни цветови токени във вашата дизайн система. +✅ **Създавайте по-добри цветови палитри**: Започнете с цветовете на вашата марка и използвайте проверяващи контраста инструменти, за да създадете достъпни варианти. Документирайте ги като достъпни цветови токени във вашата дизайнерска система. -### Комплексен одит за достъпност +### Цялостен достъпен одит -Най-ефективното тестване за достъпност комбинира множество подходи. Нито един инструмент не улавя всичко, така че изграждането на рутинен процес за тестване с различни методи гарантира пълно покритие. +Най-ефективният тест за достъпност комбинира няколко подхода. Нито един инструмент не улавя всичко, затова изграждането на рутинен тест с различни методи осигурява пълно покритие. -**Тестване в браузър (вградено в DevTools):** -- **Chrome/Edge**: Lighthouse одит за достъпност + панел за достъпност -- **Firefox**: Инспектор за достъпност с подробен изглед на дървото -- **Safari**: Таб за одит в Web Inspector със симулация на VoiceOver +**Тестване в браузъра (вградено в DevTools):** +- **Chrome/Edge**: Одит за достъпност с Lighthouse + панел Accessibility +- **Firefox**: Accessibility Inspector с подробен дървовиден изглед +- **Safari**: Одит в Web Inspector с симулация на VoiceOver **Професионални разширения за тестване:** -- [axe DevTools](https://www.deque.com/axe/devtools/) - Стандарт за автоматизирано тестване в индустрията -- [WAVE](https://wave.webaim.org/extension/) - Визуална обратна връзка с подчертаване на грешки -- [Accessibility Insights](https://accessibilityinsights.io/) - Комплексен инструмент за тестване от Microsoft +- [axe DevTools](https://www.deque.com/axe/devtools/) - Стандарт в индустрията за автоматизирано тестване +- [WAVE](https://wave.webaim.org/extension/) - Визуална обратна връзка с маркиране на грешки +- [Accessibility Insights](https://accessibilityinsights.io/) - Комплексен тестов пакет на Microsoft -**Интеграция с команден ред и CI/CD:** +**Команден ред и интеграция CI/CD:** - [axe-core](https://github.com/dequelabs/axe-core) - JavaScript библиотека за автоматизирано тестване -- [Pa11y](https://pa11y.org/) - Инструмент за тестване на достъпност чрез команден ред -- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Автоматизирано оценяване на достъпността +- [Pa11y](https://pa11y.org/) - Команден инструмент за тестване на достъпност +- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Автоматизирано оценяване на достъпност -> 🎯 **Цел на тестването**: Стремете се към оценка за достъпност от Lighthouse от 95+ като базов стандарт. Помнете, че автоматизираните инструменти улавят само около 30-40% от проблемите с достъпността – ръчното тестване все още е от съществено значение! +> 🎯 **Цел на тестването**: Стремете се към резултат от 95+ на Lighthouse като базова линия. Запомнете, автоматизираните инструменти улавят само около 30-40% от проблемите с достъпността — ръчното тестване остава задължително! -## Изграждане на достъпност от самото начало +### 🧠 **Проверка на умения: Готови ли сте да откривате проблеми?** -Ключът към успеха в достъпността е да я включите в основата си от самото начало. Знам, че е изкушаващо да мислите "Ще добавя достъпност по-късно", но това е като да се опитвате да добавите рампа към къща, след като вече е построена. Възможно? Да. Лесно? Не съвсем. +**Нека проверим как се чувствате по отношение на тестването на достъпност:** +- Кой метод на тестване ви се струва най-достъпен в момента? +- Можете ли да си представите да използвате навигация само с клавиатура за цял ден? +- Кой е един бариерен проблем с достъпността, който лично сте изпитали онлайн? -Мислете за достъпността като за планиране на къща – много по-лесно е да включите достъпността за инвалидни колички в първоначалните архитектурни планове, отколкото да променяте всичко по-късно. +```mermaid +pie title "Проблеми с достъпността, открити от различни методи" + "Автоматизирани инструменти" : 35 + "Ръчно тестване" : 40 + "Обратна връзка от потребителите" : 25 +``` +> **Подсилващ увереността съвет**: Професионалните тестери на достъпност използват точно това съчетание от методи. Вие усвоявате индустриални практики! -### Принципите POUR: Основата на достъпността +## Изграждане на достъпност от основата -Насоките за достъпност на уеб съдържание (WCAG) са изградени около четири основни принципа, които се обобщават като POUR. Не се притеснявайте – това не са сухи академични концепции! Всъщност те са практични насоки за създаване на съдържание, което работи за всички. +Ключът към успеха в достъпността е да я вградите от самото начало. Знам, че е изкушаващо да мислите „Ще добавя достъпността по-късно“, но това е като да опитвате да добавите рампа след като домът вече е построен. Възможно ли е? Да. Лесно ли е? Не наистина. -След като разберете принципите на POUR, вземането на решения за достъпност става много по-интуитивно. Това е като да имате мисловен контролен списък, който насочва вашите дизайнерски избори. Нека ги разгледаме: +Представете си достъпността като планиране на къща — много по-лесно е да включите достъпност за инвалиди в първоначалните архитектурни планове, отколкото да я пригодите впоследствие. -**🔍 Възприемаемо**: Информацията трябва да бъде представена по начини, които потребителите могат да възприемат чрез наличните си сетива +### Принципите POUR: основата на вашата достъпност -- Осигурете текстови алтернативи за съдържание, което не е текст (изображения, видеа, аудио) -- Осигурете достатъчен контраст на цветовете за целия текст и компонентите на потребителския интерфейс -- Предоставете субтитри и транскрипции за мултимедийно съдържание -- Проектирайте съдържание, което остава функционално при увеличаване до 200% -- Използвайте множество сетивни характеристики (не само цвят), за да пред -Цветът е мощен инструмент за комуникация, но никога не трябва да бъде единственият начин за предаване на важна информация. Дизайнът, който надхвърля цветовете, създава по-устойчиви и достъпни преживявания, които работят в повече ситуации. +Уеб стандартите за достъпност (WCAG) се основават на четири основни принципа, които образуват акронима POUR. Не се безпокойте — това не са сухи академични понятия! Те са практични насоки за създаване на съдържание, което работи за всички. -**Дизайн за различия в цветното зрение:** +След като овладеете POUR, вземането на решения за достъпност става много по-интуитивно. Това е като да имате ментален контролен списък, който води дизайнерските ви избори. Нека ги разгледаме подробно: -Приблизително 8% от мъжете и 0.5% от жените имат някаква форма на различие в цветното зрение (често наричано "цветна слепота"). Най-често срещаните типове са: -- **Деутеранопия**: Трудност при разграничаване на червено и зелено -- **Протанопия**: Червеното изглежда по-тъмно -- **Тританопия**: Трудност с синьо и жълто (рядко срещано) +```mermaid +flowchart LR + A[🔍 ВЪЗПРИЕМАЕМО
Могат ли потребителите да го усетят?] --> B[🎮 УПРАВЛЯЕМО
Могат ли потребителите да го използват?] + B --> C[📖 РАЗБИРАЕМО
Могат ли потребителите да го разберат?] + C --> D[💪 ЗДРАВОСЛОВНО
Работи ли навсякъде?] + + A1[Алтернативен текст
Субтитри
Контраст] --> A + B1[Достъп с клавиатура
Без припадъци
Времеви ограничения] --> B + C1[Ясен език
Предвидимо
Помощ при грешки] --> C + D1[Валиден код
Съвместим
Готов за бъдещето] --> D + + style A fill:#e1f5fe + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 +``` +**🔍 Възприемаемо**: Информацията трябва да бъде представена по начини, които потребителите могат да възприемат чрез наличните им сетива + +- Предоставете текстови алтернативи за нехудожествено съдържание (изображения, видеа, аудио) +- Осигурете достатъчен цветен контраст за всички текстове и UI компоненти +- Предлагайте субтитри и транскрипти за мултимедийно съдържание +- Дизайн на съдържание, което остава функционално при преподреждане до 200% +- Използвайте различни сетивни характеристики (не само цвят) за предаване на информация + +**🎮 Операбилно**: Всички интерфейсни компоненти трябва да бъдат оперирани чрез наличните входни методи + +- Направете цялата функционалност достъпна чрез клавиатурна навигация +- Осигурете достатъчно време на потребителите за четене и взаимодействие със съдържанието +- Избягвайте съдържание, което причинява припадъци или вестибуларни нарушения +- Помагайте на потребителите да навигират ефективно чрез ясна структура и ориентири +- Осигурете подходящи размери за интерактивните елементи (минимум 44px) + +**📖 Разбираемо**: Информацията и управлението на интерфейса трябва да са ясни и разбираеми + +- Използвайте ясен, прост език, подходящ за аудиторията ви +- Осигурете съдържанието да се появява и функционира по предвидими и постоянни начини +- Предлагайте ясни инструкции и съобщения за грешки при потребителски вход +- Помагайте на потребителите да разбират и коригират грешки във формите +- Организирайте съдържанието с логичен ред на четене и информационна йерархия + +**💪 Здрав**: Съдържанието трябва да работи надеждно с различни технологии и помощни устройства + +- **Използвайте валиден, семантичен HTML като основа** +- **Осигурете съвместимост с настоящи и бъдещи помощни технологии** +- **Спазвайте уеб стандартите и най-добрите практики при маркирането** +- **Тествайте в различни браузъри, устройства и помощни инструменти** +- **Структурирайте съдържанието така, че да се деградира плавно, когато разширени функции не се поддържат** + +### 🎯 **Проверка на принципите POUR: Как да ги запазим** + +**Бърза рефлексия върху основите:** +- Можете ли да си спомните уеб функция, която не успява при всеки принцип от POUR? +- Кой принцип ви се струва най-естествен като разработчик? +- Как тези принципи биха подобрили дизайна за всички, а не само за потребители с увреждания? + +```mermaid +quadrantChart + title Матрица за въздействие на принципите POUR + x-axis Ниско усилие --> Високо усилие + y-axis Ниско въздействие --> Високо въздействие + quadrant-1 Бързи победи + quadrant-2 Основни проекти + quadrant-3 Помислете по-късно + quadrant-4 Стратегически фокус + + Alt Text: [0.2, 0.9] + Color Contrast: [0.3, 0.8] + Semantic HTML: [0.4, 0.9] + Keyboard Nav: [0.6, 0.8] + ARIA Complex: [0.8, 0.7] + Screen Reader Testing: [0.7, 0.6] +``` +> **Запомнете**: Започнете с подобрения с голямо въздействие и малко усилия. Семантичен HTML и alt текст предоставят най-голям достъпностен бонус с минимални усилия! -**Стратегии за включващ дизайн с цветове:** +## Създаване на достъпен визуален дизайн + +Добър визуален дизайн и достъпността вървят ръка за ръка. Когато проектирате с мисъл за достъпността, често откривате, че тези ограничения водят до по-чисти, по-елегантни решения, които са полезни за всички потребители. + +Нека разгледаме как да създадем визуално привлекателни дизайни, които работят за всички, независимо от техните зрителни способности или условията, при които разглеждат вашето съдържание. + +### Стратегии за цвят и визуална достъпност + +Цветът е мощен инструмент за комуникация, но никога не трябва да бъде единственият начин за предаване на важна информация. Проектирането отвъд използването само на цветове създава по-здрави, всеобхватни изживявания, които работят в повече ситуации. + +**Проектирайте за различия във възприятията на цветовете:** + +Приблизително 8% от мъжете и 0.5% от жените имат някаква форма на разлика във възприемането на цветовете (често наричана "цветна слепота"). Най-честите типове са: +- **Дейтеранопия**: Трудност при различаване на червено и зелено +- **Протанопия**: Червеното изглежда по-бледо +- **Тританопия**: Трудност с синьо и жълто (рядко) + +**Инклузивни стратегии за цветове:** ```css /* ❌ Bad: Using only color to indicate status */ @@ -211,18 +348,18 @@ graph TD ``` **Отвъд основните изисквания за контраст:** -- Тествайте избора си на цветове с симулатори за цветна слепота -- Използвайте шарки, текстури или форми заедно с цветово кодиране -- Уверете се, че интерактивните състояния остават различими без цветове -- Помислете как изглежда вашият дизайн в режим на висок контраст +- Тествайте избора на цветове с помощта на симулатори за цветна слепота +- Използвайте модели, текстури или форми заедно с кодиране с цветове +- Уверете се, че интерактивните състояния остават разпознаваеми и без цвят +- Обмислете как вашият дизайн изглежда в режим на висок контраст -✅ **Тествайте достъпността на цветовете си**: Използвайте инструменти като [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/), за да видите как изглежда вашият сайт за потребители с различни типове цветно зрение. +✅ **Тествайте вашата цветова достъпност**: Използвайте инструменти като [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/), за да видите как изглежда вашият сайт за потребители с различни видове цветно зрение. -### Индикатори за фокус и дизайн на взаимодействията +### Индикатори за фокус и дизайн на взаимодействието -Индикаторите за фокус са дигиталният еквивалент на курсора – те показват на потребителите с клавиатура къде се намират на страницата. Добре проектираните индикатори за фокус подобряват преживяването за всички, като правят взаимодействията ясни и предсказуеми. +Индикаторите за фокус са цифровият еквивалент на курсора — те показват на потребителите, използващи клавиатура, къде се намират на страницата. Добре проектираните индикатори за фокус подобряват преживяването за всички, като правят взаимодействията ясни и предвидими. -**Съвременни най-добри практики за индикатори за фокус:** +**Най-добри практики за модерни индикатори за фокус:** ```css /* Enhanced focus styles that work across browsers */ @@ -252,22 +389,43 @@ button:focus:not(:focus-visible) { ``` **Изисквания за индикатори за фокус:** -- **Видимост**: Трябва да имат контрастно съотношение поне 3:1 със заобикалящите елементи -- **Ширина**: Минимум 2px дебелина около целия елемент -- **Постоянство**: Трябва да останат видими, докато фокусът не се премести другаде -- **Различие**: Трябва визуално да се различават от други състояния на потребителския интерфейс +- **Видимост**: Трябва да има контраст поне 3:1 спрямо околните елементи +- **Ширина**: Минимална дебелина 2px около целия елемент +- **Постоянство**: Трябва да остава видим, докато фокусът не се премести някъде другаде +- **Различимост**: Трябва да е визуално различим от други състояния на UI -> 💡 **Съвет за дизайн**: Отличните индикатори за фокус често използват комбинация от контур, сенки и промени в цвета, за да осигурят видимост на различни фонове и контексти. +> 💡 **Съвет при проектиране**: Отличните индикатори често използват комбинация от контур, сянка и промени в цвета, за да осигурят видимост на различни фонове и в различни контексти. -✅ **Проверете индикаторите за фокус**: Прегледайте сайта си с клавиша Tab и отбележете кои елементи имат ясни индикатори за фокус. Има ли такива, които са трудни за виждане или напълно липсват? +✅ **Проведете одит на индикаторите за фокус**: Навигирайте с таб клавиша през вашия сайт и отбележете кои елементи имат ясни индикатори за фокус. Има ли някой, който е труден за виждане или липсва напълно? ### Семантичен HTML: Основата на достъпността -Семантичният HTML е като GPS система за помощните технологии на вашия уебсайт. Когато използвате правилните HTML елементи за тяхната предназначена цел, всъщност предоставяте на екранните четци, клавиатурите и други инструменти подробна карта, която помага на потребителите да се ориентират ефективно. +Семантичният HTML е като да дадете на помощните технологии GPS система за вашият уебсайт. Когато използвате правилните HTML елементи за предназначението им, вие практически предоставяте на екранните четци, клавиатурите и другите инструменти подробна карта, която помага на потребителите да навигират ефективно. -Ето една аналогия, която наистина ми помогна да разбера: семантичният HTML е разликата между добре организирана библиотека с ясни категории и полезни знаци и склад, където книгите са разхвърляни на случаен принцип. И двете места имат едни и същи книги, но в кое бихте предпочели да търсите нещо? Точно така! +Ето една аналогия, която много ми помогна: семантичният HTML е разликата между добре организирана библиотека с ясни категории и указателни табели и склад, където книгите са разпръснати на случаен принцип. И в двата случая има еднакви книги, но в кое място бихте предпочели да търсите нещо? Точно така! -**Основни елементи за достъпна структура на страницата:** +```mermaid +flowchart TD + A[🏠 HTML Документ] --> B[📰 горна част] + A --> C[🧭 навигация] + A --> D[📄 основно] + A --> E[📋 долна част] + + B --> B1[h1: Име на сайта
Лого и бранд] + C --> C1[ul: Навигация
Основни връзки] + D --> D1[article: Съдържание
section: Подсекции] + D --> D2[aside: Странична лента
Свързано съдържание] + E --> E1[nav: Връзки в долната част
Информация за авторски права] + + D1 --> D1a[h1: Заглавие на страница
h2: Основни раздели
h3: Подраздели] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 +``` +**Строителни блокове на достъпната структура на страницата:** ```html @@ -324,34 +482,60 @@ button:focus:not(:focus-visible) { **Защо семантичният HTML трансформира достъпността:** -| Семантичен елемент | Цел | Полза за екранните четци | -|--------------------|-----|--------------------------| -| `
` | Заглавие на страница или секция | "Banner landmark" - бърза навигация до горната част | -| `