<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        
        <title>
            <![CDATA[ Anastasiia Buievych - freeCodeCamp.org ]]>
        </title>
        <description>
            <![CDATA[ Browse thousands of programming tutorials written by experts. Learn Web Development, Data Science, DevOps, Security, and get developer career advice. ]]>
        </description>
        <link>https://www.freecodecamp.org/ukrainian/news/</link>
        <image>
            <url>https://cdn.freecodecamp.org/universal/favicons/favicon.png</url>
            <title>
                <![CDATA[ Anastasiia Buievych - freeCodeCamp.org ]]>
            </title>
            <link>https://www.freecodecamp.org/ukrainian/news/</link>
        </image>
        <generator>Eleventy</generator>
        <lastBuildDate>Sat, 16 May 2026 19:15:49 +0000</lastBuildDate>
        <atom:link href="https://www.freecodecamp.org/ukrainian/news/author/anastasiia/rss.xml" rel="self" type="application/rss+xml" />
        <ttl>60</ttl>
        
            <item>
                <title>
                    <![CDATA[ Як навчитись програмувати і знайти роботу [повна версія] ]]>
                </title>
                <description>
                    <![CDATA[ Якщо ви хочете навчитись програмувати та стати розробником, то ви саме там, де треба. Ця книга допоможе вам. І це безоплатна повна версія на freeCodeCamp. Крім того, я записав БЕЗОПЛАТНУ аудіокнигу за мотивами цієї книги, яку опублікував як 100-й випуск подкасту freeCodeCamp. Її можна знайти в будь-якому застосунку з подкастами. ]]>
                </description>
                <link>https://www.freecodecamp.org/ukrainian/news/yak-navchytys-prohramuvaty-i-znayty-robotu-povna-versiya/</link>
                <guid isPermaLink="false">69e9ef42c1fd1e051db92d28</guid>
                
                    <category>
                        <![CDATA[ книга ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Anastasiia Buievych ]]>
                </dc:creator>
                <pubDate>Tue, 12 May 2026 12:58:44 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/ukrainian/news/content/images/2026/05/Learn-to-Code-and-Get-a-Developer-Job-Book.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p data-test-label="translation-intro">
        <strong>Оригінальна публікація:</strong> <a href="https://www.freecodecamp.org/news/learn-to-code-book/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">How to Learn to Code and Get a Developer Job [Full Book]</a>
      </p><p>Якщо ви хочете навчитись програмувати та стати розробником, то ви саме там, де треба. Ця книга допоможе вам.</p><p>І це безоплатна повна версія на freeCodeCamp.</p><p>Крім того, я записав БЕЗОПЛАТНУ аудіокнигу за мотивами цієї книги, яку опублікував як 100-й випуск подкасту freeCodeCamp. Її можна знайти в будь-якому застосунку з подкастами. Не забудьте підписатися. Для зручності я прикріпив посилання нижче.</p><figure class="kg-card kg-embed-card"><iframe src="https://play.libsyn.com/embed/episode/id/28380047/height/192/theme/modern/size/large/thumbnail/yes/custom-color/2a4061/time-start/00:00:00/playlist-height/200/direction/backward/download/yes" height="192" width="100%" title="Embedded content" loading="lazy" style="box-sizing: inherit; margin: 0px; padding: 0px; border: medium; font-style: inherit; font-variant-caps: inherit; font-weight: inherit; font-width: inherit; line-height: inherit; font-family: inherit; font-size-adjust: inherit; font-kerning: inherit; font-variant-alternates: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-position: inherit; font-variant-emoji: inherit; font-feature-settings: inherit; font-optical-sizing: inherit; font-variation-settings: inherit; font-size: 22px; vertical-align: middle;"></iframe></figure><p>Кілька років тому одне з найбільших видань Нью-Йорка зв’язалось зі мною щодо угоди про видання книги. Я зустрівся з ними, але не мав часу написати її.</p><p>Нарешті я знайшов час. Вирішив, що опублікую книгу безоплатно на freeCodeCamp.</p><p>Інформація має бути безоплатною, правда ж? 🙂</p><p>Читання займе кілька годин вашого часу. Я зібрав свої думки щодо навчання програмування і пошуку роботи.</p><p>Я здобув ці знання, коли:</p><ul><li>вчився програмувати в 30+,</li><li>працював інженером-програмістом,</li><li>а потім керував freeCodeCamp.org. Зараз цей сайт щодня відвідують понад мільйон людей з однією метою: вивчати математику, програмування та комп’ютерні науки.</li></ul><p>Я був викладачем англійської мови, який ніколи не займався програмуванням. За рік я навчився програмувати до певного рівня та почав працювати в ІТ.</p><p>Я не купував книги чи курси.</p><p>(Насправді я витрачав гроші на поїздки в сусідні міста, щоб брати участь у професійних заходах. Пізніше побачите, що воно було того варте.)</p><p>Після того, як кілька років пропрацював інженером-програмістом, я відчув, що готовий. Мені захотілось навчити й інших людей змінювати кар’єру.</p><p>Я розробив декілька навчальних інструментів, якими ніхто не хотів користуватися. Але якось на вихідних я створив freeCodeCamp.org. Тут швидко зібралася активна спільнота.</p><p>Ми всі допомагали одне одному. А тепер люди з усього світу використовують freeCodeCamp, щоб підготуватися до своєї першої роботи в ІТ.</p><p>У вас, мабуть, постане питання чи знайдете ви час прочитати цілу книгу.</p><p>Не переймайтесь. Додайте сторінку до закладок. Ви зможете повернутися до неї і прочитати за кілька разів.</p><p>Можете поділитися нею у соцмережах. Напишіть: «Дивіться, що я зараз читаю» та прикріпіть посилання на книгу. Це дуже ефективний спосіб змусити себе дочитати її.</p><p>Кажу так, бо не намагаюсь продати вам книгу. Фактично ви вже «придбали» її, коли зайшли на цю сторінку. Моя ціль — довести, що якщо дочитаєте до кінця, воно того вартуватиме. 😉</p><p>Обіцяю не зловживати вашим часом. Тут немає пафосу чи пустослів’я, а лише відверті та практичні поради.</p><p>Додам в кожен розділ стільки думок, скільки можливо.</p><p>А де ж зміст?</p><p>А ось він:</p><h2 id="-"><strong>Зміст</strong></h2><ol><li><a href="#передмова-для-кого-ця-книга">Передмова: для кого ця книга?</a></li><li><a href="#короткий-виклад-на-500-слів">Короткий виклад на 500 слів</a></li><li><a href="#розділ-1-як-розвивати-навички">Розділ 1: як розвивати навички</a></li><li><a href="#розділ-2-як-розбудувати-нетворкінг">Розділ 2: як розбудувати нетворкінг</a></li><li><a href="#розділ-3-як-заробити-репутацію">Розділ 3: як заробити репутацію</a></li><li><a href="#розділ-4-як-заробляти-на-програмуванні">Розділ 4: як заробляти на програмуванні (клієнти на фрилансі та пошук роботи)</a></li><li><a href="#розділ-5-як-досягти-успіху-на-першій-роботі">Розділ 5: як досягти успіху на першій роботі</a></li><li><a href="#епілог-у-вас-все-вийде">Епілог: у вас все вийде</a></li></ol><!--kg-card-begin: html--><h2 id="передмова-для-кого-ця-книга">Передмова: для кого ця книга?</h2><!--kg-card-end: html--><p>Книга підійде всім, хто думає над кар’єрою в ІТ.</p><p>Якщо ви шукаєте роботу з гнучким графіком, високою зарплатою та творчим підходом до розв’язання проблем, то ІТ стане ідеальним варіантом.</p><p>Кожен починає свій шлях у програмуванні з певними ресурсами, до яких можна віднести <strong>час</strong>, <strong>фінанси</strong> та <strong>можливості</strong>.</p><p>Можливо, ви старшого віку, маєте дітей чи доглядаєте за родичами. Тож у вас може бути менше <strong>часу</strong>.</p><p>Або ж ви молоді, але не маєте часу відкладати гроші чи набувати навичок, які збільшать ваш дохід. Тож у вас може не вистачати <strong>фінансів</strong>.</p><p>Чи, можливо, ви живете далеко від великих технологічних міст, таких як Сан-Франциско, Берлін, Токіо чи Бенгалуру.</p><p>Або, може, ви маєте фізичні чи психічні порушення. Ейджизм, расизм та сексизм — це реальність. Імміграційний статус може ускладнити пошук роботи. Так само як і судимість.</p><p>Тож <strong>можливості</strong> обмежені.</p><p>Декому навчитися програмувати та влаштуватися на роботу буде складніше, ніж іншим. Кожен підходить до цього завдання зі своєї власної позиції, використовуючи доступні ресурси.</p><p>Але незалежно від того, з чого ви починаєте — з погляду на час, фінанси чи можливості — я зроблю все можливе, щоб поділитись практичними порадами.</p><p>Іншими словами: не переймайтесь, ви у правильному місці.</p><h3 id="--1"><strong><strong>Чи може кожен навчитися програмувати?</strong></strong></h3><p>Так. Я вірю, що будь-яка вмотивована людина може навчитися програмувати. Зрештою, це питання мотивації, а не здібностей.</p><p>Чи були комп’ютери на африканських саванах, де первісні люди жили тисячі років, перш ніж розселитися по Європі, Азії та Америці?</p><p>Програмування — це не те, до чого людство пристосовувалося в ході еволюції. Комп’ютери в тому вигляді, в якому ми їх знаємо (настільні ПК, ноутбуки, смартфони), з’явилися у 80-х, 90-х та 2000-х роках.</p><p>Я вірю, що здібності відіграють певну роль. Але зрештою, кожному, хто хоче стати професійним розробником, доведеться багато часу проводити за клавіатурою.</p><p>Більшість людей, які намагаються навчитися програмувати, розчаровуються і кидають цю справу.</p><p>І я так само. Я розчаровувався і здавався. Не один раз.</p><p>Але — як й інші люди, які зрештою досягли успіху — через кілька днів пробував знову.</p><p>Визнаю: навчитися програмувати і влаштуватися на роботу — важко. А для деяких людей ще важче через обставини.</p><p>Не буду прикидатися, що під час навчання пережив якісь справжні труднощі. Так, мені було за 30 і я не мав формальної освіти з програмування чи комп’ютерних наук. Але врахуйте:</p><p>Я ріс в сім’ї середнього класу в США — я американець у четвертому поколінні з англомовної родини. Вчився в університеті. Мій батько теж вчився в університеті. І його батько так само (а його батьки були фермерами зі Швеції).</p><p>Мені пощастило і я скористався моментом, коли життя досить спокійне.</p><p>Ось моє величезне застереження: я не мотиватор, який підбадьорює долати труднощі.</p><p>Якщо вам потрібне натхнення, то в спільноті розробників є безліч людей, які подолали справжні труднощі. Можете їх знайти.</p><p>Я не намагаюся ідеалізувати ІТ. Я не малюватиму картин науково-фантастичних утопій, які можуть стати реальністю, якщо всі навчаться програмувати.</p><p>Натомість я просто дам практичні поради для набуття навичок і скажу як знайти хорошу роботу, щоб забезпечити свою сім’ю.</p><p>Немає нічого поганого в тому, щоб навчитися програмувати для хорошої стабільної роботи.</p><p>Так само немає нічого поганого в тому, щоб навчитися програмувати для власного бізнесу.</p><p>Дехто може казати, що ви повинні марити програмуванням. Ніби-то після повного робочого тижня ви маєте проводити вихідні над проєктами з відкритим кодом.</p><p>Я дійсно знаю людей, які <em>настільки</em> захоплені програмуванням. Але я також знаю багато людей, які після важкого робочого тижня просто хочуть провести час на природі або пограти в настільні ігри з друзями.</p><p>Люди зазвичай люблять робити те, що в них добре виходить. І ви можете полюбити програмування, просто стаючи кращим.</p><p>Отже, коротко: для кого ця книга? Для всіх, хто хоче вдосконалити свої навички з програмування та стати розробником. Ось і все.</p><p>Вам не потрібно бути самопроголошеним «ботаном», інтровертом чи ідеологічно вмотивованим активістом. Або відповідати будь-якому з цих стереотипів.</p><p>Якщо у вас так — це чудово. Але це точно не вимога.</p><p>Тож якщо ви серйозно налаштовані навчитися програмувати настільки добре, щоб отримувати за це гроші — ця книга саме для вас.</p><p>Для початку прочитайте невеликий виклад. А потім все решту.</p><!--kg-card-begin: html--><h2 id="короткий-виклад-на-500-слів">Короткий виклад на 500 слів</h2><!--kg-card-end: html--><p>Навчитися програмувати важко. А знайти роботу — ще важче. Але для багатьох людей це того варте.</p><p>Програмування — це високооплачувана, інтелектуально складна та творчо насичена галузь. Перед вами відкриється чіткий кар’єрний ріст: старший розробник, технічний керівник, головний інженер, технічний директор і, можливо, навіть генеральний директор.</p><p>Ви зможете знайти роботу практично в будь-якій галузі. Приблизно дві третини вакансій для розробників знаходяться поза межами того, що ми традиційно називаємо «програмуванням»: у сільському господарстві, виробництві, державному секторі та галузі послуг, таких як банківська справа та охорона здоров’я.</p><p>Якщо ви хвилюєтеся, що ваша робота може бути автоматизована ще до того, як ви вийдете на пенсію, то зверніть увагу, що програмування — це процес автоматизації. Отже, за визначенням, це остання професія, яка буде повністю автоматизована.</p><p>Автоматизація вплине на програмування. Вона вже вплинула. На десятиліття.</p><p>Інструменти генеративного ШІ — серед яких GPT-4 та Copilot — можуть допомогти перейти від імперативного (коли ви чітко вказуєте комп’ютерам, що робити) до декларативного програмування (коли ви ставите перед комп’ютерами завдання вищого рівня). Іншими словами: програмування у стилі «Зоряного шляху».</p><p>Зараз є калькулятори, але все одно варто вивчати математику. І варто вивчати програмування, навіть попри те, що зараз є інструменти штучного інтелекту, які можуть писати код.</p><p>Вийшло переконати, що кар’єра в ІТ — це те, що вам потрібно?</p><p>Добре. Ось як увійти до цієї галузі.</p><h3 id="--2"><strong><strong>Розвивайте свої навички</strong></strong></h3><p>Вам потрібно вивчати:</p><ul><li>front end: HTML, CSS, JavaScript;</li><li>back end: SQL, Git, Linux та вебсервери;</li><li>наукові обчислення: Python та його численні бібліотеки.</li></ul><p>Це технології, яким вже понад 20 років. У якій би компанії ви не працювали, скоріше за все ви будете використовувати більшість із цих інструментів.</p><p>Найкращий спосіб освоїти їх — будувати проєкти. Намагайтеся щодня писати хоча б частину коду. Якщо ви пройдете навчальну програму freeCodeCamp від початку до кінця, то опануєте ці технології та створите десятки проєктів.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/01/Learn_to_Code_-_For_Free_-_Coding_Courses_for_Busy_People_--.png" class="kg-image" alt="Image" width="600" height="400" loading="lazy"><figcaption>Декілька сертифікацій з навчальної програми freeCodeCamp.</figcaption></figure><h3 id="--3"><strong>Працюйте над нетворкінгом</strong></h3><p>Отримання роботи значною мірою залежить від того, кого ви знаєте.</p><p>Немає нічого поганого в тому, щоб бути інтровертом, але потрібно виходити із зони комфорту.</p><p>Зареєструйтесь на GitHub, X (Twitter), LinkedIn та Discord.</p><p>Ходіть на зустрічі та конференції. Подорожуйте, якщо це необхідно (більшу частину бюджету на навчання варто витратити на подорожі та квитки на заходи, а не книги та курси).</p><p>Спілкуйтесь з людьми. Дайте можливість говорити іншим, а самі уважно слухайте. Запам’ятовуйте імена.</p><p>Додавайте людей на LinkedIn, підписуйтесь на них у X (Twitter) та відвідуйте вечірки після заходів.</p><h3 id="--4"><strong><strong>Заробляйте репутацію</strong></strong></h3><p>Діліться короткими демонстраціями своїх проєктів.</p><p>Продовжуйте подавати заявки на виступи на дедалі більших конференціях.</p><p>Відвідуйте хакерспейси та допомагайте людям, які знаються на програмуванні менше, ніж ви.</p><p>Робіть внесок до відкритих проєктів. Ця робота схожа на професійну розробку програмного забезпечення.</p><p><strong>Розвивайте навички, нетворкінг і репутацію одночасно.</strong> Не дозволяйте собі відкладати найскладніші етапи.</p><p>Замість того, щоб подавати резюме напряму, використовуйте знайомства, щоб потрапити на співбесіди «через службовий вхід». Рекрутери теж можуть допомогти.</p><p>Продовжуйте ходити на співбесіди, поки не почнете отримувати оффери. Однак не потрібно погоджуватися на першу-кращу пропозицію. Будьте терплячими.</p><p>Перша робота буде найважчою. Постарайтеся протриматися там принаймні два роки і, по суті, отримуйте зарплату за навчання.</p><p>Справжнє навчання починається вже на роботі, коли ви працюєте разом з командою і над великими кодовими базами.</p><p>Найголовніше — висипайтеся та займайтеся спортом.</p><p>Будь-яка достатньо вмотивована людина може навчитися програмувати і влаштуватися на роботу.</p><p>Все залежить лише від того, наскільки сильно ви цього хочете і наскільки наполегливо шукатимете роботу.</p><p>Пам’ятайте: у вас все вийде.</p><h2 id="-freecodecamp"><strong><strong>Ця книга присвячена глобальній спільноті freeCodeCamp</strong></strong></h2><p>Дякую всім, хто підтримував нашу благодійну організацію та нашу місію протягом останніх років.</p><p>Саме завдяки вашій волонтерській діяльності та благодійності ми змогли допомогти багатьом навчитися програмувати і вперше влаштуватись на роботу розробником.</p><p>З того скромного відкритого проєкту, який я вперше запустив у 2014 році, виросла ціла спільнота. Зараз я — лише невелика частина цієї глобальної спільноти.</p><p>Для мене велика честь досі бути тут і працювати з вами. Разом ми стикаємося з фундаментальною проблемою нашого часу: із доступом до інформації, освіти та інструментів, які формують майбутнє.</p><p>Це лише початок. Жодних ілюзій, що за мого життя всі навчаться програмувати. Але так само, як Біблія Гутенберга прискорила грамотність у 1455 році, ми можемо прискорити технологічну грамотність завдяки безоплатним навчальним ресурсам.</p><p>Ще раз дякую всім.</p><p>Окрема подяка Еббі Реннемейєр за редакційні коментарі та Естефанії Кассінгена Навоне за дизайн обкладинки.</p><p>А тепер книга.</p><!--kg-card-begin: html--><h2 id="розділ-1-як-розвивати-навички">Розділ 1: як розвивати навички</h2><!--kg-card-end: html--><blockquote><em>«Кожен митець спочатку був аматором»<em> </em>—<em> </em>Ральф Волдо Емерсон</em></blockquote><p>Шлях до оволодіння навичками програмування — довгий.</p><p>Для мене він був досить неоднозначним.</p><p>Для вас він може бути іншим.</p><p>У цьому розділі я поділюся деякими стратегіями, які допоможуть навчитися програмувати якомога легше.</p><p>Спочатку я розповім, як навчився програмувати у 2011 році.</p><p>Потім я поділюся тим, чого навчився в процесі.</p><p>Я розкажу, як навчатися ефективніше за мене.</p><h3 id="-30-"><strong>Час історій<strong>: </strong>я<strong>к </strong>30-річний викладач<strong> самостійно</strong> <strong>навчився програмувати?</strong></strong></h3><p>Я був викладачем і керував школою англійської мови. У нас навчалося близько сотні дорослих учнів, які приїхали до Каліфорнії з різних куточків світу. Вони вивчали англійську, щоб вступити до університету.</p><p>Більшість викладачів обожнювали викладати. Їм подобалося проводити час з учнями та допомагати їм вдосконалювати розмовну англійську.</p><p>Але вони ненавиділи паперову роботу: звіти про відвідування, табелі успішності, імміграційні документи.</p><p>Я хотів, щоб викладачі проводити більше часу з учнями, а не документацією.</p><p>Але що я знав про комп’ютери?</p><p>Програмування? Хіба для цього не треба бути розумним? Я ледве міг налаштувати Wi-Fi роутер. І з математикою мені не пощастило.</p><p>Одного дня я просто відкинув усі сумніви і подумав: «А таки спробую. Що я втрачаю?»</p><p>Я почав гуглити запитання на кшталт «як автоматично переходити по посиланнях на вебсайтах» та «як імпортувати дані з вебсайтів до Excel».</p><p>Тоді я цього не усвідомлював, але я вчився автоматизовувати робочі процеси.</p><p>Так і почалося навчання: спочатку з макросами Excel, а потім — з інструментом AutoHotKey, за допомогою якого можна запрограмувати мишу так, щоб вона переміщалася до певних координат екрана, натискала, копіювала текст, а потім переміщалася до інших координат і вставляла той текст.</p><p>Після кількох тижнів хаотичних пошуків я з’ясував, як автоматизувати кілька завдань. Я міг відкрити таблицю Excel і вебсайт, запустити код, а потім повернутися через 10 хвилин і таблиця була б повністю заповнена.</p><p>Це була аматорська робота. Те, що розробники могли б назвати «брудним лайфхаком». Але завдання було виконано.</p><p>Я використовував свої новонабуті навички автоматизації, щоб і далі оптимізувати роботу школи.</p><p>Через деякий час викладачам майже не доводилося торкатися комп’ютера. Я виконував роботу кількох викладачів, маючи навички початківця.</p><p>Це помітно вплинуло на школу. Раніше велика частина нашого часу йшла на рутинну роботу за комп’ютером. Ми стали вільними.</p><p>Викладачі стали щасливішими. Вони проводили більше часу з учнями.</p><p>Учні стали щасливішими. Вони розповідали своїм друзям з рідної країни, щоб ті обов’язково відвідали нашу школу.</p><p>Незабаром ми стали однією з найуспішніших шкіл у всій системі освіти.</p><p>У мене з’явилось ще більше сміливості. Пам’ятаю, як подумав: «Можливо, я зможу навчитися програмувати».</p><p>Я знав пару розробників з наших вечорів настільних ігор. У них була традиційна освіта: дипломи з Каліфорнійського технологічного інституту, коледжу Харві Мадда та інших відомих навчальних програм.</p><p>У той час 30-річним людям набагато рідше спадало на думку вчитися програмувати.</p><p>Я набрався сміливості й поділився своїми мріями з деякими друзями.</p><p>Я хотів навчитися програмувати правильно. Хотів заробляти на життя програмуванням, як вони. Може, навіть писати програмне забезпечення, яке могло б допомагати функціонуванню шкіл.</p><p>Я ділився цими мріями зі своїми друзями-розробниками:</p><p>— Хочу робити те, що ви.</p><p>Але вони лише знизували плечима. Потім казали щось на кшталт:</p><p>— Ну, можеш спробувати. Але потрібно перейти цілу гору знань.</p><p>А ще:</p><p>— Це досить конкурентна галузь. Як ти збираєшся змагатися з тими, хто змалку займається програмуванням?</p><p>І ще:</p><p>— Ти хороший викладач. Чому тобі просто не займатися тим, що добре виходить?</p><p>І це збивало мене з курсу на кілька тижнів. Я вирушав у довгі нічні прогулянки, щоб розібратися зі своїми думками. Я розмірковував про майбутнє під зорями. Чи мали ці люди рацію? Вони ж щось знають, правда?</p><p>Але щоранку я повертався до робочого столу. Дивився, як працює мій код. Дивився, як мої звіти здаються з надлюдською швидкістю. Дивився, як комп’ютер виконує мої команди.</p><p>І тут я задумався: можливо, друзі просто намагалися вберегти мене від розчарування. Напевно, вони просто не знають нікого, хто навчився програмувати в такому віці. Тому вони вважають, що це неможливо.</p><p>Раніше лікарі вважали, що неможливо пробігти милю за 4 хвилини. Вони думали, що від такого швидкого бігу серце просто вибухне.</p><p>Але потім комусь це вдалося. І серце не вибухнуло.</p><p>Як тільки Роджер Банністер — 25-річний студент Оксфорда — подолав цей психологічний бар’єр, так зробили й безліч інших людей. На сьогоднішній день понад тисячу людей пробігли милю швидше, ніж за 4 хвилини.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/01/Roger-Bannister-1951_jpg__1269-1600_.png" class="kg-image" alt="Image" width="600" height="400" loading="lazy"><figcaption>Роджер Банністер (зображення: Britannica)</figcaption></figure><p>Я не робив нічого такого сміливого та безпрецедентного. Багато відомих розробників навчилися програмувати самостійно.</p><p>Ада Лавлейс навчилася програмувати ще в 1840-х роках. І в неї навіть не було робочого комп’ютера. Вона просто розуміла, як мав би працювати комп’ютер її друга Чарльза Беббіджа.</p><p>Вона написала декілька перших комп’ютерних алгоритмів. Її вважають першою у світі програмісткою. Ніхто її не навчав. Бо не було нікого, хто міг би її навчити. Які б сумніви вона не мала, вона їх безперечно подолала.</p><p>Звісно, я не Ада Лавлейс. Я звичайний викладач, у якого були робочий комп’ютер, непоганий інтернет і можливість шукати серед мільярдів вебсторінок за допомогою Google.</p><p>Я налаштувався і вирішив, що таки зроблю це.</p><h3 id="--5"><strong><strong>«Навчальне пекло», у яке я вляпався</strong></strong></h3><blockquote><em>«Якщо ти працюєш 10 років, то отримуєш 10 років досвіду чи 1 рік досвіду 10 разів? Щоб здобути справжній досвід, потрібно аналізувати свої дії. Якщо ти постійно навчаєшся, то здобудеш досвід. Якщо ні — то ні, скільки б років ти не пропрацював» — Стів Макконнелл (інженер-програміст)</em></blockquote><p>Наступні кілька тижнів я гуглив та розглядав випадкові уроки, на які натрапив в інтернеті.</p><p>Гляньте, урок з Ruby.</p><p>О, стає складніше. Я отримую повідомлення про помилки, які не згадуються в уроці. Що відбувається?</p><p>Гляньте, урок з Python.</p><p>Людська психологія — дивна річ. Як тільки щось стає складним, ми запитуємо себе: я правильно роблю?</p><p>Можливо, урок застарів. Можливо, автор не знав, про що говорив. Хтось взагалі користується цією мовою програмування?</p><p>Коли стикаєшся з неоднозначними повідомленнями про помилки, то здається, що нічого не виходить.</p><p>Вдавати прогрес було легко. Настав час пообідати.</p><p>У кафе я зустрів друга.</p><p>— Як справи з програмуванням? — запитав він.</p><p>— Чудово. Сьогодні програмував 4 години.</p><p>— Супер. Хотів би якось глянути, над чим працюєш.</p><p>— Звісно, — відповідав я, знаючи, що нічого не зробив. — Скоро подивишся.</p><p>Після цього я міг піти до бібліотеки і взяти нову книгу з JavaScript.</p><p>Одне старе прислів’я каже, що купівля книг дарує найкраще відчуття у світі. Адже ти ніби купуєш час, щоб прочитати їх.</p><p>Саме в такій ситуації я опинився через кілька тижнів після того, як почав програмувати.</p><p>Я прочитав перші 100 сторінок кількох книг з програмування, але жодну не дочитав.</p><p>Я написав перші 100 рядків коду з кількох уроків, але жодного не завершив.</p><p>Я цього не усвідомлював, але опинився у пастці, яку розробники лагідно називають «навчальним пеклом».</p><p>Навчальне пекло — це коли ти перескакуєш від одного уроку до іншого, вивчаючи базові поняття, при цьому ніколи не виходячи за межі основ.</p><p>Щоб вийти за межі основ потрібна справжня праця.</p><h3 id="--6"><strong><strong>Гуртом і на </strong>розробника<strong> легше навчатись</strong></strong></h3><p>Навчання забирало весь мій вільний час, але я не помічав прогресу. Згодом я міг набирати символи <code>{</code> та <code>*</code>, не дивлячись на клавіатуру. Але на цьому поки все.</p><p>Я розумів, що потрібна допомога. Можливо, якийсь наставник на кшталт Йоди, який би навчив мене всьому. Так, така людина змінила б усе на моєму шляху.</p><p>Я дізнався про місце неподалік, яке називалося «хакерспейс». Коли я вперше почув цю назву, то трохи злякався. Хіба хакери не займаються незаконними справами? Я був викладачем англійської мови, який любив грати в настільні ігри. Я не хотів проблем.</p><p>Ну, я зателефонував за вказаним номером і поговорив зі Стівом. Я нервово запитав:</p><p>— Ви ж не робите нічого незаконного?</p><p>Стів засміявся.</p><p>Виявляється, слово «хак» — це багатозначний термін. Так, «хакувати» може означати зловмисне проникнення в програмну систему. Але «хакувати» також може означати щось більш буденне: писати комп’ютерний код.</p><p>Щось може бути «хакерським», тобто не дуже хорошим рішенням. А ще може бути «розумний хак» — геніальний трюк, щоб код працював ефективніше.</p><p>Коротше, не бійтеся цього слова.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/01/1200x-1_jpg__1200-797_.png" class="kg-image" alt="Image" width="600" height="400" loading="lazy"><figcaption>На кампусі компанії Facebook величезними літерами написано слово «hack» (зображення: Bloomberg)</figcaption></figure><p>Я майже не вживаю цього слова, бо воно заплутане. Мені здається, останнім часом хакерспейси звернули увагу на цю двозначність і тепер багато з них називаються «мейкерспейсами».</p><p>Адже саме в цьому і полягає суть хакерспейсу: у створенні чогось.</p><p>Стів запросив мене відвідати хакерспейс у суботу. Він сказав, що там буде кілька розробників з околиць.</p><p>Коли я вперше переступив поріг хакерспейсу, я був вражений.</p><p>У приміщенні пахло гаром від електрики. На імпровізованих столах лежали паяльники, смужки світлодіодних ламп, аматорські плати Arduino та купи роботів-пилососів Roomba.</p><p>Там був Стів, з яким я розмовляв по телефону, і він привітався зі мною. Він носив окуляри, мав зачесане назад волосся та борідку. Завжди посміхався. А коли його про щось запитували, то замість того, щоб відповісти одразу, він спочатку кивав головою й кілька секунд думав.</p><p>Стів обожнював програмування, а також вивчав математику і філософію в Каліфорнійському університеті в Санта-Барбарі. Він досі захоплюється цими предметами. Але його справжньою пристрастю був Python.</p><p>Стів увімкнув проєктор і провів коротку неформальну презентацію. Він продемонстрував написаний ним застосунок, який розпізнавав QR-коди у відео та замінював їх зображеннями.</p><p>Хтось із аудиторії відкрив QR-код на своєму ноутбуці й підніс його перед камерою. Застосунок Стіва замінив QR-код на зображення піци.</p><p>Хтось з аудиторії вигукнув:</p><p>— А можеш зробити так, щоб піца оберталася?</p><p>Стів відкрив свій код у редакторі Emacs і почав вносити зміни в режимі реального часу. Він з легкістю перемикався між редактором коду, командним рядком і браузером, у якому працював застосунок, завантажуючи оновлення коду.</p><p>Для мене це було справжнім чаклунством. Я не міг повірити, що Стів створив цей застосунок лише за кілька годин. А тепер він додавав нові функції на льоту, відповідно до запитів аудиторії.</p><p>Я подумав: він — геній.</p><p>Того ж вечора я йому сказав про це після закінчення заходу.</p><p>Ми разом їли сендвічі. І я сказав йому:</p><p>— Я міг би весь час програмувати і не досягти твого рівня. Для мене за щастя, якби через 10 років я міг програмувати хоча б наполовину, як ти.</p><p>Але Стів заперечив. Він сказав:</p><p>— Я нічим особливим не виділяюся. Ти обмежуєш себе, не треба так. Якщо ти продовжиш займатися програмуванням, то легко станеш кращим за мене.</p><p>Звісно, я й на секунду не повірив. Але сам факт, що він так сказав, викликав у мене трепет.</p><p>У мене повірив розробник. Він побачив мене — звичайного викладача, звичайного «кодового дитинча» — і вирішив, що у мене все вийде.</p><p>Ми з Стівом розмовляли до пізньої ночі. Він показав свій нетбук за 200 доларів, який навіть за стандартами 2011 року був слабким.</p><p>— Тобі не треба потужний комп’ютер, щоб створювати програмне забезпечення. Сучасне обладнання досить потужне. Комп’ютери повільні лише тому, що на них працює перевантажене програмне забезпечення. Купи готовий ноутбук, почисть жорсткий диск, встанови на нього Linux і починай програмувати.</p><p>Я запам’ятав модель його ноутбука і того ж вечора замовив такий самий.</p><p>Після кількох днів налагодження нового комп’ютера з допомогою Stack Overflow я успішно встановив Ubuntu. Тоді почав вивчати, як користуватися редактором коду Emacs. До наступної суботи я вже знав кілька команд і поспішив ними похвалитися.</p><p>Стів схвально кивнув. Він сказав:</p><p>— Супер. Але що ти створюєш?</p><p>Я не зрозумів, про що він:</p><p>— Я вчуся користуватися Emacs. Дивись. Я запам’ятав...</p><p>Стів задумався:</p><p>— Це все взагалі класно. Але тобі треба проєкт. Завжди май проєкт. А потім вчися тому, що потрібно для проєкту.</p><p>Окрім кількох скриптів, які я написав, щоб допомогти викладачам у школі, я нічого не доводив до кінця. Але я почав розуміти, про що говорив Стів.</p><p>І тут до мене дійшло. Весь час я був у «навчальному пеклі», кружляючи по колу й нічого не завершуючи.</p><p>Стів сказав:</p><p>— Хочу, щоб ти створив проєкт на HTML5, а наступної суботи презентував його в хакерспейсі.</p><p>Його слова шокували мене. Але я випрямив спину і сказав:</p><p>— Хороший план.</p><h3 id="--7"><strong><strong>За тебе ніхто </strong>розробником<strong> не стане</strong></strong></h3><blockquote><em>«Я намагаюся звільнити твій розум, Нео. Але я можу лише показати тобі двері. Ти сам повинен пройти через них» — Морфеус у фільмі «Матриця», 1999 рік</em></blockquote><p>Наступного ранку я дуже рано прокинувся і загуглив уроки з HTML5. Я вже багато чого знав з мого попереднього досвіду в «навчальному пеклі». Але замість того, щоб пропускати кроки, я просто сповільнив темп і слідував інструкціям, виконуючи кожну команду.</p><p>Зазвичай, закінчивши один урок, я просто шукав наступний. Але цього разу я почав експериментувати з кодом. У мене з’явилася проста ідея для проєкту. Я хотів створити сторінку з документацією про HTML5 і я збирався написати її виключно на HTML5.</p><p>Давайте швидко поясню, що таке HTML5: це просто нова версія HTML, який існує ще з часів перших вебсторінок 90-х.</p><p>Якщо вебсайт — це тіло, то HTML — його кістки. Все інше лежить поверх цих кісток (JavaScript можна вважати м’язами, а CSS — шкірою; але повернемося до історії).</p><p>Я знав, що в HTML можна посилатися на різні частини однієї вебсторінки, використовуючи id-властивості. Тож я подумав: а що, якби я розмістив зміст зліва? Тоді, натискаючи на різні пункти зліва, сторінка праворуч прокручувалася б вниз, щоб показати ці пункти.</p><p>За півгодини я написав прототип.</p><p>Але настав час вирушати на роботу до школи. Весь день я думав лише про свій проєкт і як його завершити.</p><p>Я побіг додому, відкрив ноутбук і провів увесь вечір за проєктом.</p><p>Я скопіював офіційну (і ліцензовану за Creative Commons) документацію HTML безпосередньо на свою сторінку, «вбудувавши» її в HTML.</p><p>Потім я витратив близько години на CSS, щоб все виглядало правильно, і використав абсолютне позиціонування, щоб бічна панель залишалася на місці.</p><p>Я постарався використати якомога більше нових «семантичних» тегів HTML5.</p><p>Проєкт готовий.</p><p>Яке ж задоволення я відчув! Побіг до найближчого футбольного поля і пробіг кілька кіл. Я це зробив. Я завершив проєкт.</p><p>Тоді я вирішив: відтепер усе, що я робитиму, буде проєктом. Я працюватиму над створенням кінцевого продукту.</p><p>Наступного вечора я підійшов до трибуни, підключив ноутбук і презентував свою вебсторінку. Я відповідав на всі запитання щодо HTML5.</p><p>Іноді я щось плутав і хтось з аудиторії казав:</p><p>— Неправильно. Дозвольте перевірити документацію.</p><p>Ніхто не боявся виправляти мене. Але вони були ввічливими і підтримували мене. Мені навіть не здавалося, що вони виправляють мене: виглядало так, що вони виправляють загальнодоступну інформацію, щоб ніхто не пішов з неправильними відомостями.</p><p>Не було тривожності, яку я міг відчути на засіданні викладачів.</p><p>Натомість я відчув себе частиною аудиторії, навчаючись разом із ними.</p><p>Зрештою, ці інструменти були новими і тільки починали набирати популярності. Ми всі намагалися зрозуміти, як їх використовувати.</p><p>Після моєї доповіді Стів підійшов до мене і сказав:</p><p>— Непогано.</p><p>Я посміхався (мабуть, надто довго) і нічого не відповів. Просто був задоволений собою.</p><p>Потім Стів примружився, стиснув губи і сказав:</p><p>— Починай наступний проєкт сьогодні ввечері.</p><h3 id="--8"><strong><strong>Мій шлях в програмуванні</strong></strong></h3><p>У наступних розділах ми будемо повертатися до історії молодого Квінсі та його шляху в програмуванні. Проте зараз я хочу розібрати деякі уроки та відповісти на кілька запитань, які могли у вас виникнути.</p><h3 id="--9"><strong><strong>Чому навчитися програмувати так важко?</strong></strong></h3><p>Освоїти будь-яке нове вміння — важко. Чи то вести м’яч у футболі, чи то міняти масло в машині, чи то вивчати нову мову.</p><p>Навчитися програмувати важко з кількох причин. Деякі з них притаманні саме програмуванню.</p><p>Перша причина: більшість людей не розуміє, що таке програмування насправді. Що ж, я розповім.</p><h3 id="--10"><strong><strong>Що таке програмування?</strong></strong></h3><p>Програмування — це вміння пояснити комп’ютеру його роботу таким чином, щоб він зрозумів.</p><p>Ось і все. В цьому полягає весь сенс програмування.</p><p>Але не зрозумійте неправильно. Спілкуватися з комп’ютерами важко. За людськими мірками вони «тупі». Вони роблять лише те, що ви їм скажете. Але — якщо ви не вмієте добре програмувати — вони, швидше за все, робитимуть не зовсім те, що вам <strong>потрібно</strong>.</p><p>Можливо, ви думаєте: а як щодо серверів? А баз даних? А мережі?</p><p>Зрештою, усім цим керують рівні програмного забезпечення. Іншими словами — код на усіх його етапах. Так ми і дійшли до фізичного обладнання, де електрони рухаються по платах.</p><p>У перші кілька десятиліть комп’ютеризації програмісти писали код, що був «близьким до заліза» — часто працюючи з апаратним забезпеченням напряму, змінюючи біти з 0 на 1 і навпаки.</p><p>Але сучасна розробка програмного забезпечення включає так багато «рівнів абстракції» — тобто програм, що працюють поверх інших програм, — що кілька рядків коду на JavaScript здатні робити дійсно потужні речі.</p><p>У 1960-х роках англійське слово «bug» означало комаху, що повзала всередині комп’ютера розміром із кімнату і згоряла на одній із плат.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/01/First_Computer_Bug-_1945.jpeg" class="kg-image" alt="Image" width="600" height="400" loading="lazy"><figcaption>Першим комп’ютерним багом (виявленим у 1945 році) була міль, що потрапила всередину панелей комп’ютера-калькулятора розміром із кімнату в Гарварді. <em>(Зображення: суспільне надбання)</em></figcaption></figure><p>Сьогодні ми пишемо код на багатьох рівнях абстракції вище фізичного обладнання.</p><p>Ось що таке програмування. Воно значно простіше, ніж було раніше, і з кожним роком стає ще легшим.</p><p>Я не перебільшую, коли кажу, що через кілька десятиліть програмування буде настільки простим і поширеним, що більшість молоді знатиме, як це робити.</p><h2 id="--11"><strong><strong>Чому навчитися програмувати досі так важко?</strong></strong></h2><p>Є три головні причини, чому навчитися програмувати складно навіть сьогодні:</p><ol><li>Інструменти досі примітивні.</li><li>Більшість людей погано справляється з невизначеністю, а вчитися програмувати — це суцільна невизначеність. Люди губляться.</li><li>Більшість людей погано сприймає постійний негативний зворотний зв’язок. Вчитися програмувати — це постійні повідомлення про помилки. Люди втрачають терпець.</li></ol><p>Тепер я детальніше розгляну ці труднощі і запропоную кілька практичних стратегій для подолання кожної з них.</p><h3 id="--12"><strong><strong>Інструменти </strong>досі<strong> примітивні</strong></strong></h3><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/01/TNG-S4E19-171.jpeg" class="kg-image" alt="Image" width="600" height="400" loading="lazy"><figcaption>Одержимий Барклай із серіалу «Зоряний шлях: Наступне покоління», що програмує на голодеку.</figcaption></figure><blockquote><em>«Комп’ютере. Почати нову програму. Створити наступне. Крісло біля робочого місця. Тепер створити стандартну алфавітно-цифрову консоль, розміщену ліворуч. Тепер легендарну дисплейну консоль для правої руки. Підключити обидві консолі до головного комп’ютерного ядра "Ентерпрайзу", використовуючи нейросканувальний інтерфейс»</em> — Барклі з серіалу «Зоряний шлях: Нове покоління», 4 сезон 19 серія: «Ступінь N»</blockquote><p>Саме так люди зможуть програмувати в майбутньому. Це приклад із мого улюбленого науково-фантастичного серіалу — «Зоряний шлях: Нове покоління».</p><p>Кожен персонаж у «Зоряному шляху» вміє програмувати. Лікарі, офіцери, пілоти. Навіть маленький Веслі Крашер (якого грає юний актор Віл Вітон) може змусити корабельний комп’ютер виконувати його команди.</p><p>Звісно, одна з причин, чому всі вміють програмувати, полягає в тому, що вони живуть у суспільстві XXIV століття без дефіциту ресурсів і з доступом до безоплатної якісної освіти.</p><p>Ще одна причина — у майбутньому програмування буде набагато простішим. Ви просто кажете комп’ютеру, що потрібно зробити, і — якщо формулюєте свій запит достатньо точно — комп’ютер все виконує.</p><p>А що, якби програмування було таким же простим, як звичайне пояснення завдання комп’ютеру людською мовою?</p><p>Ми вже досягли значного прогресу в цьому напрямку. Згадайте наших бабусь, які бігали між величезними мейнфреймами з цілими стосами перфокарт.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/01/naca-computer-operates-an-ibm-telereader-5b6f9f-1024.jpeg" class="kg-image" alt="Image" width="600" height="400" loading="lazy"><figcaption>Робота з комп’ютером на перфокартах у 1950-х (Зображення: NASA)</figcaption></figure><p>Колись програмування навіть найпростішого застосунку вимагало ретельно виписаних інструкцій.</p><p>Ось два приклади «Шифру Цезаря» — класичного навчального проєкту з інформатики.</p><p>Його також називають «ROT-13». Вам потрібно зсувати літери на 13 позицій. Наприклад, A стає N (13 літер після A), а B стає O (13 літер після B).</p><p>Покажу два приклади цієї програми.</p><p>Спочатку — програма на мові асемблера x86:</p><pre><code class="language-x86">format     ELF     executable 3
entry     start

segment    readable writeable
buf    rb    1

segment    readable executable
start:    mov    eax, 3        ; syscall "read"
    mov    ebx, 0        ; stdin
    mov    ecx, buf    ; buffer for read byte
    mov    edx, 1        ; len (read one byte)
    int    80h

    cmp    eax, 0        ; EOF?
    jz    exit

    xor     eax, eax    ; load read char to eax
    mov    al, [buf]
    cmp    eax, "A"    ; see if it is in ascii a-z or A-Z
    jl    print
    cmp    eax, "z"
    jg    print
    cmp    eax, "Z"
    jle    rotup
    cmp    eax, "a"
    jge    rotlow
    jmp    print

rotup:    sub    eax, "A"-13    ; do rot 13 for A-Z
    cdq
    mov    ebx, 26
    div    ebx
    add    edx, "A"
    jmp    rotend

rotlow:    sub    eax, "a"-13    ; do rot 13 for a-z
    cdq
    mov    ebx, 26
    div    ebx
    add    edx, "a"

rotend:    mov    [buf], dl

print:     mov    eax, 4        ; syscall write
    mov    ebx, 1        ; stdout
    mov    ecx, buf    ; *char
    mov    edx, 1        ; string length
    int    80h

    jmp    start

exit:     mov     eax,1        ; syscall exit
    xor     ebx,ebx        ; exit code
    int     80h
</code></pre><p>Цей приклад на мові асемблера x86 взято з проєкту Rosetta Code під ліцензією Creative Commons.</p><p>А ось та сама програма, написана на Python:</p><pre><code class="language-py">def rot13(text):
    result = []

    for char in text:
        ascii_value = ord(char)

        if 'A' &lt;= char &lt;= 'Z':
            result.append(chr((ascii_value - ord('A') + 13) % 26 + ord('A')))
        elif 'a' &lt;= char &lt;= 'z':
            result.append(chr((ascii_value - ord('a') + 13) % 26 + ord('a')))
        else:
            result.append(char)

    return ''.join(result)

if __name__ == "__main__":
    input_text = input("Enter text to be encoded/decoded with ROT-13: ")
    print("Encoded/Decoded text:", rot13(input_text))
</code></pre><p>Значно простіше і легше читати, правда?</p><p>Цей приклад на Python створив GPT-4. Я поставив запит так само, як капітан Пікар звертається до корабельного комп’ютера в «Зоряному шляху».</p><p>Ось що я написав: «Комп’ютере. Нова програма. Візьми кожну літеру слова, яке я скажу, і заміни її на літеру, що стоїть на 13 позицій пізніше в алфавіті. Потім зачитай мені результат. Слово — Banana».</p><p>GPT-4 написав код на Python, а потім зачитав мені результат: «Onanan».</p><p>Саме це називається декларативним програмуванням. Ми проголошуємо: «Комп’ютере, ти маєш зробити ось це». Комп’ютер досить розумний, щоб зрозуміти наші інструкції та виконати їх.</p><p>Натомість більшість розробників сьогодні користується імперативним програмуванням. Ми детально говоримо комп’ютеру про його дії, тому що історично комп’ютери були досить «тупими». Тому нам доводилося буквально пояснювати крок за кроком.</p><p>Галузь розробки програмного забезпечення поки не досягла зрілості.</p><p>Але так само, як вдосконалювалися ранні людські інструменти — від каменю до бронзи, від бронзи до заліза — те саме відбувається з інструментами програмування. Але набагато швидше.</p><p>Мабуть, зараз ми досі перебуваємо в епосі, що відповідає бронзовому віку програмування. Але залізного віку ми можемо досягти ще за нашого життя. Інструменти генеративного ШІ, як-от GPT, стрімко стають потужнішими та надійнішими.</p><p>Спільнота розробників досі розділена щодо того, наскільки корисними такі інструменти будуть для розробки програмного забезпечення.</p><p>З одного боку — підприємці-інфлюенсери, які просувають ідею «стань власним босом» та кажуть щось на кшталт:</p><p>— Вам більше не потрібно вчитися програмувати. ChatGPT напише весь код за вас. Вам потрібна лише ідея для застосунку.</p><p>З іншого боку — «стара гвардія» розробників із десятиліттями досвіду у програмуванні, багато з яких скептично ставляться до того, чи справді ці інструменти настільки корисні для написання коду виробничого рівня.</p><p>Як і в більшості випадків, справжня відповідь десь посередині.</p><p>На YouTube легко знайти відео, де люди починають з ідеї застосунку, а потім запитують ChatGPT про потрібний код. Деякі люди навіть можуть взяти цей код і зробити з нього робочий застосунок.</p><p>Великі мовні моделі, як-от GPT-4, вражають, а швидкість їхнього вдосконалення вражає ще більше.</p><p>Проте багато розробників скептично ставляться до того, наскільки корисними ці інструменти зрештою стануть. Вони сумніваються, чи вдасться змусити ШІ припинити «галюцинувати» (тобто видавати хибну інформацію).</p><p>Це фундаментальна проблема «інтерпретованості». Можуть пройти десятиліття, перш ніж ми по-справжньому зрозуміємо, що відбувається всередині такого «чорного ящика», як GPT-4. А до того часу нам варто перевіряти все, що він каже, та розуміти, що в наданому коді буде чимало помилок і недоліків безпеки.</p><p>Між тим, щоб попросити комп’ютер зробити щось, і тим, щоб справді розуміти, як він це робить, — велика різниця.</p><p>Багато людей вміють керувати автомобілем, але значно менше здатні його полагодити. Не кажу вже про те, щоб зібрати новий автомобіль з нуля.</p><p>Якщо ви хочете розробляти потужні програми, які вирішують проблеми — і хочете, щоб ці системи були швидкими та захищеними — вам все одно потрібно навчитися програмувати.</p><p>А це означає прокладати свій шлях крізь велику невизначеність.</p><h3 id="--13"><strong>Вчитись<strong> програмувати </strong>—<strong> це неоднозначний процес</strong></strong></h3><p>Коли ви вчитеся програмувати, то постійно запитуєте себе: «Я розумно витрачаю свій час? Я вивчаю правильні інструменти? Автори книг і курсів взагалі розуміють, про що говорять?»</p><p>Невизначеність затьмарює кожне навчальне заняття. «Тестування провалено через те, що урок застарів і у фреймворку, який я використовую, відбулися критично важливі зміни? Чи я просто роблю щось не так?»</p><p>Як я вже згадував у «навчальному пеклі», вам також доведеться боротися з проблемою «в інших справи краще».</p><p>Усе ускладнюється ще й тим, що деякі розробники вважають дотепним відповідати на запитання абревіатурою «RTFM» (акронім від англ. <em><em>Read The Fucking Manual</em></em> — «читай чортів посібник»). Зовсім не допомогло. Який посібник? Який розділ?</p><p>Ще одна проблема: ви не знаєте, чого саме не знаєте. Часто навіть не можете сформулювати запитання, яке намагаєтеся поставити.</p><p>А якщо ви навіть не можете поставити правильне запитання, то будете топтатися на місці.</p><p>З програмуванням це особливо важко, адже цілком можливо, що ніхто ще не намагався створити саме такий застосунок, який розробляєте ви.</p><p>Тож деякі проблеми, які вам трапляються, можуть бути безпрецедентними. Цілком можливо, що вам не буде до кого звернутися.</p><p>15% запитів, які люди гуглять щодня, — це запити, які шукають вперше. Погана новина, якщо ви ця людина.</p><p>Моя теорія така: більшість розробників вирішують проблему і просто рухаються далі, так і не задокументувавши розв’язок. Тож ви можете бути одним із десяти розробників, яким довелося самостійно вигадувати розв’язок спільної проблеми.</p><p>Ну, звісно, існують ще старі теми на форумах і архів Stack Overflow.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/01/wisdom_of_the_ancients_png__485-270_.png" class="kg-image" alt="Image" width="600" height="400" loading="lazy"><figcaption>Комікс XKCD</figcaption></figure><h3 id="--14"><strong><strong>Як не заплутатися, коли вчишся програмувати</strong></strong></h3><p>Хороша новина: і <strong>компетентність</strong>, і <strong>впевненість</strong> приходять із практикою.</p><p>Невдовзі ви точно знатимете, що гуглити. У вас з’явиться інтуїція щодо того, як зазвичай структурована документація і що де шукати. Ви знатимете, куди і з якими питаннями звертатися.</p><p>Хотілося б, щоб існував простіший розв’язок проблеми невизначеності. Але вам просто потрібно її прийняти. Вчитися програмувати — це неоднозначний процес, і навіть досвідчені розробники борються з невизначеністю.</p><p>Зрештою, розробник — це одна з небагатьох професій, де можна повторно використовувати розв’язок проблем, які вже траплялися раніше.</p><p>Тому розробники завжди роблять щось, чого ніколи раніше не робили.</p><p>Люди думають, що розробка програмного забезпечення — це набір коду в комп’ютері. Але насправді це навчання.</p><p>Ви витратите величезну частину своєї кар’єри просто на те, щоб напружено думати або наосліп вводити команди в командний рядок, намагаючись зрозуміти, як працює система.</p><p>І ви витратите чимало часу на зустрічі з іншими людьми (менеджерами, клієнтами, колегами) для вивчення проблеми, щоб потім створити її розв’язок.</p><p>Навчіться почуватися комфортно в умовах невизначеності і ви багато досягнете.</p><h3 id="--15"><strong><strong>Вчитися програмувати — це одна помилка за іншою</strong></strong></h3><p>Багато людей, які вчаться програмувати, почуваються загнаними в глухий кут. Прогрес йде не так швидко, як вони очікували.</p><p>Одна з головних причин — у програмуванні цикл зворотного зв’язку набагато коротший, ніж в інших галузях.</p><p>У більшості навчальних закладів викладач дає завдання, потім перевіряє його і повертає назад. Протягом семестру ви можете отримати зворотний зв’язок лише десять разів.</p><p>Ви подумаєте: «О ні, екзамен провалено, треба краще вчитися до заліку».</p><p>Викладач може залишити нотатки червоною ручкою, щоб допомогти вам.</p><p>Погана оцінка за екзамен чи письмову роботу може зіпсувати день.</p><p>Зазвичай ми сприймаємо зворотний зв’язок саме так.</p><p>Якщо ви хоч трохи програмували, то знаєте, що комп’ютери працюють дуже швидко. Вони можуть виконати код за кілька мілісекунд.</p><p>Але найчастіше код не працюватиме.</p><p>Якщо вам пощастить, то на екрані з’явиться повідомлення про помилку.</p><p>А якщо пощастить по-справжньому, то на екрані з’явиться «трасування стека» — тобто все, що комп’ютер намагався зробити в момент, коли натрапив на помилку, — разом із номером рядка коду, що спричинив збій програми.</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2023/01/oh-my-zsh-stack-trace-error.jpg" class="kg-image" alt="A stack trace error message while running freeCodeCamp locally." width="600" height="400" loading="lazy"></figure><p>Отакий різкий негативний зворотний зв’язок від комп’ютера. Не кожен може витримати, коли бачить це знову і знову цілий день.</p><p>Уявіть, як щоразу, коли ви здаєте викладачу свою роботу, він одразу ж повертає її з великою червоною двійкою. А тепер уявіть, що він робить це швидше, ніж ви встигаєте кліпнути оком. Знову і знову.</p><p>Саме так інколи відчувається програмування. Хочеться схопити комп’ютер і накричати на нього: «Чому ти не розумієш, що я намагаюся зробити?»</p><h3 id="--16"><strong><strong>Як не впасти у відчай</strong></strong></h3><p>Знову ж таки, головне — це практика.</p><p>З часом у вас виробиться стійкість до повідомлень про помилки та трасування стека на весь екран.</p><p>Програмування ніколи не буде таким важким, як на самому початку.</p><p>Ви не лише не знаєте, що робите, а й не звикли отримувати такий безособовий, безперервний негативний зворотний зв’язок.</p><p>Тож кілька порад:</p><h4 id="-1-"><strong><strong>Порада №1: </strong>п<strong>ам</strong>’<strong>ятайте</strong>, що<strong> ви не гірші за інших</strong></strong></h4><p>Кожен, хто вчиться програмувати, стикається з розчаруванням від спроб злитися розумом із комп’ютером і домогтися порозуміння (ще один натяк на «Зоряний шлях»).</p><p>Звісно, деякі люди почали програмувати ще дітьми. Вони можуть поводитися так, ніби завжди вміли програмувати. Але, швидше за все, вони так само страждали і з часом просто забули про години розчарування.</p><p>Сприймайте комп’ютер як свого друга, а не супротивника. Він просто просить уточнити інструкції.</p><h4 id="-2-"><strong><strong>Порада №2: </strong>д<strong>ихайте</strong></strong></h4><p>У багатьох людей природна реакція на повідомлення про помилку — скреготати зубами. Потім повернутися до редактора коду і почати навмання змінювати код, сподіваючись якимось чином випадково виправити його.</p><p>Так не працює. Поясню причину.</p><p>Всесвіт складний. Програмне забезпечення складне. Навряд чи вам вдасться просто натрапити на щось вартісне, як Форресту Ґампу.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/01/gump.jpeg" class="kg-image" alt="Image" width="600" height="400" loading="lazy"><figcaption>Форрест Ґамп робить все по-своєму, але йому завжди вдається виловити найбільше креветок.</figcaption></figure><p>Можливо, ви чули теорему про нескінченну мавпу. Це експеримент, де ви уявляєте шимпанзе, що друкують на друкарських машинках.</p><p>Якби у вас була ціла кімната з такими мавпами, то скільки часу знадобилося б, щоб одна із них випадково надрукувала фразу «бути чи не бути»?</p><p>Припустимо, що кожна мавпа друкує один випадковий символ за секунду. Швидше за все, знадобилось би квінтильйон років, щоб одна з них надрукувала «бути чи не бути». Це 10 у 18-му ступені. Мільярд мільярдів.</p><p>Навіть якщо припустити, що мавпи залишаються здоровими, а друкарські машинки регулярно обслуговуються — галактика перетворилася б на холодну темну порожнечу ще до того, як одна з них впоралася б із завданням.</p><p>Навіщо я вам це розповідаю? Тому що не потрібно бути однією з тих мавп.</p><p>За цей час ви, напевно, змогли б знайти спосіб навчити тих мавп друкувати слова. Вони, мабуть, зуміли б надрукувати весь «Гамлет», а не лише його найвідомішу фразу.</p><p>Навіть якщо вам якимось чином пощастить і ви вирішите помилку, чого ви навчитеся?</p><p>Тож замість того, щоб діяти навмання, варто витратити трохи часу. Зрозуміти код. Зрозуміти, що відбувається. І тільки тоді виправляти помилку.</p><p>Завжди знаходьте час, щоб розібратися в коді, який не працює. Не будьте квінтильйонарною мавпою (гадаю, це слово означає когось, кому квінтильйон років, хоча за даними Google ніхто раніше не шукав це слово).</p><p>Замість того, щоб навмання перебирати варіанти в надії вирішити помилку, — пригальмуйте.</p><p>Зробіть глибокий вдих. Розімніть м’язи. Налийте чашку гарячого напою.</p><p>Ваше майбутнє «я» буде вдячне, що ви скористалися цим моментом як можливістю чогось навчитися.</p><h4 id="-3-"><strong><strong>Порада №3: </strong>в<strong>икористовуйте метод </strong>каченяти</strong></h4><p>Поставте гумову качечку біля комп’ютера. Щоразу, коли висвічується повідомлення про помилку, спробуйте пояснити качечці, що відбувається.</p><p>Звісно, звучить безглуздо. Як це може бути корисним?</p><p>Але це працює.</p><p>Метод каченяти — чудовий інструмент, щоб сповільнитися і проговорити проблему вголос.</p><p>Звісно, зовсім не обов’язково використовувати саме качечку. Можна пояснювати улюблену програму на Python улюбленому кактусу або SQL-запит кішці, яка постійно стрибає на клавіатуру.</p><p>Сам факт того, що ви пояснюєте думки вголос, допомагає краще осмислити ситуацію.</p><h3 id="--17"><strong><strong>Як більшість людей вчиться програмувати?</strong></strong></h3><p>Тепер поговоримо про традиційні шляхи до першої роботи розробника.</p><p>Навіщо вам знати, що роблять інші? Спойлер: насправді вам це не потрібно.</p><p>Робіть так, як підходить саме <strong>вам</strong>.</p><p>Ви можете сумніватися в собі та рішеннях, які прийняли щодо навчання. Можливо, вас буде вабити шлях, який ви не обрали.</p><p>Моя мета в цьому розділі — розвіяти будь-які тривожні думки, які могли виникнути.</p><h4 id="--18"><strong><strong>Важливість</strong> наукових<strong> ступенів у галузі комп</strong>’<strong>ютерних наук</strong></strong></h4><p>Дипломи досі залишаються золотим стандартом підготовки до кар’єри в ІТ. Особливо ступінь бакалавра з комп’ютерних наук.</p><p>Перш ніж ви скажете: «Але у мене немає диплома з комп’ютерних наук» — не хвилюйтеся. <strong>Він вам не потрібен, щоб стати розробником.</strong></p><p>Але їхня користь беззаперечна. Поясню причину.</p><p>По-перше, ви можете запитати: навіщо розробникам вивчати комп’ютерні науки? Навіть один із найвидатніших розробників усіх часів висловився про цю галузь так:</p><blockquote>«Освіта в галузі комп’ютерних наук може створити хорошого розробника так само, як знання про пензлі і пігменти можуть створити хорошого художника» — Ерік Реймонд (розробник, вчений-інформатик і письменник)</blockquote><p>Кафедри комп’ютерних наук традиційно були частиною математичних факультетів. У 60-х і 70-х університети не зовсім розуміли, куди подіти комп’ютерну справу.</p><p>В інших університетах комп’ютерні науки вважалися розширенням електротехніки. Ще зовсім недавно навіть Каліфорнійський університет у Берклі — один із найкращих державних університетів світу — пропонував ступінь з комп’ютерних наук лише як подвійний диплом разом із електротехнікою.</p><p>Але зараз більшість університетів усвідомила важливість комп’ютерних наук як галузі знань.</p><p>На момент написання цього тексту комп’ютерні науки — це спеціальність із найвищим рівнем оплати праці. Вищим навіть за спеціальності, безпосередньо пов’язані з грошима (такі як фінанси та економіка).</p><p><a href="https://www.glassdoor.com/blog/50-highest-paying-college-majors/">За даними Glassdoor</a>, випускники американських університетів зі спеціальністю «Комп’ютерні науки» отримують вищу зарплату на першій роботі, ніж представники будь-якої іншої спеціальності. Сімдесят тисяч доларів США. Багато для людини, яка щойно закінчила коледж.</p><p>Більше ніж у випускників за спеціальностями «Сестринська справа» (59 000 $), «Фінанси» (55 000 $) та «Архітектура» (50 000 $).</p><p>Отже, диплом з комп’ютерних наук може допомогти отримати високооплачувану роботу початкового рівня. Мабуть, нікого не здивує. Але чому так?</p><h4 id="--19"><strong><strong>Як роботодавці ставляться до ступеня бакалавра</strong></strong></h4><p>Можливо, ви чули, як великі технологічні компанії заявляли щось на кшталт: «Ми більше не вимагаємо від кандидатів ступеня бакалавра».</p><p>Так казали в Google. Так казали в Apple.</p><p>Я вірю, що вони більше не вимагають ступеня бакалавра.</p><p>Чимало випускників freeCodeCamp влаштувалися в ці компанії і деякі з них не мали диплому.</p><p>Але ті випускники freeCodeCamp були особливо сильними кандидатами, щоб компенсувати відсутність наукового ступеня.</p><p>Ці вакансії можна розглядати як такі, що оцінюють кандидатів за різними критеріями:</p><ol><li>Досвід роботи</li><li>Освіта</li><li>Портфоліо та проєкти</li><li>Чи є рекомендація від когось, хто вже працює в компанії? (нетворкінг розглянемо в другому розділі)</li><li>Інші репутаційні чинники (репутацію розглянемо в третьому розділі)</li></ol><p>Для роботодавців, які не вимагають ступеня бакалавра, освіта — лише один із кількох критеріїв. Якщо ви сильніші в інших аспектах, вас можуть запросити на співбесіду — незалежно від того, чи ви взагалі переступали поріг університетської аудиторії.</p><p>Майте на увазі: зі ступенем бакалавра легше потрапити на співбесіду навіть до тих роботодавців, де диплом не є обов’язковим.</p><h4 id="--20"><strong><strong>Чому так багато вакансій вимагають ступеня </strong>саме <strong>з комп’ютерних наук?</strong></strong></h4><p>«Бакалавр — це бакалавр», — часто кажу я людям. Тому що для більшості практичних цілей так воно і є.</p><p>Хочете вступити до армії офіцером, а не солдатом? Вам знадобиться ступінь бакалавра (підійде будь-яка спеціальність).</p><p>Хочете отримати робочу візу для роботи за кордоном? Вам, мабуть, знадобиться ступінь бакалавра (підійде будь-яка спеціальність).</p><p>Для більшості вакансій, де написано про обов’язкову вищу освіту, підійде будь-яка спеціальність.</p><p>Чому так? Хіба спеціальність взагалі не має значення?</p><p>Що ж, ось моя теорія: важливо те, що ви взагалі закінчили університет, а не те, що ви вивчали.</p><p>Роботодавці намагаються відібрати людей, які здатні знайти спосіб пройти цей обряд посвяти.</p><p>Звісно, можна бути найгіршим у групі, повторно складати провалені дисципліни і перебувати під академічним наглядом пів навчання. Але диплом — це диплом.</p><p>Знаєте, як називають студента, який закінчив медичний університет з найгіршими балами серед своєї групи? <strong><strong>Лікар</strong>.</strong></p><p>Так працює для більшості роботодавців.</p><p>HR-спеціалісти часто просто ставлять галочку для фільтрації заявок. Вони відсіюють претендентів без диплома. Тобто вони можуть навіть не побачити заявки від людей без диплома.</p><p>Знову ж таки, не кожен роботодавець такий. Але — у США, і, мабуть, ще більшою мірою в інших країнах — багато хто саме такий.</p><p>Прикро, але так працює ринок праці. Можливо, це зміниться протягом наступних кількох десятиліть.</p><p>Тому я завжди раджу людям підліткового та двадцятирічного віку серйозно подумати над ступенем бакалавра.</p><p>Не через те, як університети рекламують себе:</p><ul><li>В першу чергу — освіта (ви можете безоплатно проходити курси деяких із найкращих університетів онлайн, тож цей факт не виправдовує високу вартість навчання).</li><li>«Студентський досвід»: життя в гуртожитку, нові друзі та самопізнання (більшість студентів в Америці ніколи не живуть в кампусі, тож насправді вони й цього не отримують).</li><li>Загальноосвітні курси, що допомагають стати «різнобічною особистістю» (чули про «перший курс і плюс сім кілограмів»? Це жарт, звісно. Але багато першокурсників справді набирають вагу через стрес від навчання).</li></ul><p>Знову ж таки, справжня цінність ступеня бакалавра — справжня причина, чому люди витрачають великі гроші за чотири роки навчання в університеті — полягає в тому, що багато роботодавців вимагають диплом.</p><p>Звісно, є й інші переваги ступеня бакалавра — такі, як я вже згадував: розширені можливості військової кар’єри та спрощення процесу отримання робочої візи.</p><p>Гаразд, багато фонової інформації. Тож дозвольте відповісти на запитання прямо.</p><h3 id="--21"><strong><strong>Чи </strong>треба<strong> диплом, щоб працювати розробником?</strong></strong></h3><p>Ні. Багато роботодавців наймуть вас без ступеня бакалавра.</p><p>З дипломом значно легше потрапити на співбесіду в багатьох компаніях, а також отримати вищу зарплату.</p><h3 id="--22"><strong><strong>А як щодо ступеня молодшого спеціаліста? </strong>В<strong>ін цінний?</strong></strong></h3><p>Теоретично, так. У деяких ІТ-галузях обов’язковий ступінь молодшого спеціаліста і я вважаю, що він підвищує шанси потрапити на співбесіду.</p><p>Проте я би не рекомендував вступати до університету лише з метою отримати ступінь молодшого спеціаліста. Я на всі 100% заохочую до отримання ступеня бакалавра, бо він значно корисніший.</p><p>За даними Міністерства освіти США, заробіток бакалавра на 31% більший за заробіток молодшого спеціаліста.</p><p>Я впевнений, що ця різниця набагато більша для ступеня бакалавра з комп’ютерних наук.</p><h3 id="--23"><strong><strong>Чи варто вступати до університету, щоб отримати ступінь бакалавра у дорослому віці?</strong></strong></h3><p>Припустимо, вам за тридцять. Можливо, ви відвідували деякі курси. Можливо, ви завершили перші два роки і отримали ступінь молодшого спеціаліста.</p><p>Чи є сенс «повертатися до навчання» у формальному розумінні?</p><p>Так.</p><p>Але, думаю, немає сенсу кидати роботу для того, щоб повернутися до навчання на денній формі.</p><p>Спосіб життя на денній формі навчання насправді розрахований для «традиційних» студентів. Тобто людей віком від 18 до 22 років, які ще не вийшли на ринок праці поза межами старшої школи чи літнього підробітку.</p><p>Традиційні університети коштують чимало, тож очікувано, що студенти платитимуть за рахунок стипендій, сімейних коштів і студентських позик.</p><p>Як доросла людина з роботою, у вас буде менший доступ до цих джерел фінансування. До того ж у вас буде менше вільного часу, ніж у тих, хто нещодавно випустився зі школи.</p><p>Але це не означає, що потрібно відмовитися від мрії отримати ступінь бакалавра.</p><p>Замість того, щоб вступати до традиційного університету, я рекомендую людям [старшим за 30 років] розглянути один із некомерційних онлайн-університетів. Western Governor’s University та University of the People — два університети, які мають хорошу репутацію і цілком доступну вартість навчання.</p><p>Щоб отримати диплом, також можна обрати місцевий коледж або спеціалізовану програму державного університету. Багато таких програм проходять онлайн, а деякі з них навіть пропонують заочну форму навчання.</p><p>Підшукайте собі варіанти. Якщо знайдете перспективний навчальний заклад, рекомендую знайти когось із випускників і зв’язатися з ними, щоб розпитати про їхній досвід.</p><p>Я не рекомендую брати позики заради диплома. Набагато краще навчатися в дешевшому закладі. Зрештою, диплом — це диплом. Достатньо того, що він від акредитованого закладу.</p><h3 id="--24"><strong><strong>Якщо вже є ступінь бакалавра, чи є сенс </strong>отримати<strong> ступінь бакалавра з комп’ютерних наук?</strong></strong></h3><p>Ні. Другий ступінь бакалавра майже ніколи не вартий витраченого часу та грошей.</p><p>Якщо у вас є будь-який ступінь бакалавра — навіть не з галузі STEM — ви вже отримали цінність, яку може дати університет.</p><h3 id="--25"><strong><strong>А як щодо ступеня магістра з комп’ютерних наук?</strong></strong></h3><p>Ступінь магістра може бути корисним для кар’єрного зростання. Але його варто здобувати тоді, коли вже працюєте розробником.</p><p>Багато роботодавців оплачують підвищення кваліфікації своїх працівників.</p><p>Багато моїх друзів навчались на магістратурі з комп’ютерних наук у Технологічному інституті Джорджії.</p><p>Ця кафедра вважається однією з найкращих у США. Сама програма не лише повністю онлайн, а й досить доступна за ціною.</p><p>Але я б не рекомендував займатися цим зараз. Спочатку зосередьтеся на тому, щоб отримати роботу (ми детально розглянемо цю тему пізніше).</p><h3 id="--26"><strong>Д<strong>ипломи </strong>будуть <strong>важливими в майбутньому?</strong></strong></h3><p>Так. Я вважаю, що дипломи будуть важливими ще десятиліттями (можливо, і століттями).</p><p>Дипломи існують вже більше тисячі років.</p><p>Багато провідних американських університетів старші за США (Гарварду більше 400 років).</p><p>«Відмирання» дипломів перебільшують.</p><p>У деяких колах стало модним критикувати університети і стверджувати, що наукові ступені більше не важливі.</p><p>Але — якщо подивитися на статистику — це явно не так. Дипломи дійсно впливають на заробіток протягом життя.</p><p>Що не менш важливо, вони можуть забезпечити безпечнішу, стабільнішу та загалом кращу кар’єру.</p><p>Звісно, можна непогано заробляти матросом на офшорних платформах, обслуговуючи нафтові вишки.</p><p>Але можна так само непогано заробляти розробником у кімнаті з кондиціонером, обслуговуючи сервери і виправляючи кодові бази.</p><p>Одна з цих робіт — небезпечна, виснажлива праця. Інша — робота, якою ви могли б комфортно займатися 40 років.</p><p>Багато «лідерів думок», які критикують університетську освіту, самі ж нею і скористалися.</p><p>На мою думку, багато людей вважають дипломи «непотрібними», бо навчання важко відокремити від підвищення статусу, яке ви отримуєте разом із ним.</p><p>Університет — це спосіб представити свій клас? Зрештою, шанси зустріти в Гарварді вихідця з багатої сім’ї втричі вищі, ніж з бідної.</p><p>Факт такий: життя є фундаментально несправедливим. Але це не змінює того, як працює ринок праці.</p><p>Ви можете обрати легкий режим і отримати диплом, що дасть більше можливостей у майбутньому.</p><p>Або ви можете обрати важкий режим — потенційно заощадивши час та гроші — і просто бути вибірковішими щодо роботодавців, до яких подаєтеся.</p><p>У мене є чимало друзів, які успішно скористалися обома підходами.</p><h3 id="--27"><strong><strong>Які альтернативи диплому?</strong></strong></h3><p>Я займаюся освітою для дорослих майже два десятиліття і досі не бачив переконливої заміни наукового ступеня.</p><p>Звісно, існують сертифікаційні програми та інтенсиви.</p><p>Але вони не мають такої ж цінності для роботодавців і рідко бувають такими ж вимогливими.</p><p><em>Примітка: коли я кажу «сертифікаційні програми», я маю на увазі програми, де ви проходите курс, а наприкінці отримуєте сертифікат. Вони мають обмежену цінність. Але іспитові сертифікати від таких компаній, як Amazon і Microsoft, є досить цінними. Ми детальніше розглянемо їх пізніше.</em></p><p>Я кажу людям: «Мати диплом чи не мати — ось питання».</p><p>Я зустрічав багато автомеханіків, електриків та інших фахівців без ступеня бакалавра. Вони вміють опанувати набір навичок, застосовувати його і заробляти на цьому.</p><p>Я зустрічав багато бухгалтерів, помічників юриста та інших «працівників розумової праці» без ступеня бакалавра. Вони вміють опанувати набір навичок, застосовувати його і заробляти на цьому.</p><p>У багатьох випадках ці люди можуть просто самостійно навчитися програмувати, використовуючи безоплатні навчальні ресурси та спілкуючись із однодумцями.</p><p>Деякі з них завжди мали особисту мету — повернутися і таки отримати ступінь бакалавра. Хороша причина, щоб так зробити.</p><p>Але так не підходить кожному.</p><p>Якщо хочете формальної освіти — здобувайте ступінь бакалавра. Якщо не хочете формальної освіти — нікуди не вступайте, а просто вчіться самостійно.</p><p>Головне, що дадуть інтенсиви та інші програми, — це структура і трохи соціального тиску. Це непогано. Але чи вартує більше тисячі доларів?</p><h3 id="--28"><strong>Як навчитись програмувати</strong></h3><p>Більшість розробників навчились програмувати самостійно. Навіть ті, хто отримали диплом бакалавра з комп’ютерних наук, часто вказують в опитуваннях, що вони «самоучки».</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/01/stack-overflow.jpeg" class="kg-image" alt="Image" width="600" height="400" loading="lazy"><figcaption>Більшість розробників вважають себе «самоучками» (Джерело: опитування Stack Overflow за 2016 рік)</figcaption></figure><p>Причина в тому, що вивчення програмування — це процес, який триває все життя. Постійно з’являються нові інструменти, які потрібно освоїти, нові кодові бази, які потрібно розібрати та нові проблеми, які потрібно розв’язати.</p><p>Тож незалежно від того, здобуваєте ви формальну освіту чи ні, майте на увазі: вам доведеться вчитися самостійно.</p><h4 id="--29"><strong><strong>Що означає бути </strong>розробником<strong>-самоучкою?</strong></strong></h4><p>Не хочу здаватися занудою, але коли я говорю про самостійне навчання, то маю на увазі навчання поза межами формальної освіти.</p><p>Насправді, у будь-якій справі мало «самоучок». Наприклад, Ісаак Ньютон самостійно опанував інтегральне і диференціальне числення, оскільки тоді не існувало підручників з цієї дисципліни. Йому довелося розбиратися по ходу роботи.</p><p>Так само Ада Лавлейс самостійно навчилася програмувати, адже до неї програмування не існувало. Вона його винайшла.</p><p>Хтось може сказати: «Ти не справжній самоучка, бо навчався за підручниками чи курсами, які створили люди. А значить у тебе були викладачі». І вони мають рацію, але в дуже вузькому сенсі.</p><p>Якщо хтось заперечує факт, що ви самоучка, просто скажіть: «За такою логікою називатися самоучками можуть лише ті, хто виріс з вовками».</p><p>Покажіть їм цей розділ і скажіть: «Квінсі передбачив твій снобізм». А потім просто живіть далі.</p><p>Адже, погодьтеся, життя занадто коротке.</p><p>Ви — самоучка.</p><h4 id="--30"><strong><strong>Яка суть самостійного навчання?</strong></strong></h4><p>Суть самостійного навчання полягає в тому, щоб власноруч підбирати навчальні матеріали та вирішувати, чому і де навчатися.</p><p>Але як бути впевненим, що це потрібні навички та правильні ресурси?</p><p>Ось тут і стає в нагоді спільнота.</p><p>У світі існує безліч спільнот, учасники яких допомагають одне одному вдосконалювати навички.</p><p>Поняття «спільнота» важко визначити. Чи є Tech Twitter або freeCodeCamp спільнотами? Або численні групи у Discord та Reddit, присвячені конкретними навичками програмування?</p><p>Я вважаю їх спільнотами. Якщо там регулярно збираються люди, які допомагають одне одному, то це спільнота.</p><p>А як щодо живих заходів? Щомісячних зустрічей розробників Ruby в Окленді? Зустрічі спільноти стартапів Нью-Йорка? Групи користувачів Linux у Центральному Техасі?</p><p>Спільноти можуть бути онлайн або офлайн, а також поєднувати обидва формати.</p><p>Більше про спільноти ми поговоримо в розділі про нетворкінг. Але пам’ятайте: друзі, яких ви знайдете в цих спільнотах, допоможуть звузити коло того, чому вчитися і з яких ресурсів.</p><h3 id="--31"><strong>З якої мови програмування почати?</strong></h3><p>Скажу коротко: це не має особливого значення. Якщо ви добре опанували одну мову програмування, то вивчити другу буде набагато легше.</p><p>Існують різні типи мов програмування, але сьогодні більшість проєктів розробляються з використанням «скриптових мов високого рівня», до яких належать JavaScript і Python. Ці мови поступаються в ефективності, яку забезпечують «мови програмування низького рівня», серед яких C. Натомість вони значно простіші у використанні.</p><p>Сучасні комп’ютери в мільярди разів швидші ніж у 70-х і 80-х, коли більшість програм писали на таких мовах, як C. Ця потужність більш ніж компенсує відносну неефективність скриптових мов.</p><p>Варто зазначити, що і JavaScript, і Python написані на мові C, а з кожним роком вони стають швидшими завдяки великим спільнотам розробників, які роблять внесок до відкритого коду.</p><p>Python — це потужна мова програмування для наукових обчислень (зокрема, для науки про дані та машинного навчання).</p><p>А JavaScript... Ну, JavaScript може все. Це і швець, і жнець, і на дуду грець. JavaScript — це той гвинтик, що тримає всесвітню павутину в цілості.</p><blockquote>«Будь-яка програма, яку можна написати на JavaScript, зрештою буде написана на JavaScript» — Закон Етвуда (Джефф Етвуд, засновник Stack Overflow та Discourse)</blockquote><p>Ви могли б працювати впродовж всієї кар’єри лише на JavaScript і не відчувати потреби вивчити ще одну мову (хоча, зрештою, вам все одно захочеться вивчити щось нове, наприклад Python).</p><p>Тому я раджу почати з JavaScript. Ця мова не тільки набагато простіша у використанні, ніж Java та C++, але й легша у вивченні. Крім того, для тих, хто володіє JavaScript, набагато більше вакансій.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/01/Find_Javascript_Jobs_with_great_pay_and_benefits_in_United_States___Indeed_com_--.png" class="kg-image" alt="Image" width="600" height="400" loading="lazy"><figcaption>Знімок екрана з сайту для пошуку роботи Indeed. Я знайшов 68 838 вакансій за запитом «javascript» у США.</figcaption></figure><p>Також варто зосередитися на <strong>HTML </strong>і <strong>CSS</strong>. Якщо уявити вебсторінку як тіло людини, то HTML — це кістки, а CSS — це шкіра (JavaScript — це м’язи, які дозволяють вебсайту рухатися та бути інтерактивним).</p><p>З HTML і CSS можна ознайомитись за один день. Їх — як і більшість інструментів, про які я згадую, — легко вивчити, але важко опанувати.</p><p>Вам також варто навчитися користуватись <strong>Linux</strong>. На цій операційній системі працює переважна більшість серверів, а значну частину роботи ви будете виконувати в командному рядку Linux.</p><p>Якщо у вас Mac, то macOS має командний рядок, який підтримує майже всі ті самі команди, що й Linux (MacOS і Linux мають спільного предка — Unix).</p><p>Але якщо ви користуєтеся Windows, то потрібно встановити WSL (Windows Subsystem for Linux). Після цього ви зможете виконувати команди Linux на своєму комп’ютері. А якщо любите експериментувати, то можете навіть налаштувати подвійний запуск обох операційних систем — Windows і Linux — на одному комп’ютері.</p><p>Якщо збираєтеся встановити Linux на комп’ютер, раджу почати з Ubuntu. Це найпопулярніший (і найбільш задокументований) дистрибутив Linux, тож він має бути найпростішим у використанні.</p><p>Подумайте добре, адже Linux користуватися значно складніше, ніж Windows і macOS. Але натомість ви отримаєте надзвичайно швидку, безпечну та гнучку операційну систему.</p><p>Крім того, більше ніколи не доведеться платити за ліцензію на операційну систему (хіба самі цього захочете). Red Hat — це компанія з мільярдним оборотом (хоча її програмне забезпечення є відкритим), адже інші компанії платять за допомогу в обслуговуванні та підтримці серверів.</p><p>Вам також варто освоїти <strong>Git</strong> — систему контролю версій, що дозволяє командам розробників координувати зміни до кодової бази.</p><p>Можливо, ви вже чули про GitHub. Це вебсайт, який полегшує спільну роботу над проєктами з відкритим кодом. Крім того, він розширює деякі можливості Git. Більше про GitHub ви дізнаєтеся в розділі про репутацію.</p><p>Варто вивчити <strong>SQL</strong> та принципи роботи реляційних баз даних, оскільки вони складають основу інформаційної економіки.</p><p>Ви також будете чути про бази даних NoSQL (нереляційні бази даних, такі як графові та документальні, а також бази даних «ключ-значення»). Детальніше про них ви можете дізнатися пізніше. Спочатку зосередьтеся на SQL.</p><p>Зрештою, варто дізнатися про <strong>вебсервери</strong>. Почніть із Node.js та Express.js.</p><p>Якщо ви не знайомі з терміном «Full stack», то це поєднання front end (HTML, CSS, JavaScript) та back end (Linux, бази даних SQL і Node + Express).</p><p>Існує й багато інших інструментів, з якими варто ознайомитися (наприклад: React, NGINX, Docker та бібліотеки для тестування). Їх реально освоїти у процесі роботи.</p><p>90% підготовки варто витратити на основні навички:</p><ol><li>HTML</li><li>CSS</li><li>JavaScript</li><li>Linux</li><li>Git</li><li>SQL</li><li>Node.js</li><li>Express.js</li></ol><p>Опанувавши ці інструменти, ви зможете створювати значимі вебсайти та мобільні застосунки. Крім того, ви зможете претендувати на більшість вакансій початкового рівня (звісно, у багатьох вакансіях будуть вказані й інші інструменти, але про них ми поговоримо згодом).</p><p>Мабуть, ви думаєте: «Чудово. Як вивчити це все?»</p><h3 id="--32"><strong><strong>Де можна навчитися програмувати?</strong></strong></h3><p>Хороше питання. Досвідчені розробники та викладачі створили повноцінну навчальну програму спеціально для зайнятих дорослих. До того ж, вона абсолютно безоплатна і ви можете навчатися у власному темпі.</p><p>Саме так. Я маю на увазі <a href="https://www.freecodecamp.org/learn">основну навчальну програму freeCodeCamp</a>, що допоможе опанувати:</p><ul><li>front end;</li><li>back end;</li><li>інженерну математику;</li><li>і наукові обчислення (зокрема, Python для науки про дані та машинне навчання).</li></ul><p>Тисячі людей вже закінчили цю навчальну програму і почали працювати розробниками. Їм не довелося кидати основну роботу, брати кредити чи ризикувати чимось, крім кількох вечорів та вихідних.</p><p>freeCodeCamp став стандартом для більшості людей, які вчаться програмувати самостійно.</p><p>Як мінімум, основна навчальна програма freeCodeCamp може стати вашим стартом у навчанні. Ви опануєте основні навички, необхідні для більшості професій, а також спробуєте себе в тих технологіях, які цікавлять.</p><p>Існує безліч книг і курсів, з яких можна черпати знання. Їх можна знайти в бібліотеці або на платних сервісах (деякі матеріали з платних сервісів можна отримати безоплатно в бібліотеці).</p><p>На freeCodeCamp зараз доступно близько тисячі безоплатних курсів на різні теми: від підготовки до сертифікації AWS і розробки мобільних застосунків до Kali Linux.</p><p>Навчитись програмувати самостійно ще ніколи не було так просто.</p><h3 id="--33"><strong>Розвиток навичок — це вічна робота</strong></h3><p>Ми вже говорили, чому самостійне навчання є найкращим варіантом і як до цього підійти.</p><p>Ми вже говорили про альтернативи самостійному навчанню, а саме — про наукові ступені з комп’ютерних наук.</p><p>І ми вже говорили про інструменти, на вивченні яких варто зосередитися в першу чергу.</p><p>А тепер змінимо тему і поговоримо про те, як побудувати другий стовп кар’єри: нетворкінг.</p><!--kg-card-begin: html--><h2 id="розділ-2-як-розбудувати-нетворкінг">Розділ 2: як розбудувати нетворкінг</h2><!--kg-card-end: html--><blockquote>«Хочеш йти швидко — йди сам. Хочеш дійти далеко — йди з кимось» — Африканське прислів’я</blockquote><p>«Нетворкінг». Можливо, ви здригнетеся, почувши це слово.</p><p>Коли йдеться про нетворкінг, деяким на думку спадають нудні ярмарки вакансій, де люди в задушливих костюмах відчайдушно намагаються всунути резюме кожному, хто його прийме.</p><p>Іншим спадають вечірки з переглядом спортивних матчів, де кожен п’є алкоголь і вдає, що цікавиться спортом.</p><p>Ще іншим <em>— </em>вітати з днем народження малознайомих людей у LinkedIn або лайкати їхні дописи у надії, що вас помітять.</p><p>Але нетворкінг не має відбуватися саме так.</p><p>У цьому розділі я розповім усе, що дізнався про знайомство з людьми. Я розкажу, як завоювати їхню довіру і стати першими, до кого вони звернуться за допомогою.</p><p>Зрештою, саме в цьому й полягає суть: допомагати розв’язувати проблеми та бути корисними.</p><p>Я розкажу, як створити міцний нетворкінг, що стане опорою протягом багатьох років.</p><h3 id="-30--1"><strong><strong>Час історі</strong>й<strong>: як 30-річний </strong>викладач<strong> </strong>знайомився з людьми<strong> </strong>в ІТ<strong>?</strong></strong></h3><p><em>У попередній серії «Час історій»: Квінсі навчився програмувати через книги, безоплатні онлайн-курси та спілкуючись із розробниками у місцевому хакерспейсі. Він щойно завершив роботу над першим проєктом і виступив з першою технічною доповіддю...</em></p><p>Гаразд, я вже мав деякі базові навички програмування. Тепер я міг викрутитися з будь-якої ситуації.</p><p>Що ж було далі? Як-не-як, я був новачком у цій галузі.</p><p>Так, я був новачком в ІТ, проте працювати я вмів. Майже десять років я заробляв на життя, викладаючи англійську в школах.</p><p>Як викладач, я отримував зарплату за те, що передавав знання. А як розробник, я отримував би зарплату за те, що писав код.</p><p>Я вже знав одну дуже важливу істину про суть роботи: все залежить від того, кого ти знаєш.</p><p>Я знав силу знайомств. Я знав, що шлях до нових можливостей лежить саме через тих, хто контролює доступ.</p><p>Єдине, що стояло між мною та прибутковою роботою в ІТ, — це HR-менеджер, який міг би сказати:</p><p>— Так. Квінсі, здається, потрібний нашій команді.</p><p>Звісно, як новачок в ІТ, я не знав їхніх правил.</p><p>Академічні правила набагато формальніші.</p><p>Ти носиш костюм.</p><p>Ти використовуєш вишукану академічну термінологію, щоб показати свою приналежність.</p><p>У кожній розмові ти знаходиш спосіб згадати, що навчався в університеті А, або що був асистентом професора Б, або що твої статті друкувалися в журналі В.</p><p>Кар’єрний ріст відрізняється. Конференції відрізняються. Структури влади відрізняються.</p><p>Я не одразу усвідомив цей факт.</p><p>Я одягав костюм на перші технологічні заходи.</p><p>Я завжди носив акуратно складені копії свого резюме.</p><p>Я навіть носив візитки. Я замовив листи з анодованого алюмінію і за допомогою лазерного різака вигравіював на них своє ім’я, адресу електронної пошти і навіть цитату легендарного педагога Джона Дьюї:</p><blockquote><em>«Кожен, хто почав мислити, ставить частину світу під загрозу» — Джон Дьюї</em></blockquote><p>Це досі моя улюблена цитата.</p><p>Але це занадто:</p><p>— Привіт, я Квінсі. Ось моя червона алюмінієва візитка. Заздалегідь вибачте: вона може спрацювати на металошукачі під час вашого польоту додому.</p><p>Я ліз зі шкіри. Мабуть, це відчували всі, з ким я розмовляв.</p><p>Я зайшов на сайт Meetup.com і зареєструвався на всі заходи для розробників, які тільки зміг знайти. Санта-Барбара — невелике містечко, але воно розташоване неподалік від Лос-Анджелеса, де ці заходи відбувалися.</p><p>Я замінив костюм на джинси та худі і помітив, що ніхто не роздавав візитки. Тож я перестав їх носити з собою.</p><p>Я взяв приклад з розробників, яких зустрів у хакерспейсі: треба горіти справою, при цьому бути стриманим. Залиште частину свого ентузіазму про запас.</p><p>Я прочитав багато книг, щоб краще зрозуміти культуру розробників.</p><p>«<a href="https://www.amazon.com/Coders-Work-Reflections-Craft-Programming/dp/B092R8RQM3?crid=13BTAQ7TH9YSN&amp;linkCode=ll1&amp;tag=out0b4b-20&amp;linkId=32d14a148c54f36f5ef701578a2abd8e&amp;language=en_US&amp;ref_=as_li_ss_tl">The Coders at Work</a>» — чудова книга 80-х років.</p><p>«<a href="https://www.amazon.com/Hackers-Computer-Revolution-Steven-Levy/dp/1449388396?&amp;linkCode=ll1&amp;tag=out0b4b-20&amp;linkId=0c216f2cd4cc2d2090b8c9b50b0befee&amp;language=en_US&amp;ref_=as_li_ss_tl">Hackers: Heroes of the Revolution</a>» — хороша книга 90-х років.</p><p>Якщо вас цікавлять сучасні культурні джерела, подивіться серіал «Пан Робот». Його герої дещо екстремальні, але вони добре передають спосіб мислення та манери поведінки багатьох розробників.</p><p>Незабаром я вже говорив як розробник — а не викладач — і не виглядав таким безнадійним.</p><p>Кілька разів на тиждень я відвідував місцеві заходи, пов’язані з ІТ. Моїм улюбленим був навіть не захід для розробників, а «Santa Barbara Startup Night» — захід, де люди презентували свої ідеї. Деякі навіть змогли залучити фінансування від «бізнес-ангелів» — заможних людей, які інвестують у компанії на ранніх стадіях розвитку.</p><p>Хлопець, який організовував захід, називався Майк. Він, мабуть, знав кожного розробника та підприємця в Санта-Барбарі.</p><p>Коли я нарешті наважився познайомитись, я був вражений. Він був ультрамарафонцем із частотою серцебиття в спокої на рівні 40 ударів на хвилину. Ідеально підстрижене волосся та борода. Для мене він був найкрутішим чоловіком на планеті. Завжди доглянутий та ввічливий.</p><p>Майк був «нетехнічним»: він працював продакт-менеджером. Він багато знав про технології та UX-дизайн, але не вмів програмувати.</p><p>Іноді розробники зневажали «нетехнічних» людей.</p><p>— Він просто бізнесмен, — казали вони. Або:</p><p>— Вона — офісна працівниця.</p><p>Але я ніколи не чув, щоб хтось так говорив про Майка. Його поважали усі.</p><p>Я спеціально спостерігав за тим, як Майк спілкувався з розробниками. Зрештою, мене теж можна було назвати «нетехнічним», оскільки я почав програмувати лише кілька місяців тому.</p><p>Часто мої старі звички давали про себе знати. Під час розмов у мене виникала спокуса похизуватися своїми досягненнями.</p><p>Багато розробників скромно оцінюють свої вміння. Вони могли казати, що граються з Python. А я відкривав рота і казав щось типу:</p><p>— О, так. Я написав стільки алгоритмів на Python! Я пишу на Python навіть уві сні.</p><p>А потім я йшов додому, гуглив ім’я цього розробника і виявлялось, що він — один з головних авторів великої бібліотеки Python. Мені було дуже соромно.</p><p>Я швидко навчився тримати язика за зубами. Цілком імовірно, що людина, з якою ви розмовляєте, набагато краще розбирається в програмуванні, але більшість із них ніколи не зізнаються в цьому.</p><p>Немає нічого гіршого, ніж впевнено дістати ноутбук і продемонструвати свій код, а потім почути купу незрозумілих запитань.</p><p>Перші кілька місяців, коли я відвідував різні заходи, навчили мене стриманості і при цьому додали мені сил, щоб надалі вдосконалюватися.</p><p>Незабаром люди в південній Каліфорнії почали мене впізнавати. Вони казали:</p><p>— Я постійно бачу тебе на заходах. Як тебе звати?</p><p>Одного вечора мені сказали:</p><p>— Давай підпишемося одне на одного у X (Twitter).</p><p>Пару днів до того я зареєструвався у X (Twitter), але вважав цей сайт лише черговою модною забавкою. Скільки ж можна насправді висловити за 140 символів? Я не писав жодних дописів, але профіль я вже мав і на мене дійсно підписались.</p><p>Це надихнуло мене приділяти більше часу на оформлення соцмереж. Я переглянув декілька профілів інших розробників на LinkedIn і зрозумів, що він має бути менш офіційним й більш дружнім.</p><p>За кілька місяців я познайомився з різними людьми:</p><ul><li>з досвідченими розробниками;</li><li>з нетехнічними або пів технічними людьми, які працювали в ІТ;</li><li>з HR-менеджерами і рекрутерами;</li><li>а найголовніше — з колегами, які також перебували на середині кар’єрного шляху і намагалися пробитися в ІТ.</li></ul><p>Чому саме колеги були найважливішими? Вони найменше могли б допомогти знайти роботу, хіба не так?</p><p>Відкрию секрет: уявимо, що HR-менеджер наймає нового розробника, навчає його і той виявляється справді чудовим фахівцем. Цей менеджер поцікавиться: де я можу знайти ще таких людей?</p><p>Колеги — одна з найважливіших частин нетворкінгу. Багато пропозицій щодо фрилансу та співбесід я отримав від людей, які почали вивчати програмування приблизно в той самий час, що й я.</p><p>Ми зростали разом. Ми були сім’єю, а такі зв’язки — найміцніші.</p><p>У будь-якому разі, місяці знайомств зрештою дали плоди одного вечора, коли я відвідав захід для розробників у шикарному готелі в центрі міста.</p><p>Але детальніше про це — в наступному розділі, а зараз поговоримо про мистецтво та науку побудови нетворкінгу.</p><h3 id="--34"><strong>В<strong>се </strong>справді <strong>залежить від того, кого</strong> ви<strong> знає</strong>те<strong>?</strong></strong></h3><p>Можливо, ви чули, що успіх «менше залежить від того, що ти знаєш, а більше від того, кого ти знаєш».</p><p>Насправді все залежить і від того, і від іншого.</p><p>Так, знайомства можуть допомогти знайти роботу мрії. Але, якщо ви не маєте відповідних навичок, то не зможете добре виконувати свої обов’язки.</p><p>Давайте припустимо, що ви активно розвивалися і дотримувалися моїх порад з першого розділу. Коли час почати будувати нетворкінг?</p><p>Найкращий час для початку — <strong>вчора</strong>.</p><p>Для цього не потрібна машина часу, адже у вас вже є знайомства. Можливо, їх набагато менше ніж хотілось би, але ви все ж таки знаєте людей.</p><p>Це можуть бути друзі з рідного міста або колеги ваших батьків. Будь-яка людина, яку ви знаєте з минулого — хай навіть і не дуже близько — може стати у пригоді.</p><p>Тож перший крок — скласти повний перелік людей, яких ви знаєте. Не хвилюйтеся: я не прошу звертатися до них.</p><p>Подумайте, перш ніж діяти. Розробіть стратегію.</p><p>Спочатку складіть перелік усіх людей, яких знаєте.</p><h3 id="--35"><strong><strong>Як створити дошку </strong>із <strong>власн</strong>ими знайомствами</strong></h3><p>Створіть список людей, яких знаєте.</p><p>Можете використати електронну таблицю або інструмент для управління взаємовідносинами з клієнтами (CRM), як це роблять продавці. Але для наших цілей це, мабуть, занадто.</p><p>Рекомендую скористатися Trello.</p><p>Створіть 5 колонок: «До розгляду», «Зв’язатися», «Очікування відповіді», «Нещодавно зв’язувалися» та «Поки не зв’язуватися».</p><p>Потім створіть мітки, щоб класифікувати людей залежно від того, звідки ви їх знаєте. Ось кілька ідей: «Друг дитинства», «Друг сім’ї», «Колишній колега», «Однокласник», «Друзі з технічних заходів».</p><p>Тепер можете почати створювати картки. На кожній картці може бути лише ім’я людини, але якщо у вас є час — прикріпіть фотографію.</p><p>Ось дошка, яку я створив на Trello як приклад. Це персонажі із мого улюбленого фільму дитинства — класичної стрічки «Черепашки-ніндзя» (1989 рік).</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/01/Personal_Network_Board___Trello_--.png" class="kg-image" alt="Image" width="600" height="400" loading="lazy"><figcaption>Моя власна дошка друзів, з якими ми боремося зі злочинністю.</figcaption></figure><p>Можете переглянути свої соціальні мережі, а також шкільні альбоми, і почати додавати людей.</p><p>Багато з цих людей навряд чи зможуть допомогти, але я все одно раджу додати їх. Ніколи не знаєш, коли раптом згадаєш: «А, точно, він ж влаштувався на роботу в ту компанію. Треба з ним зв’язатися».</p><p>Цей процес може зайняти день-два. Але пам’ятайте, що це — інвестиція. Ця дошка буде корисною протягом подальшого професійного життя.</p><p>Ви можете подумати: «Мені це не потрібно — у мене вже є профіль на LinkedIn». Але LinkedIn — це досить грубий інструмент: щоб він спрацював, потрібно максимізувати корисну інформацію та мінімізувати зайві дані. Тому я раджу створити саме дошку.</p><p>На дошці ви зможете додавати мітки. Приділіть хвилинку, щоб дізнатися про кожну людину. Чим вони зараз займаються? Вони взагалі працюють? Можливо, керують компанією?</p><p>Крім того, ви можете додавати нотатки до кожної картки, коли дізнаєтеся щось нове. Вони нещодавно брали участь у благодійному марафоні на 5 км? Їхня бабуся нещодавно святкувала 90-річчя? Ці факти можуть здаватися незначними, але якщо людина ділиться ними в соціальних мережах, то <strong>для неї</strong> це дуже важливо.</p><p>Цікавтеся людьми, їхнім повсякденним життям та прагненнями. Розуміючи їхні мотивації та цілі, ви краще зрозумієте, як можете допомогти.</p><p>Як я вже казав раніше, допомога — найкращий спосіб налагодити знайомства. Ми детально поговоримо про це трохи пізніше.</p><p>Додайте людину до своєї дошки, але подумайте, чи варто одразу з нею зв’язуватися. Якщо так, то помістіть її в стовпець «Зв’язатися», якщо ні — в «Поки не зв’язуватися».</p><p>Можливо, ви запитаєте: чому стовпець називається «<strong>Поки</strong> не зв’язуватися»? Тому що ніколи не знаєш, коли знайомство може стати в нагоді. Завжди цініть дружбу чи знайомство.</p><p>Як тільки ви заповнили дошку, позначили всіх і відсортували їх по колонках, — ви готові починати роботу.</p><h3 id="--36"><strong><strong>Як підготуватися до </strong>нових знайомств</strong></h3><p>Головне, що потрібно пам’ятати, коли контактуєте з людьми і намагаєтеся справити враження: будьте простими.</p><p>Люди дуже зайняті, тому можуть запам’ятати лише певну кількість фактів про вас. Донесіть до них лише найголовнішу інформацію про себе. Найкращий спосіб це зробити — написати коротку біографію.</p><h4 id="--37"><strong><strong>Як написати коротку біографію для </strong>соцмереж</strong></h4><p>Постарайтеся бути однаковими у всіх соціальних мережах.</p><p>Про себе я пишу так:</p><p>«Мене звати Квінсі. Я викладаю у freeCodeCamp. Живу в Далласі, штат Техас. Допоможу навчитись програмувати».</p><p>А тепер спробуйте написати щось про себе. Подивіться, чи вдасться вкластися в сто або менше символів. Намагайтеся уникати складних слів та жаргону.</p><p>Себе важко описати в кількох словах, але це важливо.</p><p>Пам’ятайте: люди не мають часу слухати історію вашого життя. Якщо ви познайомитеся ближче, то зможете поступово розповісти більше про себе. Вони ставитимуть запитання та з часом зможуть краще вас пізнати.</p><p>На цьому етапі знадобиться гарна фотографія, на якій ви посміхаєтеся.</p><h4 id="--38"><strong><strong>Як зробити вдале фото для </strong>соцмереж</strong></h4><p>Якщо у вас є можливість, просто знайдіть місцевого фотографа і заплатіть йому за декілька професійних портретів.</p><p>Можливо, у вас навіть є друзі, які захоплюються фотографією і можуть зробити це безоплатно.</p><p>Особисто я сам зробив фото за допомогою програми Photobooth, яка входить до стандартного набору програм на MacOS. Мій друг витратив приблизно 10 хвилин на фон і тінь у Photoshop. Можливо, він трохи відбілив зуби. Ось фото:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/01/Michael_Headshot_B_W_Full_heic.png" class="kg-image" alt="Image" width="600" height="400" loading="lazy"><figcaption>Фото, яке я використовую всюди.</figcaption></figure><p>Не забудьте посміхатися очима, щоб не виглядати як робот. Згадайте щось дійсно смішне — я так і зробив — тоді посмішка буде щирою.</p><p>Зробіть багато знімків з різних ракурсів і просто виберіть той, на якому виглядаєте як у звичайний день. Фото не має бути надто відретушованим, адже люди на заходах можуть вас просто не впізнати. Не шокуйте їх своєю красою.</p><p>До речі, про те, як викликати довіру: <strong>не</strong> носіть сонцезахисних окулярів і намагайтеся виглядати не круто, а привітно та відкрито. Ось хороший тест на довіру: гляньте на свою фотографію; якби ви заблукали і побачили цю людину на вулиці, чи наважилися б запитати її про дорогу?</p><p>Використовуйте обрану фотографію всюди: у соціальних мережах, особистому вебсайті і навіть для електронної пошти.</p><p>Я раджу користуватися цією фотографією декілька років. Кожного разу, коли ви її змінюєте, то ризикуєте, що деякі люди не впізнають вас. Навіть незначні зміни в освітленні, ракурсі чи фоні можуть збити людей з пантелику.</p><p>Обов’язково зберігайте фото у хорошій якості. Так люди зможуть використовувати його для реклами доповіді на конференції або участі в подкасті (з часом ви досягнете цих висот).</p><h3 id="--39"><strong><strong>Як зв</strong>’<strong>язатися з людьми з минулого</strong></strong></h3><p>Біографія і фото готові, тому можна почати зв’язуватися з людьми.</p><p>П’ятнадцять років тому я б порадив дзвонити людям, а не писати. Але культура спілкування значно змінилася через появу смартфонів: більшість людей не дуже позитивно реагують на дзвінки.</p><p>Так само я не раджу запрошувати людей на каву чи обід, поки розмова не просунеться значно далі. Люди зайняті і таке запрошення може поставити їх у незручне положення.</p><p>Вам потрібно швидко перейти до суті.</p><p>Тож до якої суті потрібно перейти?</p><p>Якщо коротко:</p><ol><li>Я тебе знаю.</li><li>Ти мені подобаєшся.</li><li>Я поважаю те, чим ти займаєшся.</li></ol><p>Ось і все.</p><p>Людям подобається, коли їх знають. Їм подобається, коли їх люблять. Їм подобається, коли їхню працю та життя помічають.</p><p>Більшість із нас отримує визнання лише у день народження. Знайомі можуть написати привітання, опублікувати допис в соцмережах або навіть подзвонити.</p><p>А як щодо інших 364 днів? Кожен хотів би трохи уваги й у ці дні.</p><p>Ось простий спосіб, як це зробити.</p><p>Крок №1: зберіть інформацію про людину (погугліть, перегляньте останні дописи в соцмережах, почитайте LinkedIn і, якщо вона публікує сімейні фотографії, подивіться на них).</p><p>Крок №2: подумайте, що можна було б сказати, аби трохи покращити настрій цієї людини.</p><p>Крок №3: виберіть соціальну мережу, в якій вона була активною останнім часом та напишіть приватне повідомлення.</p><p>Я поділюся шаблоном, але не копіюйте слово в слово: якщо отримувач загуглить ваше повідомлення, то зрозуміє, що його писали не ви і вся репутація піде коту під хвіст.</p><p>Якби я раптово писав повідомлення людині, з якою не спілкувався кілька місяців або років, я б сказав щось на кшталт:</p><p>«Привіт, [ім'я]! Вітаю з [новою роботою / підвищенням / народженням дитини / завершенням проєкту]. Радий бачити, що ти досягаєш своїх цілей».</p><p>Щось коротко і по суті. Привітання + комплімент. Така базова формула.</p><p>Не просто кажіть так, а будьте щирими.</p><p>Цій людині потрібно відчути, що її цінують. Їй потрібно підняти настрій. Її потрібно підбадьорити, щоб вона продовжувала рухатися до своїх цілей.</p><p>Люди чудово відчувають нещирість, тому намагайтеся не нав’язуватись. Не давайте людям приводу думати, що їх хочуть використати.</p><p>Тому важливо бути лаконічними. Поважайте час людей. Ніхто не хоче отримувати довгі листи, на які доведеться писати довгу відповідь.</p><p>Причина в тому, що<strong> люди зайняті.</strong></p><h3 id="--40"><strong><strong>Як побудувати тісні </strong>знайомства</strong></h3><p>Люди дуже зайняті, тому часто їм хочеться бачити в незнайомцях вигоду:</p><ul><li>ця людина керує автобусом, яким я добираюся на роботу;</li><li>ця людина готує напій саме так, як я люблю;</li><li>ця людина з HR-відділу відповідає на мої запитання щодо відпустки;</li><li>ця людина склала крутий плейлист з джазом, який я слухаю під час написання коду;</li><li>ця людина щотижня надсилає корисні листи з безоплатними ресурсами для розробників.</li></ul><p>Певною мірою ви є тим, що робите для інших.</p><p>Знаю, знаю. Звучить надто примітивно, навіть цинічно. Звісно, зараз ми не говоримо про близьких друзів та рідних.</p><p>Це стосується людей, з якими ви ледь знайомі: вони просто зустрічають вас у повсякденному житті і бачать, яку користь ви несете.</p><p>Має бути причина, щоб людина звернула на вас увагу і захотіла дізнатися більше.</p><p>Перш ніж стати близьким другом — тим, хто справді важливий і про кого думають, коли його немає поруч, — спочатку потрібно стати корисним.</p><p>Саме цим і займемося: будемо налагоджувати ще тісніші стосунки, пропонуючи людям свою допомогу.</p><p>Це тривалий процес і розпочинати його варто задовго до пошуку роботи, щоб ніхто не подумав: «О, ти звертаєшся до мене лише тому, що тобі щось від мене потрібно».</p><p>Навпаки: ви звертаєтеся до них, бо маєте що запропонувати.</p><p>У вас надзвичайне вміння: вміння підкорювати машини. Ви — розробник.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://atariage.com/2600/carts/c_BasicProgramming_Picture_front.jpg" class="kg-image" alt="Image" width="400" height="483" loading="lazy"><figcaption>Саме так відчувається бути хорошим розробником.</figcaption></figure><p>Або, принаймні, ви на шляху до того, щоб ним стати.</p><p>Отже, ви вже маєте хорошу причину звернутися до людей.</p><p>Можливо, ви чули термін «холодний дзвінок» (дзвінок малознайомій людині зі спробою щось їй продати). Це нелегко і більшість таких дзвінків закінчується тим, що співрозмовник кладе слухавку.</p><p>Тому, чим більше інформації ви знаєте про співрозмовника, тим теплішою і плідною буде розмова.</p><p>Звісно, ви нічого не продаєте і — як я вже згадував раніше — не дзвоните, а пишете повідомлення одним абзацом.</p><p>Як я вже казав, найдієвіший перший крок, який з найбільшою ймовірністю викличе реакцію — невимушено запропонувати допомогу.</p><p>Я б написав таке повідомлення, але пам’ятайте: не використовуйте цей шаблон дослівно. Перепишіть його своїми словами так, як сказали б другові:</p><blockquote><em>«Привіт, [ім'я]. Вітаю з [новою роботою / підвищенням / народженням дитини]! Я зараз активно вивчаю програмування і створюю портфоліо. Ти одразу спав мені на думку як людина, яка встигає зробити дуже багато справ. Чи є якісь інструменти або застосунки, які б полегшили тобі життя? Можливо, я зможу їх запрограмувати для практики».</em></blockquote><p>Це ефективне повідомлення, бо воно індивідуальне і сприймається як живе. У наш час люди отримують стільки штучних повідомлень, що одразу ігнорують все, що хоч трохи схоже на них.</p><p>Ось чому я надсилаю повідомлення кожній людині особисто, а не покладаюся на автоматизацію. Краще повільно друкувати повідомлення одне за одним, ніж намагатися заощадити час за допомогою скрипту чи функції злиття листів.</p><p>Безсумнівно, найшвидший спосіб потрапити в чорний список — надіслати комусь повідомлення «Привіт, як справи?», де явно бракує імені. Це дуже нагадує шаблон.</p><p>Іноді я отримую повідомлення, в якому замість імені вказано прізвище. «Привіт, Ларсон». Тобто? Я тепер у військовому коледжі?</p><p>Багато користувачів LinkedIn почали додавати смайлик на початку свого імені, що допомагає легко виявляти автоматизовані повідомлення, адже в реальності ніхто не ставить смайлик у звертанні.</p><p>Якщо повідомлення починається з «Привіт, 🍜 Сара! Шукаєш нову роботу?», то можна бути впевненим — це спам.</p><p>Також зверніть увагу, що я не пишу «ми разом ходили до школи» чи щось таке. Якщо ви старі знайомі, то не варто уточнювати, звідки ви знайомі.</p><p>Чому? Тому що сам факт нагадування людям про те, звідки ви знайомі, змусить деяких з них задуматися: «Ой, я цю людину майже не знаю».</p><h3 id="--41"><strong><strong>Як підтримати розмову</strong></strong></h3><p>Знову ж таки: щоб розпочати діалог, спершу потрібно отримати відповідь.</p><p>Месенджери мають невимушену атмосферу, тому дотримуйтеся невимушеного стилю спілкування.</p><p>Не надсилайте надто довгі повідомлення, пишіть їх коротко та лаконічно. Ви ж не хочете, щоб людям було важко відповідати.</p><p>Як тільки отримаєте відповідь, внесіть її до своєї дошки, щоб не забути.</p><p>Можливо, в людини дійсно є ідея застосунку чи інструменту. Чудово. Розпитайте детальніше. Подивіться, чи зможете його створити.</p><p>Почніть зі створення макету користувацького інтерфейсу (міліметровий папір буде виглядати особливо професійно). Сфотографуйте результат та надішліть людині зі словами: «Щось таке?»</p><p>Людина зрозуміє, що ви справді хочете допомогти. Я готовий побитися об заклад, що для більшості це буде чимось новим.</p><p>«Ти мені допомагаєш? Ти створюєш застосунок спеціально для мене?» Їм буде приємно, і, швидше за все, вас запам’ятають. Навіть якщо сам застосунок ніколи вийде.</p><p>Після цього просто підтримуйте розмову. Можливо, вона зійде нанівець. Не хвилюйтеся — нехай так і буде. Через кілька тижнів знайдеться привід, щоб знову написати.</p><p>Перевага спілкування в соцмережах полягає в тому, що воно нікуди не зникає. Як напишете наступного разу, людина може просто прокрутити переписку і побачити: «А, це ж він пропонував створити для мене той застосунок», і точно не запитає: «А хто ви?»</p><p>Пам’ятайте, що розмова має бути невимушеною та позитивною. Якщо вам здається, що спілкування розвивається повільно, це не проблема. У вас будуть ще десятки розмов і справ. Ви будете працювати над знайомствами як бджілка.</p><h3 id="--42"><strong><strong>Як знайомитися з новими людьми та розширювати </strong>коло знайомств</strong></h3><p>Ми вже говорили про те, як налагоджувати зв’язки з тими, кого вже знаєте. Навіть якщо взаємодія послаблюється з роками, вона все ще існує.</p><p>Але як знайти нові знайомства?</p><p>Таке завдання нелегке. Але у мене є кілька порад, які можуть трохи полегшити цей процес.</p><p>По-перше, зустріч з людьми вживу набагато ефективніша, ніж знайомство в інтернеті.</p><p>Коли зустрічаєте когось особисто, ваша пам’ять отримує набагато більше інформації, яку можна зафіксувати:</p><ul><li>вигляд співрозмовника, його постава і поведінка;</li><li>тембр голосу, інтонація та стиль мовлення;</li><li>світло, звуки, запахи, температура та загальна атмосфера місця;</li><li>і багато інших деталей, які залишаються у пам’яті.</li></ul><p>Десять хвилин особистої розмови можуть створити глибший зв’язок, ніж десятки повідомлень, якими ви обмінюєтеся протягом тижнів.</p><p>Ось чому я раджу виходити з дому та знайомитись з людьми на заходах.</p><h3 id="--43"><strong><strong>Як знайомитися з людьми на заходах</strong></strong></h3><p>По-перше, на яких заходах? Якщо ви живете у великому місті, у вас безліч варіантів. Можна відвідувати технічні заходи кілька разів на тиждень, мінімально витрачаючи час на дорогу.</p><p>Якщо ви живете в малому місті, то доведеться обмежитися знайомствами на місцевих заходах: книжкові ярмарки, вечірки з морозивом, спортивні події.</p><p>Якщо ви ходите до церкви, мечеті чи храму, то знайомтеся з людьми і там.</p><p>Розумію, що це може звучати смішно. «Серйозно? Людина, яка стоїть поруч зі мною на трибунах під час футбольного матчу? Хіба вона якось допоможе мені знайти роботу?»</p><p>Можливо. А може й ні. Але не варто нехтувати такими людьми.</p><p>Хтось із них може керувати малим бізнесом.</p><p>Можливо, вони навчалися разом із другом, який зараз обіймає посаду віцепрезидента з інженерних питань у компанії зі списку Forbes.</p><p>Можливо, вони теж розробники. Зрештою, нас — розробників програмного забезпечення — мільйони. Не всі живуть у Кремнієвій долині. 😉</p><p>Коли знайомитеся з кимось, не варто одразу діставати телефон і питати:</p><p>— Можна додати вас на LinkedIn?</p><p>Натомість краще поводитися спокійно. Представтеся.</p><p><strong><strong>Запам</strong>’<strong>ятайте ім</strong>’<strong>я цієї людини.</strong> </strong>Імена — це невід’ємна частина побудови стосунків. Якщо зраджує пам’ять, варто потренуватися: можете спробувати запам’ятати імена всіх персонажів — незалежно від того, наскільки вони важливі — коли дивитеся серіал чи фільм.</p><p>Якщо все ж таки забули, не вгадуйте. Просто скажіть: «Нагадайте, будь ласка, як вас звати?» і зафіксуйте ім’я в голові.</p><p>Потисніть руку. Говоріть про те, що здається цілком звичним. Якщо розмова згасає, не хвилюйтеся. Нехай так і буде.</p><p>Стосунки будуються з часом. Справа не в загальному часі, проведеному разом, а в кількості зустрічей протягом тривалого періоду.</p><p>Велика ймовірність, що ви знову зустрінетесь в майбутньому. Можливо, у тому самому місці через кілька тижнів. Саме <strong>тоді</strong> ви робите крок:</p><p>— Привіт, [ім’я]! Як там [те, про ми що говорили минулого разу]?</p><p>Продовжуйте розмову з того місця, де закінчили. Якщо вам здається, що ця людина може стати корисним доповненням до вашого кола знайомств, то запитайте:</p><p>— Які плани наступного [дня тижня]? Підемо на [ще один захід]?</p><p>Завжди тримайте в голові заплановані на наступний тиждень заходи, щоб запропонувати іншим скласти компанію.</p><p>Це чудовий спосіб залучити людей до спілкування у безпечному публічному місці. До того ж, ви пропонуєте щось цінне: інформацію про захід.</p><p>Якщо співрозмовник виглядає зацікавленим, ви можете сказати:</p><p>— Чудово. Як мені зв’язатися, щоб надіслати деталі?</p><p>Ось і все. Тепер у вас є їхня електронна пошта, соцмережа або номер телефону, а ваші стосунки можуть розвиватися далі.</p><p>Такий підхід може здатися надто повільним. Навіщо бути таким обережним?</p><p>Повторю: люди зайняті. Розумні люди дбайливо ставляться до свого часу та особистої інформації.</p><p>Навколо занадто багато «вампірів», які хочуть скористатися іншими: намагаються щось продати, обдурити, втягнути до багаторівневої маркетингової схеми або якимось іншим чином змінити погляди.</p><p>Найкращий спосіб допомогти іншим людям подолати захисну реакцію — вже бути в їхньому полі зору завдяки попереднім зустрічам.</p><h3 id="--44"><strong>Як використовувати нетворкінг</strong></h3><p>У четвертому розділі ми детальніше поговоримо те, як ефективно використовувати нетворкінг. Поки що розглядайте його виключно як інвестицію часу та енергії.</p><p>Мені подобається уявляти нетворкінг як фруктовий сад: я саджу знайомства, а потім доглядаю за ними і дбаю про те, щоб вони були здоровими.</p><p>Хто знає, коли вони перетворяться на дерева і принесуть плоди. Мета полягає в тому, щоб продовжувати саджати дерева і в якийсь момент вони допоможуть вижити.</p><p>Продовжуйте випромінювати позитивну енергію. Продовжуйте пропонувати допомогу людям, використовуючи свої навички і навіть власні знайомства (ввічливе знайомство між двома людьми, яких ви знаєте, рідко буває поганою ідеєю).</p><p>Будьте доброзичливими, уважними та чуйними.</p><p>Ніколи не втрачайте терпіння через те, що пошук роботи може йти повільно.</p><p>Ніколи не принижуйтесь.</p><p>Ніколи не дозволяйте собі заздрити чужому успіху.</p><p>Одного дня ви пожнете те, що посіяли. Якщо ви поширюєте позитивну енергію, то готуєте себе до щедрого врожаю.</p><!--kg-card-begin: html--><h2 id="розділ-3-як-заробити-репутацію">Розділ 3: як заробити репутацію</h2><!--kg-card-end: html--><blockquote><em>«Шлях до здобуття хорошої репутації — це прагнути бути тим, ким хочеш здаватися» — Сократ</em></blockquote><p>Ви почали розвивати власні навички та розширювати коло знайомств, а отже готові розпочати роботу над репутацією.</p><p>Можливо, ви починаєте з нуля як повний новачок в ІТ. Або, можливо, ви вже маєте певну авторитетність, яку принесли з попередньої роботи.</p><p>У цьому розділі я поділюся практичними порадами з побудови бездоганної репутації серед колег, що стане ключем до отримання клієнтів на фрилансі, першої роботи та просування у кар’єрі.</p><p>Але спочатку я розповім, як побудував власну репутацію.</p><h3 id="-30--2"><strong>Час історій<strong>: </strong>я<strong>к </strong>30-річний викладач<strong> побудував репутацію розробника?</strong></strong></h3><p><em>У попередній серії «Час історій»<em>: </em>Квінсі почав знайомитись з розробниками, підприємцями та HR-менеджерами в ІТ. Він часто відвідував хакерспейси та інші заходи, але йому ще належало вийти на арену та випробувати свої сили...</em></p><p>Я займався програмуванням кілька місяців, перш ніж наважитись піти на перший хакатон.</p><p>Одного дня я зіткнувся з особливо неприємною помилкою і не міг зрозуміти, як її виправити. Тож я зробив те, що б зробили багато людей: відклав справу та заліз в інтернет. Саме тоді я побачив його: Startup Weekend EDU.</p><p>Startup Weekend — це 54-годинне змагання, яке передбачає створення застосунка і його презентацію перед журі. Такі заходи оцінюють ваші знання з програмування, дизайну та підприємництва.</p><p>Цей конкретний захід — що відбувся в самому центрі Кремнієвої долини — мав журі, до складу якого входили викладачі та підприємці з галузі освіти. З огляду на мій досвід у галузі освіти для дорослих, це здавалося ідеальним першим хакатоном для мене.</p><p>Я розповів Стіву про цей захід, а потім вимовив чарівні слова:</p><p>— Я буду за кермом.</p><p>Я попав в яблучко, адже Стів не мав водійського посвідчення.</p><p>Залучивши Стіва, ми доповнили нашу команду кількома розробниками з хакерспейсу Santa Barbara.</p><p>Я тижнями готувався до заходу, вивчаючи інформацію про членів журі та компанії, в яких вони працюють. Я дізнався про спонсорів. І, звісно, я тренувався програмувати як шаолінський монах.</p><p>Нарешті, після місяця підготовки, настав вирішальний день. Ми втиснулися в мою Toyota Corolla 2003 року з облущеним покриттям, увімкнули енергійну музику і вирушили в 5-годинну дорогу.</p><p>По дорозі ми обговорювали, що саме нам потрібно створити. Звісно, це мало бути щось пов’язане з освітою. Бажано для учнів старших класів, оскільки саме на цей вік орієнтувалися компанії членів журі.</p><p>Але що має робити цей застосунок? Як він полегшить життя людей?</p><p>Я згадав шкільні роки. У мене не було багато спогадів, оскільки я забрав документи одразу ж після першого року навчання в старшій школі (але мені вдалось скласти GED — так називають тест для отримання свідоцтва про неповну середню освіту — працюючи в Taco Bell, перш ніж зрештою вступити до коледжу. Але це вже інша історія).</p><p>Але одна проблема, яку я пам’ятав і яка досі не давала мені спокою: реферати.</p><p>Я любив писати, але це не стосувалося роботи у MLA-форматі з жорсткими правилами цитування. Я завжди боявся готувати список використаних джерел, а викладач постійно знімав бали за неправильне оформлення.</p><p>Вислухавши багато непоганих ідей від інших пасажирів у машині, я втрутився:</p><p>— У мене є ідея. Ми повинні написати застосунок, який оформлює використані джерела.</p><p>Хтось засміявся та сказав:</p><p>— Клас!</p><p>Стів ж відповів:</p><p>— Це ж хороша назва! Можемо назвати застосунок «Клас-ифікація через "С"».</p><p>Ми всі засміялися і відчули себе розумними, а потім почали обговорювати деталі.</p><p>Коли ми прибули на місце, там було близько сотні розробників. Це був офіс відкритого типу з низькими кабінками, оточеними дошками для записів.</p><p>Я почув шепотіння про одного з розробників:</p><p>— Це ж той хлопець, який виграв минулого року, — говорили люди. Вони вказали рукою на самовпевненого на вигляд розробника, оточеного фанатами. — Може, він дозволить приєднатися до його команди.</p><p>Захід розпочався зі знайомства. Будь-хто міг підійти до мікрофона і виголосити 60-секундну презентацію про застосунок, який хотів би створити.</p><p>Я так нервував, що мені здавалося ніби з грудей ось-ось вискочить іншопланетянин. Тому я був першим у черзі. Іноді треба робити через не хочу, правда ж?</p><p>Я пітнів і розмахував руками, коли розповідав про свою ідею. Я сказав щось на кшталт:</p><p>— Посилання на джерела — це відстій. Окей, вони не відстій. Вони необхідні. Їх потрібно додавати до робіт, але працювати з ними — це жах. Давайте напишемо застосунок, який створюватиме за вас список використаних джерел. Хто зі мною?</p><p>У залі запала тиша. Потім люди усвідомили, що я закінчив говорити, і влаштували мені обов’язкові оплески. Ведучий забрав мікрофон з моїх рук і передав його наступному учаснику, а я повернувся на своє місце.</p><p>Потім настав час формувати команди. Наша група з Санта-Барбари переглянулася і було очевидно, що ми — команда.</p><p>Ми дізнались пароль до Wi-Fi і зайняли найкраще робоче місце: кабінет у куті, де можна було зачинити двері.</p><p>Я почав малювати ескізи інтерфейсу та зазначив:</p><p>— Нам потрібно щось, що завжди під рукою. Одразу в меню браузера.</p><p>— Як плагін для браузера, — запропонував Стів.</p><p>— Так. Давайте його і створимо.</p><p>Я показав приклади трьох форматів, які можуть знадобитися для есе: MLA, APA та Chicago.</p><p>— Ми можемо згенерувати всі три одразу, щоб люди могли просто скопіювати та вставити? — запитав я.</p><p>— Можемо зробити навіть краще, — сказав Стів. — Можемо створити для кожного кнопку, яка додаватиме джерело одразу до буфера обміну.</p><p>Ми працювали швидко і до кінця вечора п’ятниці створили простий MVP (мінімально життєздатний продукт), який лише приймав метадані поточного вебсайту та структурував їх як цитування. Але це працювало.</p><p>Це був мій перший хакатон, тому я не хотів переживати через проживання в хостелі. Я не пошкодував грошей і зняв номер у готелі. У нас було два односпальні ліжка, тож ми по черзі спали на підлозі.</p><p>У суботу вранці наші амбіції зросли. Я підійшов до дошки та сказав команді:</p><p>— Посилання на вебсайти — це чудово, але багато джерел міститься в книгах або наукових статтях. Для них також потрібно мати можливість генерувати цитування.</p><p>Ми знайшли API, який можна використовувати для отримання інформації про цитування на основі ISBN (серійного номера книги), і зліпили скрипт, який міг шукати наукові статті на основі DOI (серійного номера наукової статті), а потім збирати потрібні дані зі сторінки результатів.</p><p>До вечора суботи код для нашого плагіна був майже готовий. Тож я сів і почав готувати слайди для презентації. Я залишив більшу частину написання коду своїй команді, а сам годинами повторював презентацію.</p><p>Хоча настала моя черга спати в ліжку, я ледве міг зімкнути очі через хвилювання. Я опинився в самому серці технологічної екосистеми: у Кремнієвій долині.</p><p>Як викладач, я регулярно виступав перед колегами (іноді перед десятками людей). Але це була інша ситуація.</p><p>За кілька годин я мав виступити перед аудиторією, заповненою амбітними розробниками і членами журі — людьми з докторськими ступенями, деякі з яких заснували власні ІТ-компанії. Вони мали оцінювати нашу роботу і мені було страшно, що я якимось чином все зіпсую.</p><p>Я так і не зміг заснути, тож відкрив електронну пошту. Команда Startup Weekend надіслала листа, до якого було додано PDF-файл книги. Це була неофіційна збірка класичних праць про стартапи: «<a href="https://www.amazon.com/Four-Steps-Epiphany-Successful-Strategies/dp/1119690358?_encoding=UTF8&amp;qid=&amp;sr=&amp;linkCode=ll1&amp;tag=out0b4b-20&amp;linkId=662e9d222ccd9aa050d3ad29438e74e3&amp;language=en_US&amp;ref_=as_li_ss_tl">4 Steps to the Epiphany</a>» та «<a href="https://www.amazon.com/The-Lean-Startup-Eric-Ries-audiobook/dp/B005MM7HY8?_encoding=UTF8&amp;qid=&amp;sr=&amp;linkCode=ll1&amp;tag=out0b4b-20&amp;linkId=13b3c19bdbda93658336cf7c69e27100&amp;language=en_US&amp;ref_=as_li_ss_tl">The Lean Startup</a>».</p><p>Я вже читав ці книги, адже на початку 2010-х вони були обов’язковими для всіх, хто хотів створювати технічні продукти. Я прочитав й десятки інших книг про стартапи і багато їхніх ідей якось злилися в одну кашу.</p><p>Була 4-та ранку і я таки не міг заснути, тож просто почав читати. Одна річ, на якій ці книги дійсно наголошують, — це створення чогось, за що будуть платити (що є найвищим визнанням серед клієнтів).</p><p>Саме тоді я усвідомив: знаєте, що насправді допоможе моїй презентації перетнути фінішну пряму? Доказ, що продукт відповідає ринку. Доказ, що наш застосунок вирішує проблему настільки, що люди готові відкрити гаманці.</p><p>У мене з’явилась ідея: потрібно взяти застосунок і почати продавати його людям.</p><p>Але був ранок неділі. Де я міг знайти потенційних клієнтів? Ну, наш готель якраз розташовувався неподалік від головного кампусу Стенфордського університету.</p><p>Я відвіз свою команду до місця проведення заходу, попрощався і сказав:</p><p>— Я повернуся, коли матиму готівку від клієнтів.</p><p>Мої колеги посміялися:</p><p>— Тільки не запізнись на презентацію, — не знаю, чи вони сприйняли мене серйозно.</p><p>Але мені було не до жартів. На моєму ноутбуці працював прототип застосунка. Я проклав маршрут до університету і вирушив виконувати свою місію.</p><p>Я навчався у звичайному державному університеті в Оклахомі. Тож я відчув себе зовсім не у своїй тарілці, коли під’їхав до одного з найкращих університетів світу.</p><p>Навчання у Стенфорді коштує 50 000 $ на рік. А я заїхав на парковку на машині, яка коштувала вдесятеро менше.</p><p>У цей час тижня кампус нагадував місто-привид, але все одно був надзвичайно розкішним: бронзові статуї та культові арки були всюди.</p><p>Я запитав себе: де зараз найуспішніші та найзавзятіші студенти? Ті, хто не має часу на те, щоб вручну створювати списки джерел?</p><p>Я зайшов до головної бібліотеки, проходячи повз стійку охорони та табличку з надписом «Торгівля заборонена».</p><p>Я ходив між стелажами, де було лише кілька людей, які займалися навчанням. Один студент старанно робив нотатки, переглядаючи товстий підручник. Бінго.</p><p>Я вмостився на стільці поруч із ним:</p><p>— Псс. Ей! Подобається цитувати?</p><p>— Що?</p><p>— Цитувати. Ну, писати список використаних джерел.</p><p>— Нууу...</p><p>— Ну остання сторінка роботи, де треба вказати всі...</p><p>— Я знаю, що таке список використаних джерел.</p><p>— Гаразд. Тоді глянь, — я відсунув куртку вбік, наче наркодилер, і дістав свій нетбук за двісті доларів. Він уважно слухав, поки я виголошував незграбну рекламну промову. — Ось. У мене є плагін для браузера. Я заходжу на будь-який вебсайт, натискаю кнопку і вуаля. Він створює джерело.</p><p>Студент підняв брови:</p><p>— А він працює з MLA-файлом?</p><p>Я стримав емоції і сказав:</p><p>— MLA, APA і навіть Chicago. Дивись, — я натиснув кнопку і з’явилися три посилання, кожне з власною кнопкою «скопіювати в буфер обміну».</p><p>Студент кивнув, схоже, дещо вражений. Тож я спробував довести справу до кінця.</p><p>— А якби я сказав, що збираюся запустити цей застосунок з річною підпискою? Але якщо зареєструєшся зараз, отримаєш необмежений доступ не на рік, а на все життя.</p><p>Він замислився.</p><p>Я чув, що тиша — найкращий друг продавця. Тож я сидів і дивився йому в очі, що здавалося нестерпно довго.</p><p>Нарешті він сказав:</p><p>— Круто, я в грі.</p><p>— Чудово. З тебе двадцятка.</p><p>Хлопець похитнувся:</p><p>— Скільки? Це дорого.</p><p>Тоді була епоха стартапів, які фінансувалися венчурним капіталом (Uber і Lyft втрачали гроші на кожній поїздці в гонитві за часткою ринку). Тож реакція студента була очікуваною.</p><p>Але я швидко зреагував:</p><p>— Гаразд, скільки в тебе готівки з собою?</p><p>Він глянув у гаманець, а потім сказав:</p><p>— П’ять баксів.</p><p>Я подивився на зім’яту купюру й знизив плечима:</p><p>—&nbsp;Продано.</p><p>Він посміхнувся і я надіслав йому електронного листа з інструкціями для встановлення. Потім сказав:</p><p>— Ще одне. Давай сфотографуємося разом.</p><p>Я перевів телефон у режим селфі. Він почав посміхатися і я додав:</p><p>— Ось. Потримай п’ятидоларову купюру.</p><p>Я провів ще годину, презентуючи застосунок людям у бібліотеці, і мені вдалося знайти ще одного клієнта, який заплатив. Потім я помчав назад до місця проведення заходу, щоб доопрацювати прототип разом із командою.</p><p>Того дня я провів презентацію, яку досі вважаю найкращою у своєму житті: ми продемонстрували застосунок, який працював бездоганно.</p><p>Ми завершили презентацію фотографіями зі студентами Стенфорда і які тепер були нашими клієнтами, що заплатили за послугу. Коли я показав зароблені гроші, аудиторія вибухнула оплесками.</p><p>Загалом такий досвід був одним із найкращих у моєму житті. Ми посіли друге місце і виграли API-кредит від однієї з компаній, що спонсорувала захід.</p><p>На вечірці після заходу я накинувся на піцу, щоб мати більше часу на спілкування з усіма, з ким тільки можна: я кидав заявки на LinkedIn, підписувався в X (Twitter), робив селфі з іншими та активно використовував хештег заходу.</p><p>Це був переломний момент у моїй кар’єрі розробника. Я довів людям, що можу розробляти, програмувати і навіть продавати застосунки. А що важливіше — я довів це собі.</p><h3 id="--45"><strong><strong>Подорож хакатонами</strong></strong></h3><p>З того моменту я захопився хакатонами. Того ж року я взяв участь у десятках заходів. Я став мандрівником, їздив туди-сюди і відвідував всі змагання, які тільки міг.</p><p>Далі стало набагато складніше. У мене не було команди. Я був сам.</p><p>Я приїжджав, знайомився з якомога більшою кількістю людей, а потім виходив і презентував ідею, яка могла б сподобатися суддям.</p><p>Іноді люди приєднувалися до моєї команди. Іноді я приєднувався до інших команд.</p><p>Я хотів не просто розробляти застосунки, а писати для них код. Мої амбіції часто виходили за межі можливостей.</p><p>Було чимало хакатонів, де я до останніх хвилин перед виходом на сцену намагався виправити баги. Іноді мої застосунки давали збій під час презентації.</p><p>На одному з хакатонів у Лас-Вегасі мені вдалося настільки зіпсувати код, що нам довелося обмежитися лише презентацією. Я сидів у залі, схопившись за голову, і безпорадно дивився, як гіпотетично працював би наш застосунок. Судді не оцінили нас.</p><p>Але я не здавався. Продовжував приїжджати в нові міста, заселятися в хостел, йти на місце проведення заходу та їсти стільки безоплатної піци, скільки міг.</p><p>Мої команди стільки разів посідали друге або третє місце, що я збився з рахунку. Але нам ніколи не вдавалося виграти.</p><h3 id="--46"><strong><strong>Прорив</strong></strong></h3><p>Це сталось до заходу в Сан-Дієго. Я ніколи не забуду відчуття, коли ми створили щось таке, що підкорило аудиторію та суддів настільки, що наша перемога здавалася очевидною.</p><p>Після того, як нас оголосили переможцями, я непомітно вийшов через службовий вихід на парковку і зателефонував дідусеві та бабусі. Я сказав їм, що у мене нарешті вийшло: я допоміг створити застосунок і підготувати презентацію, яка виграла хакатон.</p><p>Не знаю, наскільки дідусь і бабуся розумілися на розробці програмного забезпечення чи на таких заходах, але вони сказали, що пишаються мною.</p><p>Їх вже немає поруч, але я часто згадую цю розмову. Я ціную їхню підтримку і віру в те, що їхній онук, 30-річний викладач, може докласти всіх зусиль та стати розробником.</p><p>Після цього я продовжував брати участь у хакатонах. Я формував нові команди та вивчав нові інструменти. Ніколи не забудеш, як вперше запустив API або коли нарешті зрозумів, як працює якась Git-команда. І ніяк не забудеш людей, які працювали поруч із тобою та робили все, щоб застосунок не підвів під час презентації.</p><p>Хакатон «TechCrunch Disrupt». Хакатон «DeveloperWeek». Хакатон «ProgrammableWeb». Хакатон «Salesforce» з призовим фондом у мільйон доларів. Стільки значних подій і стільки знань. Це була та кузня, де викувалися мої навички розробника.</p><p>Я не тільки розвинув свої навички та познайомився з новими людьми, але й тепер мав репутацію людини, яка дійсно може виграти хакатон.</p><p>Я зміг довести справу до кінця.</p><p>Завдяки цим досягненням про мене дізналися.</p><p>Критерій репутації став визначним для того, щоб отримати перших клієнтів, першу роботу і, найголовніше, — можливість довіряти власним інстинктам.</p><h3 id="--47"><strong><strong>Чому репутація настільки важлива</strong></strong></h3><p>Роль репутації в суспільстві сягає аж доісторичних часів. У більшості племен і поселень існувала якась система, що дозволяла відстежувати, хто кому що винен.</p><p>До появи готівки існував борг.</p><p>Його записували в книзі обліку або старійшина просто тримав усе в голові.</p><p>Окрім суто бухгалтерського обліку, існувала також менш відчутна, але не менш важлива характеристика, яку люди носили з собою.</p><p>— Джон точно знає, як підкувати коня.</p><p>— Джейн — найкраща оповідачка в нашій місцевості.</p><p>— Сміливість Джея в бою врятувала нас від загарбників три зими тому.</p><p>Помітили, що всі приклади — про те, що хтось у чомусь вправний? А не тому, що хтось є хорошою і приємною людиною.</p><p>Звісно, корисно бути спокійною, приземленою людиною. Але це не «Великий Лебовські» і ми не виживемо лише завдяки своєму шарму.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/01/image__2000-1338_.png" class="kg-image" alt="Image" width="600" height="400" loading="lazy"><figcaption>Великий Лебовські (зліва). У нього не було роботи, навичок чи енергії. Але він був спокійним як ніхто інший.</figcaption></figure><p>Розробнику легко сказати:</p><p>— О так. Я знаю JavaScript як свої п’ять пальців. Я можу створити будь-який застосунок на JavaScript, який працюватиме на будь-якому пристрої.</p><p>Або:</p><p>— Я завжди виконую замовлення в рамках бюджету і достроково.</p><p>Але звідки ви знаєте, що такі твердження не перебільшені?</p><p>Зрештою, один хитрий чоловік колись сказав:</p><blockquote><em>«Якщо можеш бути хорошим у чомусь одному, то вчися добре брехати. Тоді будеш хорошим у всьому»</em></blockquote><p>(Справжнє походження цього вислову невідоме. Але мені подобається думати, що його сказав шахрай у циліндері та з моноклем у 1920-х).</p><p>Брехати може будь-хто і деякі люди цим користуються.</p><p>На початку кар’єри мені довелось виконати неприємне завдання: звільнити викладача, який збрехав про наявність ступеня магістра. Минали роки, а цього ніхто не помічав.</p><p>Щороку він вносив неправдиві дані у документи, щоб отримати більшу надбавку до зарплати. Щороку йому це сходило з рук.</p><p>Але одного дня мене насторожила маленька невідповідність. Я переглянув його справу, зателефонував до кількох архівів і з’ясував, що він не закінчив навчання.</p><p>Коли я його викрив, це було схоже на сцену з мультфільму про Скубі-Ду. «Все б зійшло з рук, якби не ви, кляті діти».</p><p>Було прикро усвідомлювати, що ця людина роками викладала в школі й отримувала вищу зарплату, ніж багато інших викладачів, лише через вміння брехати.</p><p>Вигода від брехні завжди присутня і привабливо виблискує. Деякі готові піддатися цій спокусі.</p><p>Роботодавці знають: не можна довіряти кожному, хто стверджує, що володіє навичками повноцінної розробки на JavaScript. Треба бути обережним щодо того, кому надавати бейдж компанії, корпоративну електронну адресу та доступ до виробничих баз даних.</p><p>Тому роботодавці використовують поведінкові питання на співбесіді: щоб спробувати виявити кандидатів, які схильні до обману.</p><p>Називайте мене наївним, але я вірю, що більшість людей за своєю природою добрі і готові дотримуватися правил, якщо вони є справедливими.</p><p>Але навіть якщо один працівник з десяти виявиться катастрофічним, то всі повинні піддаватися більш ретельному контролю.</p><p>Найгірший сценарій — це не просто працівник, який бреше, щоб заробити більше грошей, а той, хто продає секрети компанії, руйнує відносини з клієнтами або порушує закони заради підвищення своїх показників.</p><p>Історія рясніє прикладами працівників, які завдали катастрофічної шкоди роботодавцям заради власної вигоди.</p><p>Тому процес найму розробників у більшості великих компаній є надзвичайно параноїдальним. Можливо, так і має бути. Але, на жаль, це ускладнює отримання роботи для <em>всіх —</em> навіть для найчесніших кандидатів.</p><p>Розробникам потрібні докази, що їхні навички настільки сильні, як про них говорять. Їм потрібне підтвердження, що робоча етика настільки непохитна, як цього потребують роботодавці.</p><p>Саме тут на допомогу приходить репутація. Вона зменшує неоднозначність і ризик контрагента, що робить оффер і підписання трудового договору безпечними для роботодавців.</p><p>Тобто — якщо у вас досить хороша репутація — ви зможете потрапити в компанію через службовий вхід, а не головні двері, біля яких вишиковуються інші кандидати.</p><p>Деякі компанії навіть мають власних рекрутерів, які можуть пришвидшити процес співбесіди. Бездоганна репутація також може допомогти отримати більшу перевагу під час переговорів щодо зарплати.</p><p>Тож давайте поговоримо про те, як побудувати хорошу репутацію і стати бажаним кандидатом для менеджерів.</p><h3 id="--48"><strong><strong>Як побудувати репутацію розробника</strong></strong></h3><p>Існує щонайменше шість перевірених часом способів, за допомогою яких можна побудувати репутацію розробника:</p><ol><li>Хакатони</li><li>Внесок до відкритих проєктів</li><li>Створення контенту, орієнтованого на розробників</li><li>Підйом по кар’єрних сходах у компаніях під загальновідомою назвою</li><li>Створення портфоліо з клієнтами на фрилансі</li><li>Запуск власного відкритого проєкту, компанії або благодійної організації</li></ol><h4 id="--49"><strong><strong>Як </strong>шукати<strong> хакатони та інші </strong>змагання<strong> для розробників</strong></strong></h4><p>Хакатони — це найшвидший спосіб одночасно побудувати репутацію, знайомства та навички.</p><p>Більшість з них безоплатні та відкриті для широкої публіки. Вам просто потрібно мати час і гроші на поїздку.</p><p>Якщо ви живете в місті, де проводиться багато хакатонів — наприклад, у Сан-Франциско, Нью-Йорку, Бенгалуру чи Пекіні — ви можете приїжджати на захід, а потім повертатися додому і спати у власному ліжку.</p><p>Я жив у Санта-Барбарі (де хакатони проводилися лише раз на кілька місяців), але в мене був однокласник у Сан-Франциско, який дозволяв ночувати на своєму дивані. Це дало мені доступ до набагато більшої кількості заходів.</p><p>Раніше хакатони були дуже інтенсивними заходами: люди пили енергетики та спали на підлозі, аби встигнути завершити проєкт до презентації.</p><p>Але організатори все більше піклуються про стан здоров’я учасників та доброзичливість таких заходів, оскільки багато учасників мають дітей або працюють повний робочий день і не можуть присвятити програмуванню всі вихідні.</p><p>Найкращий спосіб знайти майбутні заходи — просто загуглити «хакатон [назва міста]» і переглянути різні календарі подій, які з’являться у результатах пошуку. Багато з них проводяться університетами, місцевими роботодавцями або навіть благодійними організаціями, що зосереджуються на освіті.</p><p>Якщо ви налаштовані лише на перемогу, рекомендую заздалегідь провести дослідження.</p><p>Поцікавтесь, хто спонсорує захід. Зазвичай це компанії, що працюють за моделлю B2D і пропонують API, інструменти для роботи з базами даних або різні SaaS-сервіси.</p><p>Вони, ймовірно, матимуть свій стенд, де можна поспілкуватися з їхніми представниками (це фахівці, яким платять за те, щоб вони навчали людей користуватися інструментами компанії). Іноді на таких стендах можна навіть зустріти ключових співробітників або засновників, що також може стати чудовою нагодою для знайомства.</p><p>Хакатони часто пропонують призи від конкретних спонсорів. Наприклад, «Найкраще використання API від [спонсора]». Можливо, простіше буде зосередитись на впровадженні конкретних інструментів спонсора у свій проєкт, а не намагатися виграти головний приз — це також можна вказати як перемогу на LinkedIn або в резюме. Усі в плюсі.</p><p>Іноді хакатон настільки престижний — або приз настільки значний — що логічно спробувати виграти змагання.</p><p>За час відвідування хакатонів я міг виграти грошові призи на суму, що покриває кілька місяців оренди, кілька років коворкінгу та навіть приватну екскурсію будівлею ООН у Нью-Йорку.</p><p>На хакатонах я зустрічав людей, основним джерелом доходу яких були грошові призи. Один розробник, якого я знав, зумів виграти дев’ять спонсорських призів на одному заході. Йому вдалося інтегрувати всі спонсорські інструменти у свій проєкт, а також посісти друге місце в загальному заліку.</p><p>Не дивуйтеся, якщо деякі люди, з якими ви часто зустрічаєтеся на хакатонах, згодом засновують компанії, що фінансуються венчурним капіталом, або запускають відомі проєкти з відкритим кодом.</p><p>Рівень амбіцій, який ви побачите серед постійних учасників хакатонів, набагато вищий, ніж у середньостатистичного розробника. Такі люди закінчують робочий тиждень, а потім одразу ж переходять до робочих вихідних. Вони не бояться підставити лоба під кулю.</p><h3 id="--50"><strong><strong>Як робити внесок</strong> до відкритих проєктів</strong></h3><p>Внесок до відкритого коду — це один із найшвидших способів побудувати репутацію. Більшість роботодавців переглядатимуть ваш профіль на GitHub, де чітко відображатиметься історія комітів.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/01/raisedadead__Mrugesh_Mohapatra__--.png" class="kg-image" alt="Image" width="600" height="400" loading="lazy"><figcaption>Профіль на GitHub Мруґеша Мохапатри, який займається величезною кількістю розробки та DevOps для freeCodeCamp.org. Зверніть увагу, наскільки зелена його активність: 2 208 внесків лише за один рік.</figcaption></figure><p>Багато утримувачів проєктів з відкритим кодом — Linux Foundation, Mozilla (Firefox) і, звичайно, freeCodeCamp — мають високі стандарти якості коду.</p><p>Перегляньте GitHub, щоб знайти відомі проблеми або запити на нові функції. Потім внесіть зміни в код і відкрийте PR. Якщо ваш PR підтвердять, це стане значною заслугою.</p><p>Один із найкращих способів отримати роботу в ІТ-компанії — активно робити внески до її відкритого коду.</p><p>Внесок у відкритий код — чудовий спосіб побудувати свою репутацію, адже все, що ви робите, є загальнодоступним. Крім того, ви отримуєте <strong>соціальне підтвердження</strong>, оскільки інші розробники перевіряють і приймають вашу роботу.</p><p>Якщо ви зацікавлені в побудові репутації через відкритий код, для початку прочитайте посібник Гілларі Някунді про <a href="https://www.freecodecamp.org/news/how-to-contribute-to-open-source-projects-beginners-guide/">початок роботи з відкритим кодом</a> (англійською мовою).</p><h3 id="--51"><strong><strong>Як створювати контент, орієнтований на розробників</strong></strong></h3><p>Розробники — це люди. Як й інші люди, вони хочуть займатися чимось у вільний час, коли не працюють, не сплять і не організовують дозвілля з друзями та родиною.</p><p>Для багатьох людей — у тому числі й для мене — це означає занурюватися в думки інших. Книги. Відеоесе. Інтерактивні проєкти, такі як <a href="https://www.freecodecamp.org/news/learn-to-code-rpg-1-5-update/">візуальні новели.</a></p><p>Узагальнено це можна назвати «контентом». Я не великий шанувальник цього слова, бо воно надає цим роботам відчуття одноразовості. Але саме таку назву ми чуємо найчастіше.</p><p>Розробка програмного забезпечення — це неймовірно широка галузь. Існують відеоблоги про життя розробників, навчальні матеріали з підготовки до співбесіди, прямі трансляції з написанням коду на Twitch та <a href="https://www.freecodecamp.org/news/tag/podcast/">подкасти з розробниками, як-от freeCodeCamp Podcast.</a></p><p>Імовірно, існують цілі категорії контенту для розробників, про які ми ще навіть не думали, але які з’являться протягом наступного десятиліття.</p><p>Якщо ви цікавитеся кіно, журналістикою чи літературою, створення контенту може стати хорошим способом побудувати свою репутацію.</p><p>Ви можете обрати конкретну тему і поступово стати визнаним експертом.</p><p>Наприклад, деякі розробники спеціалізуються на підручниках для конкретних технологій.</p><p>Мій друг Ендрю Браун — колишній технічний директор із Торонто, який склав усі основні іспити з DevOps. Він створює безоплатні курси <a href="https://www.freecodecamp.org/news/azure-developer-certification-az-204-pass-the-exam-with-this-free-13-5-hour-course/">для підготовки до всіх сертифікацій AWS, Azure та Google Cloud</a>, а також надає послуги з підготовки до іспитів.</p><p>У світі налічується понад 30 мільйонів розробників програмного забезпечення. Це величезна кількість людей, які потенційно споживатимуть ваш контент і дізнаються, хто ви.</p><h3 id="--52"><strong><strong>Як піднятися по кар</strong>’<strong>єрних сходах, працюючи у великих компаніях</strong></strong></h3><p>Можливо, ви бачили, що розробника можуть представити як «колишнього співробітника Google» або «колишнього інженера Netflix».</p><p>Деякі ІТ-компанії мають настільки суворі процедури найму — і настільки високі стандарти — що отримання роботи в такому місці є великим досягненням.</p><p>Існують причини, через які роботодавці звертають увагу на попереднє місце роботи. Одна з них — це зменшує ризик помилкового найму.</p><p>Ви можете зміцнити свою репутацію, просуваючись вгору по ієрархії престижу. Ви можете пройти шлях від місцевого роботодавця до компанії зі списку Fortune 500 і, зрештою, до одного з ІТ-гігантів.</p><p>Звичайно, робота в корпорації підходить не всім. Я розповім детальніше в четвертому розділі. Але знайте, що це один із варіантів для побудови своєї репутації.</p><h3 id="--53"><strong><strong>Як побудувати репутацію, створюючи портфоліо</strong> з клієнтами на фрилансі</strong></h3><p>Ви можете побудувати свою репутацію, працюючи з компаніями як фрилансер.</p><p>Розробники на фрилансі зазвичай працюють над малими проєктами, які виконують самостійно. Тож це може бути кращою стратегією для побудови репутації на місцевому рівні.</p><p>Наприклад, якщо ви добре попрацювали для місцевого банку, цього може вистачити, щоб переконати місцеву юридичну фірму укласти з вами договір.</p><p>Існують певні переваги в тому, щоб бути «місцевим героєм». Я знаю багатьох розробників, які можуть ефективно суперничати з онлайн-конкурентами лише завдяки фізичній присутності на зустрічах та знайомствам з місцевими.</p><h3 id="--54"><strong><strong>Як створити портфоліо </strong>своїх<strong> робіт</strong></strong></h3><p>Після того, як реалізуєте кілька проєктів, їх варто продемонструвати. Найкраще це зробити за допомогою коротких відео.</p><p>У всіх обмежений час. Ніхто не буде завантажувати ваш код і запускати його на своєму комп’ютері.</p><p>А якщо поділитесь посиланням на вебсайт, то люди можуть не до кінця зрозуміти на що дивляться і чому це щось особливе.</p><p>Тому я рекомендую використовувати інструмент для запису екрана і робити 2-хвилинні відеодемо.</p><p>Двох хвилин має вистачити, щоб показати, як працює проєкт. А після цього можете пояснити деякі деталі реалізації та прийняті вами дизайнерські рішення.</p><p>Але завжди починайте з демо. Люди хочуть бачити, як щось працює. Вони хочуть щось наочне.</p><p>Як тільки ви зацікавили людей привабливою демонстрацією роботи свого застосунку, можете пояснити всі деталі, які вважаєте за потрібне. Ваша аудиторія тепер матиме більше контексту і буде більш зацікавленою.</p><p>Дві хвилини — це ідеальна тривалість, оскільки тоді можна завантажити відео на X (Twitter) і воно автоматично відтворюватиметься, коли люди прокручуватимуть стрічку.</p><p>Відео з автоматичним відтворенням переглядають значно частіше. Вони спрощують перегляд, оскільки не потрібно натискати кнопку відтворення або переходити на інший вебсайт.</p><figure class="kg-card kg-embed-card"><iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="" title="X Post" src="https://platform.twitter.com/embed/Tweet.html?creatorScreenName=ossia&amp;dnt=false&amp;embedId=twitter-widget-0&amp;features=eyJ0ZndfdGltZWxpbmVfbGlzdCI6eyJidWNrZXQiOltdLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X2ZvbGxvd2VyX2NvdW50X3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9iYWNrZW5kIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19yZWZzcmNfc2Vzc2lvbiI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfZm9zbnJfc29mdF9pbnRlcnZlbnRpb25zX2VuYWJsZWQiOnsiYnVja2V0Ijoib24iLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X21peGVkX21lZGlhXzE1ODk3Ijp7ImJ1Y2tldCI6InRyZWF0bWVudCIsInZlcnNpb24iOm51bGx9LCJ0ZndfZXhwZXJpbWVudHNfY29va2llX2V4cGlyYXRpb24iOnsiYnVja2V0IjoxMjA5NjAwLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X3Nob3dfYmlyZHdhdGNoX3Bpdm90c19lbmFibGVkIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19kdXBsaWNhdGVfc2NyaWJlc190b19zZXR0aW5ncyI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdXNlX3Byb2ZpbGVfaW1hZ2Vfc2hhcGVfZW5hYmxlZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdmlkZW9faGxzX2R5bmFtaWNfbWFuaWZlc3RzXzE1MDgyIjp7ImJ1Y2tldCI6InRydWVfYml0cmF0ZSIsInZlcnNpb24iOm51bGx9LCJ0ZndfbGVnYWN5X3RpbWVsaW5lX3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9mcm9udGVuZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9fQ%3D%3D&amp;frame=false&amp;hideCard=false&amp;hideThread=false&amp;id=1603405016525688834&amp;lang=en&amp;origin=https%3A%2F%2Fwww.freecodecamp.org%2Fnews%2Flearn-to-code-book%2F&amp;sessionId=854907250f8fb9d855251f5c076aa157cbdb553e&amp;siteScreenName=freecodecamp&amp;theme=light&amp;widgetsVersion=2615f7e52b7e0%3A1702314776716&amp;width=550px" data-tweet-id="1603405016525688834" style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; font-weight: inherit; font-width: inherit; line-height: inherit; font-family: inherit; font-size-adjust: inherit; font-kerning: inherit; font-variant-alternates: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-position: inherit; font-variant-emoji: inherit; font-feature-settings: inherit; font-optical-sizing: inherit; font-variation-settings: inherit; font-size: 22px; vertical-align: middle; position: static; visibility: visible; width: 551px; height: 700px; display: block; flex-grow: 1;" loading="lazy"></iframe></figure><p>Такі демо можна публікувати на YouTube, X (Twitter), GitHub і, звісно, на власному портфоліо.</p><p>Для запису таких відео я рекомендую використовувати QuickTime, який вбудовано в MacOS. Якщо ж користуєтеся Windows, вам підійде Game Recorder — застосунок, що входить до стандартного пакету Windows 10.</p><p>А якщо вам треба більш потужний інструмент, зверніть увагу на OBS — це безоплатна програма з відкритим кодом. Вона складніша в опануванні, але її можна налаштувати під будь-які потреби.</p><p>Декілька порад щодо запису: використовуйте якомога більший розмір шрифту та додатковий мікрофон. Будь-який мікрофон — навіть від дешевих навушників — буде кращим за вбудований мікрофон ноутбука.</p><p>Приділіть достатньо часу на запис і перезапис, поки не досягнете бажаного результату.</p><p>Уміння демонструвати свої проєкти та презентувати код — корисна навичка, що стане в нагоді впродовж усієї кар’єри. Не варто шкодувати часу на підготовку до презентації.</p><h3 id="--55"><strong><strong>Як запустити власний проєкт з відкритим кодом, компанію або фонд</strong></strong></h3><p>Бути засновником — це найшвидший, однак і найризикованіший спосіб зарекомендувати себе як розробник.</p><p>Це ризиковано, оскільки ви вкладаєте час, гроші, а можливо, навіть особисті стосунки — і все заради невідомого результату.</p><p>Якщо ви тривалий час будете робити внески до проєктів з відкритим кодом, то створите репутацію <em>розробника</em>.</p><p>Якщо ви тривалий час будете брати участь у хакатонах, то створите репутацію <em>розробника</em>.</p><p>Проте ви можете роками намагатися реалізувати підприємницькі проєкти, так і не досягнувши успіху (при цьому даремно витративши час, гроші та знайомства).</p><p>Підприємництво не входить у тематику цієї книги. Але якщо вам цікаво, ось невеличка порада:</p><p><strong>Більшість підприємців не досягає успіху.</strong> Деякі — через обставини, на які не можна вплинути. Але багато хто зазнає невдачі через те, що не розуміють суті ризиків, на які йдуть.</p><p>Не поспішайте запускати проєкт, створювати компанію чи фонд. Спробуйте попрацювати в інших організаціях, які вже працюють у галузі, що вас цікавить.</p><p>Коли працюєте на когось, то вам платять за те, щоб ви навчалися. Ви отримуєте практичний досвід та знайомитеся з можливими ризиками. Крім того, ви можете назбирати кошти для власної справи в майбутньому.</p><h2 id="--56"><strong><strong>Як не зруйнувати репутацію</strong></strong></h2><blockquote>«Потрібно все життя, щоб побудувати хорошу репутацію, а щоб її втратити достатньо однієї хвилини» — Вілл Роджерс (актор, ковбой і один із моїх героїв, коли я зростав в Оклахома-Сіті)</blockquote><p>Побудова репутації — це марафон, а не спринт.</p><p>Щоб побудувати досить міцну репутацію, яка відкриє потрібні двері, можуть знадобитися роки.</p><p>Але — як і в марафоні, де панує жорстка конкуренція — одне спотикання може коштувати дорогоцінного часу, а одне травмування може вивести вас з гри.</p><h3 id="--57"><strong><strong>Не говоріть дурниць в інтернеті</strong></strong></h3><p>Раніше люди постійно говорили дурниці. Їхні слова висіли в повітрі кілька хвилин, поки всі хитали головами, а зрештою розвіювалися.</p><p>А тепер люди часто говорять дурниці в інтернеті, що закарбовується назавжди.</p><p>Завжди майте на увазі: щойно ви пишете щось на вебсайті та натискаєте «Опублікувати», інформація потрапляє до бази даних. А резервні копії цієї бази даних зберігаються на кількох серверах по всьому світу.</p><p>Ви можете підтвердити існування даних, але не можете спростувати їх відсутність.</p><p>Враховуйте, що, фактично, всі карти викладені на стіл і цього не змінити. Слово — не горобець, вилетить — не піймаєш. Все, що ви казали, назавжди залишиться записаним.</p><p>Можете видалити коментар або обліковий запис, можете навіть спробувати прибрати їх з результатів пошуку. Але, ймовірно, хтось уже зробив резервну копію на Wayback Machine і коли через кілька років одну з цих баз даних зламають, то ці дані, швидше за все, досі будуть там і хтось зможе їх оприлюднити.</p><p>Зараз небезпечно бути надто балакучим. Тож спершу подумайте, а потім вже говоріть.</p><p>Моя порада, яка, можливо, прозвучить жалюгідно: киньте звичку сперечатися з людьми в мережі.</p><p>Деякі люди дотримуються правила з дитячого майданчика: «Якщо не можеш сказати нічого хорошого, краще мовчи».</p><p>Я ж надаю перевагу такому принципу: «Хвали перед усіма, а критикуй наодинці».</p><p>Я відкрито відзначаю хорошу роботу, виконану кимось у спільноті розробників. Якщо я побачу проєкт, який мене вразить, — я про це скажу.</p><p>Але загалом я намагаюся не критикувати людей. Навіть тих, хто на це заслуговує.</p><p>У суперечці всі виглядають погано.</p><p>Не варто демонструвати злість, заперечувати аргументи або кидатися на когось, хто лише сказав щось безглузде.</p><p>Звісно, уїдливий гумор може принести популярність в інтернеті на короткий час. Але він також може змусити людей любити вас менше і боятися трішки більше.</p><p>Я також намагаюся не скаржитися. Так, мабуть, я міг би розраховувати на краще обслуговування, якби пригрозив написати у X (Twitter) про скасування рейсу.</p><p>Однак люди зайняті. Вони не хочуть витрачати свій дорогоцінний час на мої скарги в соцмережах.</p><p>Моя порада щодо користування соцмережами: намагайтеся висловлюватися позитивно.</p><p>Якщо це питання, в якому ви твердо переконані, то я не зупинятиму вас висловлювати свою думку. Просто подумайте, перш ніж набирати текст і ділитись ним.</p><h3 id="--58"><strong><strong>Не обіцяйте того, чого не можете виконати</strong></strong></h3><p>Один із найпоширеніших способів, якими розробники, на мій погляд, підривають власну репутацію — це надмірні обіцянки та їх недотримання. Це не фатальна помилка, але шкідлива.</p><p>Пам’ятаєте про хакатон у Лас-Вегасі, де мені не вдалося вчасно завершити проєкт до його презентації, і нам довелося використовувати слайди замість готового застосунку?</p><p>Так, це був один із найгірших моментів у процесі мого навчання. Мої колеги по команді були ввічливими, але я впевнений, що вони були і розчарованими. Зрештою, я був надто самовпевненим. Я пообіцяв більше, ніж міг виконати за той проміжок часу, і не виправдав очікувань.</p><p>Набагато краще бути скромним в оцінці своїх здібностей.</p><p>Згадайте притчу про Ікара, який на воскових крилах підлетів надто близько до сонця. Якби ж він підійшов до справи розумніше і повільніше піднімався, то його крила не розплавилися б, і він не впав би у море, залишивши батька з почуттям провини.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/01/1690px-Pieter_Bruegel_de_Oude_-_De_val_van_Icarus.jpg" class="kg-image" alt="Image" width="600" height="400" loading="lazy"><figcaption>«Пейзаж із падінням Ікара» (Пітер Брейгель Старший, бл. 1560).</figcaption></figure><p>Ікар міг би стати переможцем. Він міг би стати видатним. Натомість він — лише ноги, що зникають у морі. А селяни й пастухи навіть не бажають відривати погляду від своєї роботи, щоб оцінити його мізерність.</p><h3 id="--59"><strong><strong>Опануйте залежності</strong>,<strong> перш ніж вони зашкодять репутації</strong></strong></h3><p>Якщо у вас є залежність від наркотиків, алкоголю чи азартних ігор, перш за все — зверніться по допомогу. Пошук роботи може бути довгим і виснажливим процесом, чому варто приділити максимальну увагу.</p><p>Навіть така, здавалося б, нешкідлива річ, як залежність від відеоігор, може відволікати і забирати занадто багато часу. Варто насамперед опанувати її.</p><p>Я не лікар. Я не збираюся читати вам лекцію про те, наскільки шкідливі наркотики. Але скажу одне: напевно, ви чули про різні модні тенденції в Кремнієвій долині, де розробники вживають наркотики, оскільки вважають, що це якось покращить їхні навички чи здатність розв’язувати проблеми.</p><p>Якийсь час існувала тенденція мікродозингу ЛСД та вживання фармацевтичних амфетамінів.</p><p>Перше, що спадає мені на думку: будь-яка перевага, яку вони можуть дати, ймовірно, короткочасна, а в довгостроковій перспективі матиме негативний ефект.</p><p>Не піддавайтеся тиску оточення, яке спонукає вас вживати наркотичні речовини або алкоголь під час дружніх посиденьок (я не пив навіть пива з того часу, як 8 років тому народилася моя донька, і не відчуваю, що щось втратив).</p><p>Якщо ви лікуєтеся від залежності, зверніть увагу, що навчання та пошук роботи — це досить стресовий процес. Не перенапружуйтеся, щоб не зірватись.</p><p>Зрештою, ви ж не хочете, щоб — досягнувши успіху в зміні професії — ваші старі звички знову далися взнаки й перекреслили всі зусилля.</p><h3 id="--60"><strong><strong>Спробуйте розмежувати кар’єру від особистого життя</strong></strong></h3><p>Ви, напевно, чули такі слова: «Не змішуйте роботу з особистим життям».</p><p>Як розробник, ви маєте всі шанси стати впливовою постаттю. Ви будете користуватися певною повагою серед інших мешканців свого міста.</p><p>Можливо, не настільки, як лікарі чи астронавти. Але все ж. Люди будуть дивитися на вас з повагою.</p><p>Ви будете спілкуватися з людьми, які мріють опинитися на вашому місці.</p><p>Не хизуйтеся своїм багатством.</p><p>Не поводьтеся так, ніби ви розумніші за інших.</p><p>Не зловживайте своєю владою, щоб отримати бажане у стосунках.</p><p>Це зробить вас неприємними в очах інших людей. А якщо це будь-яким чином потрапить в інтернет, то може переслідувати вас до кінця кар’єри.</p><p>Ніколи не забувайте, скільки всього ви маєте і скільки всього можете втратити.</p><h3 id="--61"><strong><strong>Користуйтеся </strong>п<strong>рийомом оповідача</strong></strong></h3><p>Я завершу цей розділ невеличким прийомом, який допомагає мені підбадьоритись.</p><p>По-перше, пам’ятайте: ви — герой власної подорожі у світі програмування. У своїй уяві ви — та людина, за якою всі спостерігають і за яку всі вболівають.</p><p>«Прийом оповідача» полягає в тому, щоб описувати свої дії в голові в той самий момент, коли ви їх виконуєте.</p><blockquote><em>Квінсі крокує через хакерспейс, тримаючи ноутбук під рукою. Він ставить чашку під диспенсер гарячої води й опускає туди чайний пакетик. Він відтягує важіль, а коли гаряча вода наповнює чашку, він голосно каже своїм найкращим британським акцентом: «Чай. Чорний. Гарячий».</em><br><br>З енергетичним напоєм у руці він сідає за столик, ставить ноутбук і ловить погляд іншого розробника. Вони на мить дивляться одне одному в вічі. Квінсі ледь-ледь киває головою, вітаючи розробника. Той робить те саме, ніби читаючи його думки: «Я бачу тебе, друже. Бачу, що ти прийшов. Бачу, що ти працюєш».</blockquote><p>Може звучати дивно —&nbsp;в принципі, це дійсно дивно, — але я роблю так весь час і це працює.</p><p>Опис у голові навіть найбуденніших моментів життя може допомогти зарядитися енергією. Осмисліть кожен момент, що розгортається перед вами, і це додасть чіткості вашим цілям.</p><p>Такий прийом працює ще краще, коли думаєте про своє життя в часових періодах («період Taco Bell») чи в переломних моментах («складання вступного іспиту»).</p><p>Як це пов’язано з репутацією? Власне, ваша репутація — це підсумок того, ким ви є і того, що значите для людей.</p><p>Ставлячись до себе більш серйозно, порівнюючи своє життя з фільмом, ви поступово з’ясовуєте, ким ви є і ким хочете стати.</p><p>Коли описуєте свої дії, ви чіткіше усвідомлюєте їх у власній свідомості. Чому я це зробив? Про що я думав? Можна було зробити краще?</p><p>Багато людей руйнують свою репутацію — навіть не усвідомлюючи цього — просто через погані звички.</p><p>Протягом багатьох років я вважав, що мушу бути постійно «кумедним». Я шукав будь-яку нагоду, щоб пожартувати над собою. Багато хто розумів, що я роблю, і вважав це кумедним. Але багато хто не розумів і просто вважав мене дурнем.</p><p>Чому я так робив? Гадаю, це почалося ще в початковій школі, коли я завжди намагався бути клоуном в класі і смішити людей.</p><p>Однак через десятки років це прагнення заповнювати тишу сміхом вже не йшло мені на користь.</p><blockquote><em>«Коли робиш одну й ту саму помилку знову, це вже не помилка. Це — вибір» — Пауло Коельо</em></blockquote><p>Якби не цей прийом, я, мабуть, ще довго не помітив би цієї звички. Але завдяки йому мені стало ясно, наскільки недоречною була моя поведінка.</p><p>Я впевнений, що маю ще багато інших неідеальних способів мислення та дій. Завдяки цьому прийому я сподіваюся виявити їх і виправити, перш ніж вони справлять на людей хибне враження.</p><h3 id="--62"><strong><strong>Ваша репутація стане вашою спадщиною</strong></strong></h3><p>Подумайте, ким хочете бути в кінці своєї історії: як ви хочете, щоб люди згадували про ваше життя на Землі. Починайте відлік звідти.</p><p>Людина, якою ви хочете бути в кінці фільму. Герой, який викликає захоплення у людей. Чому б не почати поводитися так уже зараз?</p><p>Ви можете уявити, як це — бути успішним розробником? Створювати системи програмного забезпечення, на які покладаються люди?</p><p>Яким буде ваше майбутнє «я»? Як ви будете підходити до ситуацій і вирішувати проблеми? Як ви будете розповідати про свої досягнення і невдачі?</p><p>Навіть сама думка про майбутнє може прояснити власні думки та пріоритети.</p><p>Я часто згадую «старого Квінсі» з його болями в спині. Йому доводилось кожні 30 хвилин робити перерву й бігти до туалету.</p><p>Але старий Квінсі все одно намагається працювати, як може. Він рухається, незважаючи на біль у суглобах. Він розмірковує, незважаючи на затуманений розум.</p><p>Старий Квінсі все ще хоче досягати результатів. Він пишається тим, чого досяг, але не витрачає багато часу на роздуми про минуле. Він дивиться вперед — на те, що йому потрібно зробити сьогодні, і на цілі, яких він має досягти.</p><p>Я часто думаю про старого Квінсі і аналізую, як я дійшов до того, де знаходжусь сьогодні.</p><p>Які рішення я можу прийняти сьогодні, щоб завтра стати людиною, гідною поваги? Чи доведеться мені чекати десятиліттями, щоб заслужити таку репутацію? Чи можу я позичити частину цієї поваги з майбутнього?</p><p>Чи можу я заробити хорошу репутацію вже сьогодні, якщо буду розмірковувати як у майбутньому?</p><p>Я вірю, що ви можете скористатися своєю майбутньою репутацією — своєю спадщиною — вже зараз. Просто подумайте про себе в майбутньому і про те, чого досягнете. Використовуйте це як орієнтир, що вестиме вас уперед.</p><p>Сподіваюся, що ці прийоми — прийом оповідача та візуалізація майбутнього — допоможуть не лише замислитися над сутністю репутації, але й зробити конкретні кроки для покращення репутації.</p><p>Адже формування репутації та іміджу — це найпевніший шлях до сталого успіху розробника.</p><p>Успіх може означати багато чого для різних людей. Але більшість людей із більшості культур погодяться: одним із головних аспектів успіху є можливість забезпечити себе та свою сім’ю.</p><p>Саме про це поговоримо далі.</p><!--kg-card-begin: html--><h2 id="розділ-4-як-заробляти-на-програмуванні">Розділ 4: як заробляти на програмуванні (клієнти на фрилансі та пошук роботи)</h2><!--kg-card-end: html--><p>Якщо ви вдосконалювали свої навички, розширювали коло знайомств і розбудовували репутацію, то знайти роботу не так вже й складно.</p><p>Зверніть увагу, що я сказав «не так вже й складно» — але це все одно вимагає чимало зусиль і може виснажити.</p><p>Для початку розповім, як я отримав свою першу роботу.</p><h3 id="-30--3"><strong>Час історій<strong>: </strong>я<strong>к 30-річний </strong>викладач<strong> отримав свою першу роботу </strong>на посаді <strong>розробника?</strong></strong></h3><p><em>У попередній серії «Час історій»<em>: </em>Квінсі активно брав участь у хакатонах і навіть виграв кілька з них. Він вибудовував свою репутацію розробника, який «небезпечний» у роботі з JavaScript. Тобто не дуже вправний...</em></p><p>Щойно закінчився мій насичений навчальний день у бібліотеці в Санта-Барбарі, де я попивав чай і працював над проєктами.</p><p>Найкраще в житті в Каліфорнії — це погода. Ми жартували, що коли орендуєш надзвичайно дорогу однокімнатну квартиру в передмісті, то платиш не за житло, а довкілля.</p><p>Моєю метою було проводити якомога менше часу в тій тісній, столітній щурячій норі, а решту — гуляти містом.</p><p>Це був прекрасний вечір середи. У мене було ще два дні, щоб підготуватися до хакатону, який мав відбутися на вихідних. Але мій мозок був повністю виснажений після цілого дня програмування. Моя дружина працювала допізна, тож я перевірив свій календар, щоб знайти собі якесь заняття.</p><p>У перший понеділок кожного місяця я складав список усіх ІТ-заходів, які відбудуться в Південній Каліфорнії протягом місяця, щоб завжди мати під рукою якийсь захід, на який я міг би піти, якщо у мене будуть сили.</p><p>Що ж, того вечора мала відбутись зустріч спільноти Ruby on Rails у Санта-Барбарі і я ще раніше зареєструвався.</p><p>Я не знав багато про Ruby on Rails, але вже реалізував кілька невеликих проєктів на цьому фреймворку. Я був розробником, який переважно працював з JavaScript та Python.</p><p>Але я подумав: чому б і ні? Мені потрібно продовжувати працювати над нетворкінгом. До того ж місце проведення було всього за кілька кварталів від мене.</p><p>Я зайшов, а там було лише кілька розробників, які сиділи за столом і розмовляли. Швидко стало зрозуміло, що вони працювали разом над місцевим стартапом, підтримуючи велику кодову базу Ruby on Rails. Більшість із них працювали там уже кілька років.</p><p>На той момент я вже цілий рік працював над навичками, нетворкінгом та репутацією, тож під час розмови я почувався впевнено.</p><p>Але я також усвідомлював межі своїх можливостей, тому поводився скромно і не виставляв себе напоказ. Подібно до того, як багато інших успішних розробників ведуть себе під час розмов на ІТ-заходах.</p><p>Стало зрозуміло, що один із розробників за столом був головним інженером. Він підпорядковувався безпосередньо генеральному директору з питань технологій.</p><p>А потім стало зрозуміло, що вони шукають розробників Ruby on Rails.</p><p>Я відверто розповів про свій досвід і свої здібності:</p><p>— Я маю досвід у галузі освіти для дорослих, викладав англійську мову та керував школами. Я почав вивчати програмування лише близько року тому.</p><p>Але чоловік, на диво, не збентежився:</p><p>— Ну, якщо хочеш, приходь на співбесіду. Подивимося, чи підійдеш нашій команді.</p><p>Тієї ночі я йшов додому, відчуваючи якесь напруження. Це був скоріше страх, ніж хвилювання.</p><p>Я відчував, що зовсім не готовий. Я навіть не шукав роботу. Я просто жив на свої заощадження, цілими днями вчився програмувати, а медичну страховку мав завдяки роботі моєї дружини.</p><p>Я був маніакальним заощадником. Люди часто мене за це дражнили. Я сам міняв масло в машині, сам стригся і навіть сам варив рис вдома, коли ми замовляли їжу на доставку — лише щоб заощадити кілька доларів.</p><p>За десять років роботи викладачем мені вдалося заощадити майже чверть мого доходу після оподаткування. Я купував старі відеоігри на Craigslist, а потім перепродавав їх на eBay. Це може звучати безглуздо, але для мене це було суттєвим джерелом доходу.</p><p>Навіщо ми все це накопичували? Ми не знали. Можливо, щоб колись купити будинок у Каліфорнії? Але це означало, що мені не доводилося квапитися з пошуком роботи. Я усвідомлював, що перебуваю у вигідному становищі, і намагався максимально цим скористатися, щодня вивчаючи щось нове.</p><p>Одним словом, я не вважав себе готовим до першої роботи на посаді розробника. Я хвилювався, що якщо мене візьмуть на роботу, це буде великою помилкою. Вони зрозуміють, наскільки я недосвідчений, звільнять мене і тоді мені доведеться пояснювати цей провал на інших співбесідах.</p><p>Звісно, тепер я розумію, що ставився до цієї можливості неправильно. Але дозвольте закінчити історію.</p><p>Коли я домовився про співбесіду, мене попросили надіслати резюме. Я не був упевнений, що робити, тому перерахував професійний досвід з усіх шкіл, в яких я працював протягом років (про роботу в Taco Bell я не згадав).</p><p>Звісно, мій досвід роботи жодним чином не стосувався програмування. Але що мені залишалося робити? Вручити чистий аркуш паперу?</p><p>Що ж, у мене все-таки було онлайн-портфоліо з моїми проєктами, а головне — у мене був список всіх хакатонів, де я перемагав або посідав призові місця. Тож я додав і їх.</p><p>Останні години перед співбесідою я провів за навчальними матеріалами Ruby on Rails, якими користувався протягом останнього року, щоб освіжити пам’ять. А потім я одягнув худі, джинси, взяв рюкзак і пішов до їхнього офісу.</p><p>Секретарка була приємною жінкою, яка провела мене до робочої зони розробників і представила їхній невеликій команді. Їх було, мабуть, десятеро; більшість одягнені в джинси та худі, віком від 20 до 40 років. Серед них було дві жінки.</p><p>Я пробирався крізь лабіринт зі столів і кабелів, кожному тиснув руку й представлявся. Саме тут мені знадобився досвід викладача, який запам’ятовував імена учнів. Я запам’ятав усі імена, тож пізніше, коли я йшов, міг підійти до кожного і сказати:</p><p>— Радий був познайомитися, [ім’я]. Буду радий працювати разом.</p><p>Спочатку я зустрівся з головним інженером. Ми зайшли в невеликий кабінет і зачинили двері.</p><p>Дошка на стіні була вкрита ескізами діаграм на мові UML (Unified Modeling Language — уніфікована мова моделювання). Різнокольорові лінії, нанесені маркером, ілюстрували взаємозв’язки між різними серверами та сервісами.</p><p>Я поглядав на цю дошку, побоюючись, що він відправить мене до неї, аби я розв’язав якісь задачі з програмування та продемонстрував свої навички. Можливо, славнозвісну задачу fizzbuzz? А може, він захоче, щоб я інвертував бінарне дерево?</p><p>Але він навіть не заговорив про дошку. Він просто сидів, весь час пильно дивлячись на мене.</p><p>Це була компанія, що налічувала близько 50 працівників, мала значне венчурне фінансування та тисячі платних клієнтів (переважно малих підприємств). Вони пишалися своєю прагматичністю. Вони жодного разу не поцікавилися, де я вчився і чим займався раніше. Все, що їх насправді цікавило, це…</p><p>— Слухай. Я знаю, що ти вмієш програмувати. Ти весь цей час займався програмуванням і вигравав хакатони. Я переглянув декілька твоїх проєктів. Якість коду цілком пристойна для новачка. Тож мене цікавить інше: ти зможеш освоїти наші методи роботи? Зможеш співпрацювати з іншими розробниками в команді? І найголовніше: зможеш виконувати покладені на тебе завдання?</p><p>Я ковтнув слину, нахилився вперед і зібрав усю свою впевненість:</p><p>— Так. Думаю, що зможу.</p><p>А він відповів:</p><p>— Добре. Чудово. Зачекай у ресторані Pho внизу. Генеральний директор має з’явитися там за хвилину.</p><p>Тож я поспілкувався з ним за мискою локшини. Взагалі-то, я переважно слухав. Я знав, що люди схильні приписувати інтелект тим, хто мовчить. Коли ви уважно слухаєте, це не тільки допомагає стати розумнішими — це навіть робить вас розумнішими в очах інших.</p><p>І цей підхід спрацював. Зустріч тривала близько години. Локшина була смачною. Я дізнався багато про історію компанії та її плани на найближче майбутнє. Генеральний директор сказав:</p><p>— Гаразд, повертайся нагору і поговори з [головним інженером].</p><p>Я пішов нагору. І мені запропонували роботу.</p><p>Тепер хочу наголосити: більшість людей отримують свою першу посаду розробника по-іншому.</p><p>Мабуть, ви думаєте: «Ого, Квінсі випадково отримав роботу розробника, яку навіть не шукав. Зовсім як Форрест Ґамп! Якби ж нам усім так щастило».</p><p>На той момент це так і сприймалось, але в наступному розділі я розповім про відносини між роботодавцями та розробниками. А також про те, що вирішальну роль відіграли не так мої навички, як рік, який я провів за програмуванням, нетворкінгом і репутацією.</p><p>Це не була легка робота у великій ІТ-компанії з усіма виплатами, пільгами та корпоративними розвагами. Це була робота підрядника, за яку я отримував приблизно стільки ж, скільки заробляв викладачем.</p><p>Але це була робота розробника. Компанія платила мені за те, щоб я писав код.</p><p>Тепер я був професійним розробником.</p><h3 id="--63"><strong><strong>Чого хочуть роботодавці</strong></strong></h3><p>Перенесемось на десять років уперед. За цей час я побував по обидва боки столу. Мене запрошували на співбесіди HR-менеджери як розробника і я проводив співбесіди з розробниками як HR-менеджер.</p><p>Я багато спілкувався з розробниками, які шукали роботу. Деякі з них подали сотні резюме, але отримали лише кілька запрошень на співбесіду.</p><p>Я також багато спілкувався з менеджерами та рекрутерами, намагаючись краще зрозуміти, як вони набирають співробітників і на що звертають увагу.</p><p>Я вважаю, що значна частина розчарування, яке відчувають розробники під час процесу працевлаштування, пов’язана з непорозумінням.</p><p>Роботодавці понад усе цінують одну річ: передбачуваність.</p><p>Як думаєте, кого з цих кандидатів обрав би роботодавець?</p><p><strong>А)</strong> Зірка. Програміст, який працює в 10 разів ефективніше за інших і часто демонструє спалахи геніальності, а також здатний на неймовірні сплески продуктивності. Але часто буває неприємним у спілкуванні з колегами та пропускає дедлайни або зустрічі.</p><p><strong>Б)</strong> Розробник середнього рівня, який працює повільніше, але стабільніше. Добре ладнає з колегами, рідко пропускає зустрічі чи дедлайни.</p><p><strong>В) </strong>Схожий на Б за результатами роботи, також добре ладнає з колегами і дотримується дедлайнів. Але за останні 3 роки змінив роботу три рази.</p><p>Мабуть, ви вже здогадалися: <strong>Б</strong> — найкращий кандидат. А все тому, що роботодавці цінують передбачуваність понад усе.</p><p><strong>А</strong> — це підступний кандидат, якого деякі менеджери-початківці можуть помилково взяти на роботу. Якщо вам цікаво, чому наймати А — така погана ідея, прочитайте статтю <a href="https://www.freecodecamp.org/news/we-fired-our-top-talent-best-decision-we-ever-made-4c0a99728fde/">«Ми звільнили найкращого співробітника, що стало найкращим рішенням»</a> (англійською мовою).</p><p>Я додав <strong>В</strong> до цього списку лише для того, щоб наголосити: намагайтеся не змінювати роботу занадто часто.</p><p>Ви можете швидко збільшити свій дохід, «перестрибуючи» від одного роботодавця до іншого. Ви можете почати подаватись на нові вакансії як тільки підпишете договір. Але це відштовхне багатьох HR-менеджерів.</p><p>Як-не-як, куди вітер віє, туди й хмара пливе. Ви будете переходити з однієї кодової бази в іншу, навіть не встигаючи зрозуміти їхньої роботи.</p><p>Зверніть увагу: може знадобитися 6+ місяців, щоб новий розробник досягнув того рівня, коли стане корисним для команди.</p><p>До цього моменту новий співробітник, по суті, є тягарем компанії, оскільки забирає час та енергію у своїх колег, які повинні вводити його в курс справи, допомагати орієнтуватися в кодовій базі та виправляти помилки.</p><h3 id="--64"><strong><strong>Більшість роботодавців уникають ризиків</strong></strong></h3><p>Уявимо, що менеджер найняв не того розробника. Задумайтеся на хвилинку, наскільки це може негативно вплинути на команду.</p><p>У середньому, на пошук розробника йде близько трьох місяців. Роботодавцям спочатку потрібно:</p><ul><li>отримати від керівництва схвалення бюджету на працевлаштування розробника;</li><li>скласти опис вакансії;</li><li>розмістити оголошення на сайтах з працевлаштування та налагодити зв’язок із рекрутерами;</li><li>переглянути резюме (багато з яких будуть недоречними через кандидатів, які сліпо подають заявки на якомога більше вакансій);</li><li>розпочати процес співбесід, що може передбачати переліт кандидатів та їхнє проживання в готелі;</li><li>провести кілька раундів співбесід з багатьма членами команди (для деяких роботодавців це займає кілька днів);</li><li>вибрати остаточного кандидата та домовитися про умови працевлаштування (які багато кандидатів не приймуть);</li><li>підписати договір та адаптувати працівника;</li><li>надати доступ до конфіденційних внутрішніх систем;</li><li>познайомити з колегами та переконатись, що команда подружилась;</li><li>потім проводити місяці за неформальним навчанням, коли працівник повинен розібратися в сервісі або кодовій базі;</li><li>і, нарешті, ввести його в робочі процеси команди.</li></ul><p>Якщо коротко, то багато роботи.</p><p>А тепер уявіть, що після цього всього новий працівник каже:</p><p>— Привіт, я отримав вигіднішу пропозицію від іншої компанії. Бувайте, друзі.</p><p>Або припустимо, що співробітник ненадійний і часто запізнюється на роботу на кілька годин.</p><p>Або ж уявіть, що співробітник бореться з нелікованою наркотичною, алкогольною чи ігровою залежністю, має проблеми з агресією або просто виявляється пасивно-агресивною людиною, що підриває злагоджену роботу команди.</p><p>Тепер доведеться починати весь процес спочатку і шукати нового кандидата.</p><p>Наймати працівників — складно.</p><p>Тож ви розумієте, чому роботодавці не хочуть ризикувати. Багато з них відхилять навіть тих кандидатів, які на перший погляд здаються кваліфікованими, доки не знайдуть когось, у кому впевнені на 99%.</p><h3 id="--65"><strong><strong>Роботодавці не хочуть ризикувати, </strong>а<strong> страждають люди, які шукають роботу</strong></strong></h3><p>Якщо ви вважаєте, що наймати нових працівників — це складно, почекайте, поки не дізнаєтеся про процес подання заявки на роботу. Можливо, вам це вже добре знайомо. Але все відбувається так:</p><ul><li>Потрібно підготувати резюме або CV. У процесi цього ви будете приймати рішення, які потім постійно аналізуватимете протягом усього періоду пошуку роботи.</li><li>Доведеться шукати вакансії в інтернеті, вивчати роботодавців і оцінювати, чи вони підійдуть вам.</li><li>Більшість вакансій ведуть до онлайн-форм, де доведеться раз за разом вписувати своє резюме, сподіваючись, що форма не зависне через помилки сервера або JavaScript.</li><li>Після цього потрібно чекати, поки роботодавець все опрацює. Деякі роботодавці отримують стільки запитів, що не встигають переглянути їх вручну (Google отримує 9000 заявок на день). Роботодавці використовують програми для фільтрації заявок, а рекрутери <a href="https://www.freecodecamp.org/news/you-in-6-seconds-how-to-write-a-resume-that-employers-will-actually-read-fd7757740802/">в середньому витрачають 6 секунд на перегляд кожного резюме</a>. Часто вашу заявку ніхто навіть не перегляне.</li><li>Швидше за все, ви не отримаєте відповіді від компанії. У них немає особливого бажання повідомляти, чому вас відхилили (щоб ви не подали позов про дискримінацію). Якщо пощастить, то отримаєте листа з текстом: «Ми вирішили розглянути інших кандидатів».</li><li>Весь час, який ви витрачаєте на подачу заявок — можливо, кілька годин на тиждень — виснажує психічно і, звісно, не оплачується.</li></ul><p>Неймовірно. Бачите, який жахливий процес найму для роботодавців, а особливо — для кандидатів.</p><p>Але якщо не здастеся, то зрештою отримаєте пропозиції. Пам’ятайте: що посієш, те й пожнеш.</p><p>Ось дані про пошук роботи одного з користувачів freeCodeCamp протягом 12 тижнів:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/01/85L921BMzXxKhVySPo9gxWamr5J4QLFJaVEn.png" class="kg-image" alt="Image" width="600" height="400" loading="lazy"><figcaption>291 поданих заявок, з яких він зрештою отримав 8 офферів.</figcaption></figure><p>З кожною новою пропозицією початкова ставка ставала дедалі вищою. Звісно, варто зауважити, що мова йде про роботу в Сан-Франциско — одному з найдорожчих міст світу.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/01/bDp3eVv6VQS3Og3ulVpwp6dDylIybdpRczsD.png" class="kg-image" alt="Image" width="600" height="400" loading="lazy"><figcaption>Через 12 тижнів йому пропонували майже вдвічі вищу зарплату, ніж на другому тижні.</figcaption></figure><p>Цей розробник досить успішно проходить співбесіди. Крім того, він добре володіє навичками ведення переговорів. <a href="https://www.freecodecamp.org/news/5-key-learnings-from-the-post-bootcamp-job-search-9a07468d2331/">Якщо вам цікаво, можете прочитати про його досвід</a> (англійською мовою).</p><p>Але, як я вже казав раніше, набагато простіше влаштуватися в компанію через службовий вхід.</p><p>Це одна з причин, чому я написав цю книгу. Я не хочу, щоб ви продовжували шукати роботу, користуючись традиційними методами.</p><h3 id="--66"><strong><strong>Якщо ви вдосконалюєте навички, </strong>нетворкінг<strong> і репутацію, </strong>то<strong> зможете оминути значну частину процесу пошуку роботи</strong></strong></h3><p>Протягом усієї книги я ділився техніками, які допоможуть підвищити ймовірність того, що вам «пощастить» отримати роботу.</p><blockquote>«Удача — це зустріч готовності з можливістю. Якби ви не були готовими, коли з’явилася можливість, то вам би не "пощастило"» — Опра Вінфрі</blockquote><p>Ось чому протягом усієї книги я закликав вас розвивати всі три аспекти одночасно і думати про них з першого дня (ще задовго до пошуку роботи).</p><p>Моя історія про те, як я навіть не шукав роботу, але все одно її отримав, може здатися абсурдною. Але таке трапляється частіше, ніж ви можете собі уявити.</p><p>Реальність така: навчитися програмувати важко.</p><p>Але важливо вміти програмувати.</p><p>У кожній галузі — практично в кожній компанії світу — керівники намагаються перекинути роботу на програмне забезпечення.</p><p>Тобто потрібно залучати розробників.</p><p>Час від часу ви можете чути про масові звільнення в ІТ. Більшість звільнень стосується працівників, які не є розробниками. Але часто роботу втрачають і розробники.</p><p>Чому компанії звільняють розробників, витративши стільки часу та коштів на їхній пошук і навчання? За винятком випадків банкрутства, я не знаю відповіді на це питання. І не впевнений, що хтось її знає.</p><p>З’являється все більше свідчень того, що скорочення персоналу знижує довгострокову рентабельність компанії. Однак на практиці багато керівників відчувають тиск з боку інвесторів, які вимагають скорочень. А коли кілька компаній проводять скорочення приблизно одночасно, інші можуть взяти з них приклад.</p><p>Проте, навіть попри звільнення, більшість економістів очікують, що кількість робочих місць для розробників та інших фахівців у галузі програмного забезпечення продовжуватиме зростати. Наприклад, Бюро статистики праці США прогнозує зростання кількості розробників на 15% протягом наступного десятиліття.</p><p>Наразі ситуація на ринку праці може бути напруженою, але мало хто очікує, що цей занепад триватиме довго.</p><p>Я вірю, що завдяки високій компетентності, широкому колу знайомств та бездоганній репутації вам вдасться знайти хорошу роботу навіть у складних умовах на ринку праці.</p><p>Скоріш за все, одного дня роботодавцям і кваліфікованим працівникам стане легше знайти одне одного — без тривалого та виснажливого процесу подання заявок і співбесід.</p><h3 id="--67"><strong><strong>Чого очікувати від співбесіди на посаду розробника</strong></strong></h3><p>Як тільки почнете отримувати запрошення на співбесіди, то відчуєте на собі весь жах цього процесу.</p><p>Типовий перебіг співбесіди може бути таким:</p><ol><li>Проходження онлайн-тесту на оцінку ваших навичок програмування або перший етап інтерв’ю.</li><li>Якщо пройдете тест або перший етап, вас чекає технічна співбесіда по телефону або відеодзвінку.</li><li>Після цього — зустріч в офісі компанії. Зазвичай це кілька співбесід з HR-відділом, менеджерами та розробниками, з якими ви будете працювати.</li></ol><p>У процесі вам доведеться відповідати на запитання, що перевіряють знання з розв’язання проблем, алгоритмів і структур даних, діагностики помилок тощо.</p><p>Інтерв’юери можуть дозволити виконувати ці завдання на комп’ютері в редакторі коду, але часто вам доведеться виконувати їх самостійно біля дошки.</p><p>Головне, про що варто пам’ятати: людина, яка проводить співбесіду, чекає від вас не лише правильної відповіді. Вона також намагається зрозуміти, як ви мислите.</p><p>Їй важливо дізнатися, чи розумієте ви основи програмування та комп’ютерних наук (чи просто відтворюєте завчені розв’язки).</p><p>Звісно, практика роботи з алгоритмами та структурами даних дуже допоможе. Але вам також потрібно вміти мислити вголос і пояснювати хід своїх думок під час написання розв’язків.</p><p>Найкращий спосіб для цього — під час написання коду промовляти вголос те, що робите. Або — якщо ви готові до експериментів — вести пряму трансляцію.</p><p>На Twitch є безліч трансляцій, де люди «навчаються перед публікою», створюючи проєкти на очах у глядачів. Як бонус, це також допоможе заробити репутацію розробника.</p><p>Ще одне, про що варто пам’ятати на співбесіді: інтерв’юер. Ця людина не просто сидить і чекає, поки ви закінчите. Вона перебуває з вами весь час, стежить за вами та оцінює вас свідомо і підсвідомо.</p><p>Намагайтеся зробити співбесіду якомога інтерактивнішою для інтерв’юера. Посміхайтеся та час від часу встановлюйте зоровий контакт. Спробуйте оцінити його мову тіла. Він розслаблений? Киває головою, коли ви пояснюєте певні моменти?</p><p>Інтерв’юер знає, на що саме звернути увагу у коді, тому спробуйте витягнути кілька підказок. Якщо будете висловлювати свої спостереження або задавати вголос відкриті запитання, то вам, можливо, вдасться залучити інтерв’юера до розмови та дати йому відчути свою причетність до процесу.</p><p>Важливо, щоб інтерв’юер сприйняв вас позитивно: щоб він вболівав за вас і міг закрити очі на недоліки або пробачити помилки в коді.</p><p>Ви продаєте себе як потенційного працівника. Переконайтеся, що інтерв’юер бачить у вас вигідну інвестицію.</p><p>Те ж саме стосується будь-яких поведінкових інтерв’ю, які вам, можливо, доведеться пройти — це стосується не навичок, а відповідності корпоративній культурі (я б хотів дати визначення, але кожен менеджер визначає її по-своєму).</p><p>На таких поведінкових інтерв’ю вам доведеться переконати інтерв’юера, що у вас сильні комунікативні навички.</p><p>Безумовно, дуже допомагає вільне володіння мовою, якою проводиться співбесіда, та знання відповідної професійної лексики. Багато чого можна засвоїти, регулярно слухаючи тематичні подкасти (наприклад, <a href="https://www.freecodecamp.org/news/tag/podcast/">подкаст freeCodeCamp</a>).</p><p>Найбільше інтерв’юерів цікавить, чи ви є спокійною людиною, яка добре ладнає з іншими. Найкращий спосіб це продемонструвати — бути ввічливими, утримуватися від нецензурної лексики та не відходити від теми розмови.</p><p>Не варто вступати в суперечку з приводу чогось, що не має відношення до справи (наприклад, спорт). Я також раджу не намагатися виправляти інтерв’юерів, навіть якщо вони кажуть речі, які ви вважаєте безглуздими або неправдивими.</p><p>Ви не зобов’язані приймати оффер, якщо відчуваєте негативну енергетику від компанії. Роботодавці постійно відмовляють кандидатам і ви, як кандидат, також маєте право відмовити. Співбесіда — не найкращий час для конфліктів.</p><h3 id="--68"><strong>Варто<strong> домовлятися про зарплату на першій роботі?</strong></strong></h3><p>Спроба домовитися про вищу зарплату, як правило, не зашкодить, якщо ви будете поводитися ввічливо.</p><p>Я докладно писав про те, <a href="https://www.freecodecamp.org/news/salary-negotiation-how-not-to-set-a-bunch-of-money-on-fire-605aabbaf84b/">як домовлятися про зарплату при працевлаштуванні на посаду розробника</a> (англійською мовою).</p><p>По суті, обговорення вищої початкової зарплати зводиться до ваших аргументів.</p><p>Роботодавець має роботу, яку потрібно виконати. Наскільки сильно він потребує ваших послуг? Які інші варіанти в нього?</p><p>А вам треба дохід, щоб вижити. Які інші варіанти у вас? Який запасний план?</p><p>Якщо у вас є пропозиція роботи від іншого роботодавця і він пропонує певну суму, використайте це як аргумент під час обговорення зарплати.</p><p>Якщо ваш найкращий запасний варіант — повернутися до навчання і здобути вищий науковий ступінь... Це не надто вагомий аргумент, але краще, ніж нічого. Про це можна згадати під час обговорення зарплати.</p><p>Згадайте той тривалий процес працевлаштування, про який я розповідав раніше. Роботодавцям доводиться пройти принаймні десять етапів, перш ніж вони зможуть перейти до офферу. Вони вже розраховують на те, що будете торгуватися, і їх це не здивує.</p><p>Отже, ви опинилися в моїй ситуації — коли компанія раптово пропонує роботу — і стає ніяково обговорювати умови праці.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/01/92508.jpeg" class="kg-image" alt="Image" width="600" height="400" loading="lazy"><figcaption>Смізерс із «Сімпсонів»</figcaption></figure><p>Зізнаюся чесно: коли мені запропонували роботу, я взагалі нічого не розпитував.</p><p>Чи варто було мені тоді обговорити розмір зарплати? Напевно, так.</p><p>Чи мав я достатньо аргументів? Скоріше за все, ні. Мій запасний план був досить простим: продовжувати ходити на хакатони, пити чай і писати код в бібліотеці.</p><p>Можливо, я б міг виторгувати собі кілька додаткових доларів на годину. Але в той момент я не думав про гроші. Я був просто в захваті від того, що стану професійним розробником.</p><p>До речі, після року роботи в компанії вам, скоріш за все, захочеться поговорити про підвищення зарплати. Я вже писав, <a href="https://www.freecodecamp.org/news/youre-underpaid-here-s-how-you-can-get-the-pay-raise-you-deserve-fafcf52956d6/">як просити про підвищення зарплати</a> (англійською мовою), але суть завжди одна: все залежить від аргументів.</p><h3 id="--69"><strong><strong>Чи варто користуватися </strong>послугами<strong> рекрутера під час пошуку роботи?</strong></strong></h3><p>Так. Якщо ви можете знайти рекрутера, який справді допоможе отримати першу роботу, то чому б не спробувати?</p><p>Я вже писав, що <a href="https://www.freecodecamp.org/news/the-tech-recruiter-red-pill-967dd492560c/">рекрутерів недооцінюють</a> (англійською мовою).</p><p>Багато роботодавців готові платити рекрутерам, щоб ті приводили їм висококваліфікованих працівників.</p><p>Рекрутери так само вмотивовані отримати бонус, як і ви знайти роботу:</p><ol><li>Оскільки їхня винагорода залежить від вашої стартової зарплати, вони зацікавлені допомогти вам виторгувати якомога вищу оплату.</li><li>Чим більше кандидатів вони працевлаштовують і чим швидше це зроблять, тим більше зароблять. Тому вони зацікавлені у тому, щоб знайти вам роботу якнайшвидше і перейти до наступного клієнта.</li><li>Оскільки вони отримують винагороду лише в тому випадку, якщо ви успішно влаштуєтеся на роботу (і пропрацюєте там принаймні 90 днів), то для них важливо, що ви компетентні та добре впишетеся в корпоративну культуру.</li></ol><p>Але якщо рекрутер просить у вас гроші за будь-що — це точно тривожний дзвіночок.</p><p>Не всі рекрутери однаково хороші. Перш ніж почати з кимось працювати, перевірте, хто це. Навіть якщо їм заплатить роботодавець, ви все одно інвестуєте свій час у співпрацю з рекрутером. А час — це цінний ресурс.</p><p>Якщо ми вже згадали про час, то один зі способів почати заробляти на коді швидше — ще під час пошуку роботи — знайти кількох клієнтів для фрилансу.</p><h3 id="--70"><strong><strong>Як знайти клієнтів </strong>на<strong> фриланс</strong>і</strong></h3><p>Я раджу розробникам-початківцям спробувати знайти клієнтів для фрилансу ще до активного пошуку роботи. Для цього є три причини:</p><ol><li>Знайти клієнта для фрилансу набагато простіше, ніж влаштуватися на постійну роботу.</li><li>Фриланс менш ризикований, оскільки його можна поєднувати з основною роботою.</li><li>Ви починаєте заробляти на коді раніше й одразу будуєте портфоліо з реальних проєктів.</li></ol><p>Знайти клієнтів на фрилансі значно легше, ніж влаштуватися на роботу розробником. Чому так?</p><p>Подумайте про місцевий малий бізнес. Це може бути сімейний ресторан, невеликий магазин, продаж сантехніки або юридична фірма.</p><p>Скільки користі вони могли б отримати від інтерактивного вебсайту, систем управління офісом та інструментів для автоматизації щоденних робочих процесів? Більшість із них не відмовилися б від такої пропозиції.</p><p>А тепер інше питання. Скільки з них можуть дозволити собі найняти штатного розробника для створення і підтримки цих систем? Далеко не всі.</p><p>Саме тут на допомогу приходять фрилансери. Вони можуть виконувати роботу під конкретні потреби за меншу плату. Малий бізнес може залучити фрилансера для реалізації одного проєкту або на короткий термін.</p><p>Якщо ви активно працюєте над нетворкінгом, то деякі знайомі можуть стати вашими клієнтами.</p><p>Наприклад, ви можете познайомитися з бухгалтером, який хоче оновити свій сайт або додати можливість запису на консультацію чи оплати карткою. Це типові запити малого бізнесу і ви швидко навчитеся їх реалізовувати.</p><p>Ви також можете зустріти керівників малих бізнесів, яким потрібні ERP- та CRM-системи, системи обліку товарів тощо.</p><p>У багатьох випадках вже існує інструмент з відкритим кодом, який можна використати і налаштувати під клієнтів, а потім — навчити їх користуватися цим продуктом та виставити щомісячну плату за обслуговування і вирішення можливих проблем.</p><h3 id="--71"><strong><strong>Чи варто укладати договір на фриланс</strong>і<strong>?</strong></strong></h3><p>Потрібно знайти стандартний шаблон договору, адаптувати його під свої потреби та узгодити з юристом.</p><p>Може здатися трохи ніяково просити місцеву пекарню підписати договір лише для того, щоб оновити сайт чи соцмережі. Але насправді це робить співпрацю більш професійною, ніж просто потиснути руки.</p><p>Малий бізнес навряд чи подасть на вас до суду через кілька тисяч. Але якщо це все-таки трапиться, то ви будете раді, що підписали договір.</p><h3 id="--72"><strong><strong>Скільки брати за фриланс?</strong></strong></h3><p>Я б взяв суму, яку заробляю на основній роботі, розрахував погодинну ставку і подвоїв її. Цифра може здаватись великою, але фриланс складніший за звичайну роботу. Тут постійно треба опановувати щось нове.</p><p>Або ж можна поставити фіксовану ціну за проєкт. Наприклад:</p><p>— Я розроблю цю систему за 1000 $.</p><p>Не забудьте вказати термін, протягом якого готові обслуговувати проєкт. Ви ж не хочете, щоб через три роки вам подзвонили з проханням прийти і полагодити систему, якою ніхто не займався.</p><h3 id="--73"><strong><strong>Як знати, що клієнт на фрилансі заплатить?</strong></strong></h3><p>Багато фрилансерів — і я в тому числі — користуються такою схемою: просіть половину оплати авансом, ще до початку роботи. А коли зможете продемонструвати половину виконаної роботи, попросіть решту.</p><p>Завжди намагайтеся отримати всі гроші ще до повного завершення проєкту. Тоді клієнт не зможе відкладати виплату чи просити виконати додаткову роботу.</p><p>Якщо ви вже отримали повну оплату, будь-яка додаткова допомога з вашого боку виглядатиме як «Я роблю більше, ніж ми домовлялися».</p><p>А це зовсім інше, ніж «А мені взагалі заплатять за всю цю роботу?»</p><h3 id="-upwork-fiverr"><strong><strong>Чи варто використовувати </strong>такі платформи, як <strong>Upwork </strong>або<strong> Fiverr?</strong></strong></h3><p>Якщо ви живете у невеликому місті чи селі й не можете знайти місцевих клієнтів, можна спробувати ці платформи. Але в іншому випадку я б не робив акцент на них. Ось причина:</p><p>Якщо шукаєте проєкти на фриланс-біржах, то конкуруєте із людьми з усього світу. Багато з них живуть у регіонах зі значно нижчою вартістю життя. Деякі навіть не дуже переймаються своєю репутацією і готові виконувати роботу абияк.</p><p>Такі платформи створюють ефект «голодних ігор», де перемагає той, хто готовий зробити роботу найдешевше.</p><p>Якщо ж ви зосередитеся на пошуку місцевих клієнтів, вам не доведеться конкурувати з фрилансерами з-за кордону.</p><p>Те саме стосується і тих, хто шукає фрилансера-розробника. Якщо вам колись потрібно буде найняти фрилансера, я щиро раджу працювати з людиною, з якою можна зустрітися особисто і яка є частиною вашого кола спілкування.</p><p>Людина, яка вже кілька років живе у вашому місті й відвідує ті самі заходи, що й ви, навряд чи спробує вас обдурити. Якщо і ви, і клієнт дбаєте про свою репутацію, значить ви обоє зацікавлені в успішному партнерстві.</p><p>Кожен з вас може принести успіх у портфоліо іншого.</p><h3 id="--74"><strong><strong>Фриланс </strong>—<strong> це як компанія з одним співробітником</strong>, тому<strong> на вас чекає </strong>багато<strong> додаткової роботи</strong></strong></h3><p>Не варто недооцінювати обсяг додаткової роботи, коли працюєте розробником на фрилансі.</p><p>Почнемо з того, що вам доведеться зареєструвати власну юридичну особу.</p><p>Найпоширеніший підхід в Україні — це створити ФОП.</p><p>Детальну інформацію про реєстрацію ФОП можна знайти на сайті <a href="https://diia.gov.ua/services/reyestraciya-fop">Дії</a> або у місцевому центрі надання адміністративних послуг. Але якщо ви серйозно налаштовані на фриланс — краще проконсультуватися з юристом або бухгалтером, щоб все оформити правильно.</p><h3 id="--75"><strong><strong>Коли варто </strong>за<strong>лишити фриланс і почати шукати роботу?</strong></strong></h3><p>Якщо фриланс дозволяє вам покривати всі витрати, можете продовжувати займатися ним. Згодом ви навіть зможете створити власну агенцію з розробки програмного забезпечення та найняти інших розробників, які будуть вам допомагати.</p><p>Але, якщо хочеться стабільності, вам може пощастити: клієнти з фрилансу можуть перетворитися на повноцінних роботодавців, якщо ви достатньо довго співпрацюєте. У якийсь момент клієнту може стати вигідніше просто запропонувати вам постійну роботу з нижчою погодинною ставкою. Ви отримуєте стабільний 40-годинний робочий тиждень, а вони — ваші послуги на постійній основі.</p><p>Ви можете залишити собі кількох клієнтів на фрилансі навіть після того, як отримаєте роботу. Це може стати хорошим додатковим доходом. Але пам’ятайте: перша робота розробника може забирати дуже багато сил і часу, особливо на початку. Про це поговоримо далі.</p><p>Наскільки ж насиченим і складним буде перший рік у ролі професійного розробника? Зараз розберемося.</p><!--kg-card-begin: html--><h2 id="розділ-5-як-досягти-успіху-на-першій-роботі">Розділ 5: як досягти успіху на першій роботі</h2><!--kg-card-end: html--><blockquote>«Кораблю безпечно стояти у порту, але його будують не для цього» — Ґрейс Гоппер (математикиня, американська вчена в галузі комп’ютерних наук та контрадмірал ВМС США)</blockquote><p>Як тільки отримаєте першу посаду розробника, почнеться справжнє навчання.</p><p>Ви навчитеся ефективно працювати в команді з іншими розробниками.</p><p>Ви навчитеся орієнтуватися у великих базах коду.</p><p>Ви опануєте системи контролю версій, інструменти CI/CD, системи управління проєктами та багато іншого.</p><p>Ви навчитеся працювати під керівництвом головного інженера, вкладатися в дедлайни та діяти в умовах невизначеності.</p><p>А найголовніше — ви навчитеся керувати собою.</p><p>Ви дізнаєтесь, як долати психологічні бар’єри (серед яких синдромом самозванця), а також зрозумієте свою зону комфорту і навчитеся виходити з неї.</p><h3 id="-30--4"><strong>Час історій<strong>: </strong>як 30-річний викладач<strong> </strong>досягнув успіху<strong> на своїй першій </strong>посаді<strong> розробника?</strong></strong></h3><p><em>У попередній серії «Час історій»<em>: </em>Квінсі вперше отримав посаду розробника в місцевому стартапі. Він став одним із десятка розробників, які підтримували велику і складну кодову базу. І він взагалі не мав уявлення, що йому робити…</em></p><p>Я прокинувся о 4-й ранку і більше не міг заснути. Я намагався, але відчував тривогу і паніку.</p><p>Я пропрацював у галузі освіти десять років. Спочатку як репетитор, потім — викладач, а згодом — директор школи.</p><p>За кілька годин я мав почати все з нуля; почати все з початку як розробник.</p><p>Чи матиме значення весь мій попередній досвід і досягнення в новій кар’єрі?</p><p>Я зробив те, що завжди роблю, коли відчуваю тривогу — пішов на пробіжку. Я мчав вниз по схилах і світло від налобного ліхтаря хиталося в темряві. Я пробіг уздовж узбережжя, поки сонце повільно піднімалося над верхівками дерев.</p><p>Коли я повернувся додому, дружина вже збиралася на роботу. Вона сказала мені не хвилюватися:</p><p>— Я любитиму тебе, навіть якщо тебе звільнять.</p><p>Коли я прийшов у новий офіс, там нікого не було. Як викладач, я звик приходити на роботу рівно о 7:30. Але швидко зрозумів, що більшість розробників не працює так рано.</p><p>Тож я сів на підлогу в коридорі й почав писати код на своєму нетбуці.</p><p>Одна зі співробітниць підійшла до мене з настороженим виразом обличчя. Вона, мабуть, подумала, що я — випадковий незнайомець. Але я запевнив її, що тепер працюю в цій компанії, і вмовив впустити мене всередину.</p><p>Було дивно йти порожнім офісом до відділу розробників, коли єдиним орієнтиром було світло вивіски «Вихід».</p><p>Я поставив свій нетбук на пустий робочий стіл і закінчив писати код.</p><p>Через деякий час навколо мене заблимало світло. Прийшов бос. Спочатку він навіть не звернув на мене уваги: він просто сів за стіл і почав швидко стукати по клавішах механічної клавіатури.</p><p>— Ларсоне! — нарешті сказав він. — Готовий до першого дня?</p><p>Я не був готовий, але хотів здаватись впевненим. Тож сказав фразу з одного з моїх улюблених фільмів «Великий переполох у малому Китаї»:</p><p>— Завжди готовий.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/01/big-trubs-born-ready.jpeg" class="kg-image" alt="Image" width="600" height="400" loading="lazy"><figcaption>Ви, мабуть, чули цю фразу вже тисячу разів. Але вперше її сказав Джек Бертон у 1986 році своєму другу Ван Чі, коли вони готувалися протистояти тисячолітньому чарівникові в його сховищі смерті. Не знаю, як батьки дозволили мені дивитися це в дитинстві, але дякую, що дозволили.</figcaption></figure><p>— Чудово, — сказав бос. — Тоді підберемо тобі комп’ютер.</p><p>— Та в мене вже є, — відповів я, постукавши по своєму нетбуку за двісті доларів. — Тут встановлений Linux Mint і я вже навіть налаштував .emacs, щоб…</p><p>— Ми працюємо на Mac, — сказав бос. Він пішов до комірчини, побув там трохи й повернувся з ноутбуком. — Ось. Модель трирічної давності, але має підійти. Ми скинули його до заводських налаштувань.</p><p>Я вже хотів сказати, що звик до свого ґаджета і працюю з ним значно швидше, але він не хотів мене слухати:</p><p>— Ми всі користуємося однаковими інструментами. Так значно легше працювати разом. Є стандарт — працюй за ним, розумієш.</p><p>Тоді я вперше почув фразу «Є стандарт — працюй за ним», але потім вона звучала дуже часто.</p><p>Наступні кілька годин я налаштовував свій новий робочий ноутбук, поки інші розробники поступово приходили в офіс.</p><p>Близько 10-ї години ранку ми почали зустріч. Усі стали навколо дошки й по черзі розповідали, над чим працюватимуть сьогодні.</p><p>Кожен давав короткий звіт про свій прогрес.</p><p>Коли дійшла черга до мене, я почав представлятися. Я і так вже нервував, як раптом у кімнату зайшов не хто інший, як Майк — той ультрамарафонець, який організовував заходи «Santa Barbara Startup». Він жував бебі-моркву і вже пробіг того ранку близько 50 кілометрів.</p><p>Коли я закінчив, Майк привітав мене й сказав, що бачив мене на своїх заходах. Потім дав короткий 15-секундний звіт про одну з функцій, над якою працював.</p><p>Уся зустріч тривала десь 10 хвилин, після чого всі розійшлися по своїх робочих місцях.</p><p>Зрештою, мені вдалося запустити кодову базу компанії на новому ноутбуці. Це була програма Ruby on Rails, яка розвивалася протягом п’яти років. Я запустив команду <code>rake stats</code> і побачив мільйони рядків коду. Я злякався. Як я маю розібратись з цим?</p><p>Мій сусід, кремезний бородатий програміст, сказав:</p><p>— Та не переживай, більшість з цього — просто пакети. Реальний код, з яким ти працюватимеш, має десь сто тисяч рядків. Розберешся.</p><p>Я зітхнув, але подумав: «Ну, хоч не мільйон. І це добре».</p><p>— До речі, я — Нік, — представився він. — Якщо що — звертайся. Я сам вже кілька років копаюся в цьому коді, тож, думаю, зможу допомогти.</p><p>Наступні кілька днів я буквально засипав Ніка питаннями про кожну внутрішню систему, з якою стикався.</p><p>З часом Нік почав ставити собі статус «не турбувати» і вдягати навушники з шумозаглушенням. Він трохи відвертався від мене, і вся його мова тіла ніби говорила: «Залиш мене в спокої, щоб я теж міг трохи попрацювати».</p><p>Це був один із перших уроків про динаміку роботи в команді. Не варто зловживати терпінням колег і засипати їх великою кількістю запитань. Потрібно вчитися розбиратися самостійно.</p><p>Але кодова база була величезною і майже не задокументованою, окрім вбудованих коментарів у коді та досить бідної вікі-сторінки команди.</p><p>До того ж, це був закритий проєкт, з яким працювали лише розробники компанії, тож я не міг просто знайти інформацію на Stack Overflow. Доводилося буквально намацувати шлях у темряві.</p><p>Я почав звертатися до колег по черзі. Але здавалося, що я швидко вичерпую їхнє терпіння допомагати мені як новому члену команди.</p><p>Я зайшов занадто далеко. Я став соромитися задавати навіть прості запитання. Я встановив для себе правило, що буду намагатися самостійно вирішити проблему протягом двох годин, перш ніж проситиму про допомогу.</p><p>Зрештою, після кількох годин марних спроб я все-таки звертався по допомогу. Коли мій менеджер дізнався, що я застряг на завданні на пів дня, він запитав:</p><p>— Чому не попросив про допомогу раніше?</p><p>Ще однією проблемою було розуміння самої кодової бази («моноліту» та його численних мікросервісів).</p><p>У кодовій базі були тисячі модульних та інтеграційних тестів. Кожного разу, коли хтось додавав новий код, то очікували, що будуть і тести. Ці тести підтверджували, що код працює як треба і не порушує жодних функцій.</p><p>Я часто «ламав збірку» через те, що додавав код, який, на мою думку, був достатньо протестованим. Але мій код ламав якусь іншу частину системи, про яку я навіть не думав. Це дратувало всю команду, яка не могла додати свій код, доки не було виправлено основну проблему.</p><p>Таке траплялося кілька разів на тиждень. Я не був єдиним, хто робив такі помилки. Але <strong>відчувалося</strong> так, ніби тільки я винен.</p><p>Були дні, коли мені здавалося, що я просто не створений бути розробником. Я казав собі: «Кого я обманюю? Я просто прокинувся одного дня і вирішив, що стану розробником».</p><p>У голові постійно крутилися слова моїх знайомих розробників, які я чув ще рік тому, коли тільки починав свій шлях у програмуванні:</p><p>— Як ти збираєшся змагатися з тими, хто змалку займається програмуванням?</p><p>— Потрібно перейти цілу гору знань.</p><p>— Чому тобі просто не займатися тим, що добре виходить?</p><p>Я почав робити дедалі довші перерви, лише б відірватися від комп’ютера. В офісі була кухня, повна снеків. Я постійно знаходив причину піти перекусити. Будь-що, аби відкласти те відчуття, що я взагалі не розумію, чим займаюсь.</p><p>Перші кілька місяців були справді важкими. На ранкових зустрічах здавалося, що всі рухаються вперед дуже швидко: виправляють помилки, додають нові функції. А мені ніби не було що сказати. Що я все ще працював над тією ж задачею, що й вчора.</p><p>Щоранку, коли я прокидався і збирався на роботу, мене накривало відчуття тривоги: «Сьогодні мене точно звільнять».</p><p>Але коли я приходив у офіс, всі були доволі привітними й терплячими. Якщо я справді застрягав, я просив допомоги. <strong>Потроху</strong> рухався вперед, іноді навіть вдавалося виправити одну-дві помилки.</p><p>Я почав швидше орієнтуватися в кодовій базі, швидше аналізувати стек викликів, коли код видавав помилки і швидше публікувати нові функції.</p><p>Кожного разу, коли бос кликав мене до себе в кабінет, я думав: «Ну все, я був правий. Сьогодні мене звільнять». Але він просто давав мені нові завдання. Хух!</p><p>Це було дуже дивне відчуття: я панікую і впевнений, що мене зараз звільнять, а він навіть не підозрює, що щось не так.</p><p>Звісно, я чув про «синдром самозванця». Але не усвідомлював, що це саме він. Я думав, що в мене просто «синдром нездари в програмуванні».</p><p>Якось я сидів поруч з Ніком і він виглядав досить виснаженим. Я запропонував принести йому воду з кухні.</p><p>Коли я повернувся, він відкрив пляшку, зробив ковток і відкинувся на спинку крісла. Він дивився на монітор, повний коду:</p><p>— Цей баг, чувак. Вже три тижні намагаюся його пофіксити. Мені здається, що дебажу його навіть уві сні.</p><p>— Три тижні, щоб виправити один і той самий баг? — перепитав я. Раніше я ніколи не стикався з подібним.</p><p>— Деякі баги складніше виправити. Цей — один з підступних.</p><p>Мене від цієї ситуації добряче струснуло. Я сприймав роботу як набір окремих задач. Ніби будь-яка проблема має вирішуватись за пів дня, а якщо довше — значить, я щось роблю не так.</p><p>А тут Нік — дипломований програміст, випускник Каліфорнійського університету, з роками досвіду в цьому проєкті — не міг розв’язати одну-єдину проблему вже три тижні.</p><p>Можливо, я був надто суворим до себе. Можливо, не всі проблеми, які я виправляв, були на пів дня. Можливо, частина з них — на два-три дні. Так, я був недосвідченим і працював повільніше. Але все ж я ставив собі занадто високі вимоги.</p><p>Зрештою, коли ми планували час на розробку нових функцій, у нас були «5-денні задачі» або навіть «2-тижневі проєкти». Ми не робили так із виправленням помилок, але там ситуація була схожою.</p><p>Я прийшов додому і прочитав про синдром самозванця. Те, що я знайшов, допомогло зрозуміти причину моїх переживань.</p><p>Протягом наступних місяців я продовжував розробляти нові функції для кодової бази і працювати з командою. Робота досі була складною і виснажливою, але поступово ставало трохи легше.</p><p>Я щодня спілкувався з колегами за обідом. Ми грали в настільні ігри. Одного тижня навіть організували шаховий турнір.</p><p>Через кілька раундів я зіграв проти CEO.</p><p>У нього був доволі нестандартний стиль гри. Він використовував дивний перший хід, який рідко обирають серйозні шахісти, і мені вдалося отримати перевагу на початку партії.</p><p>Але за декілька ходів йому поступово вдалося повернути контроль над грою. Зрештою, він виграв партію.</p><p>Коли я запитав, як він знаходить час підтримувати свій рівень у шахах і керувати компанією, він відповів:</p><p>— Та я й не підтримую. Я граю лише раз чи два на рік.</p><p>Потім він на мить замовк з піднятою рукою, ніби хотів виголосити лекцію, і сказав:</p><p>— Мій дядько був професійним шахістом. Він дав мені лише одну пораду, якої варто дотримуватися: <strong>щоразу, коли твій суперник робить хід, пригальмуй і спробуй поглянути на гру з його боку — чому він зробив саме цей хід?</strong></p><p>Він кивнув і вибачився, бо мусив бігти на зустріч.</p><p>Я багато думав про ці слова протягом років. І зрештою зрозумів, що ця порада стосується не лише шахів. Її можна застосувати до будь-якої ситуації, де є супротивник.</p><h3 id="--76"><strong><strong>Якщо постійно роби</strong>те<strong> одну й ту саму задачу — автоматизуй</strong>те<strong> її</strong></strong></h3><p>Ще один важливий урок, який я засвоїв: оскільки в мене було найменше досвіду серед команди, мені часто діставалася робота, яку ніхто не хотів робити. Одне з таких завдань — бути «наглядачем збірки».</p><p>Кожного разу, коли хтось ламав збірку, я мав підтягнути останню версію головної гілки і через <code>git bisect</code> знайти те, що призвело до помилки.</p><p>Я відкривав той код, запускав тести й розбирався, що пішло не так. Потім писав людині, яка зламала збірку, що саме їй треба виправити.</p><p>З часом я став робити це дуже швидко. У дні, повні незрозумілих проблем і запитів, я навіть хотів, щоб хтось зламав збірку. Це давало мені можливість миттєво відчути себе корисним.</p><p>Не минуло багато часу, як хтось із команди сказав:</p><p>— Збірка часто ламається, тож її треба просто автоматизувати.</p><p>Я нічого не сказав, але трохи напружився. Це здавалося поганою ідеєю. Як якийсь скрипт може так само добре знаходити помилку, як я — людина-розробник?</p><p>Через кілька днів один із колег справді написав скрипт і мені більше не треба було наглядати за збіркою.</p><p>Було дивне відчуття, коли приходило повідомлення про зламану збірку, а через секунду — вже інше повідомлення з точною помилкою і людиною, яка має це виправити.</p><p>Я навіть відчув щось схоже на образу. Я нічого не сказав, але подумки думав: «Це мав бути я. Цей скрипт забрав у мене роботу».</p><p>Зараз я згадую цю історію зі сміхом. Уявляю себе 40-річним розробником, який і досі кілька разів на тиждень кидає всі справи, щоб стати «наглядачем збірки».</p><p>Тому що на практиці, якщо завдання можна автоматизувати (тобто розбити на чіткі кроки, які комп’ютер здатен виконувати за вас), то його варто автоматизувати.</p><p>У вас знайдеться набагато цікавіша робота, на яку можна витратити свій час.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/01/is_it_worth_the_time_2x-1.png" class="kg-image" alt="Image" width="600" height="400" loading="lazy"><figcaption>Цей графік з XKCD допоможе зрозуміти, чи варто вкладати час в автоматизацію.</figcaption></figure><h3 id="--77"><strong><strong>Уроки від старших</strong></strong></h3><p>Я багато чого навчився від інших членів команди. Від Майка — про концепції дизайну продукту. Якось він взяв мене на пробіжку по пляжу і поділився технікою, коли подушки стоп торкаються землі раніше ніж п’яти. Це трохи зменшує навантаження на суглоби.</p><p>А від Ніка я перейняв багато речей про agile-розробку. Він порадив мені кілька хороших книг з розробки програмного забезпечення, які були в бібліотеці компанії. Він навіть запросив мене на новосілля і познайомив з дітьми.</p><p>Приблизно через рік роботи в компанії я відчув, що настав час спробувати розпочати власну справу та реалізувати кілька проєктів у галузі онлайн-навчання. Я зустрівся з технічним директором і повідомив йому про своє рішення:</p><p>—&nbsp;Я дуже вдячний, що мене взяли на роботу навіть попри те, що я був найслабшим розробником у компанії.</p><p>Він засміявся і відповів:</p><p>— Ну, коли ти тільки прийшов, то й справді був найгіршим у команді. Я б сказав: ти й досі найгірший.</p><p>Я сидів ніяково, посміхався і кліпав очима, бо не розумів, чи він злиться, що я звільняюся.</p><p>А потім він додав:</p><p>— Але це добре. Ти розумний. Завжди <strong>краще бути найслабшим музикантом у гурті</strong>. Тобі потрібно бути серед людей, які сильніші за тебе. Саме так ти розвиватимешся.</p><p>Через два тижні я вніс останні зміни, передав відкриті задачі й скинув ноутбук до заводських налаштувань, перед тим як віддати його менеджеру.</p><p>Я попрощався з командою і вийшов. Вдихнув вечірнє каліфорнійське повітря.</p><p>Я одразу занурився в роботу. Почав шукати замовлення на фрилансі, щоб заробити на прожиття. Знайшов квартиру в районі затоки, одразу через міст від центру технологічного світу — району СоМа в Сан-Франциско.</p><p>Тоді я став професійним розробником із роком досвіду за плечима.</p><p>Я був готовий мріяти по-новому і рухатися далі.</p><p>Я вирушив у світ стартапів.</p><h3 id="--78"><strong>Уроки з<strong> першого року роботи розробником</strong></strong></h3><p>За перший рік роботи професійним розробником я багато чого зробив добре. Я б поставив собі четвірку з мінусом.</p><p>Але якби у мене була можливість почати все спочатку, то дещо я зробив би інакше.</p><p>Ось кілька порад. Нехай вони допоможуть вам вчитися швидше і без зайвого стресу.</p><h4 id="--79"><strong><strong>Відкиньте своє его</strong></strong></h4><p>Багато людей, які приходять в ІТ, починають з самого низу. Часто їх називають «Junior Developer».</p><p>Може бути трохи ніяково, коли ви вже доросла людина, а в назві посади написано «junior». Але набравшись терпіння та доклавши зусиль, ви підете далі.</p><p>Одна з моїх проблем полягала в тому, що у мене було 10 років професійного досвіду. Я не був новачком. Так, я тільки починав в ІТ, але мав значний досвід у викладанні і навіть управлінні (на останній роботі я керував командою з 30 людей).</p><p>І все ж попри весь цей досвід, я залишався новачком у програмуванні. Недосвідченим. Нубом.</p><p>Мені хотілося кричати: «Я колись був босом — не потрібно мені вказувати», але насправді мені потрібно було вказувати.</p><p>А що, як я випадково зламаю систему? Або додам у застосунок серйозну помилку? Або видалю всю базу даних? Чи зашифрую щось важливе і загублю ключ?</p><p>Такі речі трапляються постійно.</p><p>Реальність така, що новий розробник — це як слон у посудній лавці: намагається рухатися обережно, але все одно щось ламає на своєму шляху.</p><p>Не зліться на своїх колег і не піддавайтесь спокусі розповідати про свої дипломи, нагороди або те, що сам мер вручив вам ключі від міста (гаразд, історії про ключі від міста в мене теж не було).</p><p>Не тільки тому, що з вами буде важко співпрацювати. А й тому, що це відволікатиме вас від роботи.</p><p>Перші кілька місяців на посаді розробника я згадував свої минулі досягнення як розраду: «Так, я погано пишу код, але я шикарно викладаю граматику. Я, до речі, керував школою».</p><p>Але коли пальці на клавіатурі, а очі в редакторі коду, то доводиться відпустити минуле. Будете тішитися вчорашніми досягненнями після того, як зробите сьогоднішню роботу.</p><p>А зараз потрібно прийняти всі емоції, які приходять разом із роллю новачка. Треба зосередитись на завданні, яке потрібно виконати тут і зараз.</p><h3 id="--80"><strong><strong>Мабуть, це просто синдром самозванця</strong></strong></h3><p>Майже всі, кого я знаю, проходили через відчуття, ніби вони не на своєму місці: ніби команда рано чи пізно побачить, наскільки поганий їхній код, і викриє, що вони — «несправжні розробники».</p><p>Це відчуття не зникає. Воно сидить десь в глибині душі і може знову вилізти, щойно візьмешся за щось нове.</p><p>— Допоможи розібратися з цією помилкою.</p><p>— Ну… Не думаю, що зможу.</p><p>— Попрацюємо над новою функцією разом?</p><p>— Ну… Якщо інших варіантів немає, то так.</p><p>— Виступиш на нашій конференції?</p><p>—&nbsp;Я?</p><p>Я зустрічав професійних розробників, які й досі час від часу страждають від синдрому самозванця, хоча пропрацювали у цій галузі більше десяти років.</p><p>Якщо почуваєтесь недостатньо компетентними або неготовими, це може бути синдромом самозванця.</p><p>Звісно, якщо дати мені скальпель і попросити провести операцію на серці, я почуватимуся самозванцем. Якоюсь мірою таке відчуття є цілком обґрунтованим, якщо ви дійсно знаєте, що не впораєтеся.</p><p>Проблема в тому, що в розробці можна вже багато чого вміти, але все одно відчувати тривогу без вагомої причини.</p><p>Я не лікар. Але інтуїція підказує мені, що у більшості людей синдром самозванця поступово зникає, бо вони стають досвідченішими та впевненими в собі.</p><p>Хоча іноді він може раптово повернутися. Я, наприклад, і зараз інколи відчуваю ці приступи синдрому самозванця, коли беруся за нову задачу або за щось, чим давно не займався.</p><p>Головне — просто прийняти ситуацію: «Мабуть, просто синдром самозванця дається взнаки».</p><p>І не зупинятися.</p><h3 id="--81"><strong>Знайдіть<strong> «своїх»</strong>,<strong> </strong>а<strong>ле не застряг</strong>айте <strong>там</strong></strong></h3><p>Як тільки працевлаштуєтесь розробником вперше, то почнете працювати з іншими розробниками. Ура! Знайшли «своїх».</p><p>Ви будете проводити з ними багато часу і згодом можете стати дуже згуртованою командою.</p><p>Але не ігноруйте людей, які не є розробниками.</p><p>Я вже згадував Майка — продакт-менеджера, який ще організовував заходи зі стартапами. Він був «нетехнічним»: у коді орієнтувався не дуже. Але я навчився від нього не менше ніж від будь-кого іншого в компанії.</p><p>Ви також будете працювати з людьми з інших відділів: дизайнерами, продакт-менеджерами, проєкт-менеджерами, ІТ-спеціалістами, QA-тестувальниками, маркетологами, навіть фінансистами й бухгалтерами. Від них теж можна багато чого навчитися.</p><p>Так, важливо побудувати гарні відносини з іншими розробниками в команді. Але залишайтеся відкритими. Спілкуйтеся з іншими людьми під час обіду чи на корпоративних заходах. Ніколи не знаєш, хто саме допоможе прокачати навички, розширити коло знайомств або покращити репутацію.</p><h3 id="--82"><strong>Всьому свій час</strong></h3><p>Я часто даю таку пораду тим, хто тільки починає програмувати:</p><p>— Спочатку опануйте базові навички (JavaScript, SQL, Linux тощо), а вже потім візьміться за щось конкретне.</p><p>Ідея полягає в тому, що коли розумієте, як працюють поширені інструменти, то легко освоїти їхні альтернативи.</p><p>Наприклад, якщо ви вже знаєте PostgreSQL, то буде нескладно вивчити MySQL. Якщо працювали із Node.js, то зможете швидко перейти на Ruby on Rails або Java Spring Boot.</p><p>Але багато хто починає робити щось конкретне занадто рано. Наприклад, бос може покласти на вас відповідальність за API або функцію. А якщо ви добре з цим справитесь, то вам і надалі даватимуть схожі завдання.</p><p>Ви керуєте лише собою, а ваш бос — цілою командою. У нього може просто не бути часу добре розібратися у ваших інтересах і можливостях. Він може почати сприймати вас як «фахівця з чогось» і доручати вам завдання, пов’язані лише з цим.</p><p>Але ви знаєте свої сильні сторони і те, що вас цікавить. Тому варто іноді виходити із зони комфорту і братися за нові проєкти. Якщо вдасться домовитися з босом, то зможете вдосконалити навички і попрацювати з новими людьми.</p><p>Пам’ятайте: бос відповідає за вашу ефективність на поточній роботі, але за розвиток у своїй кар’єрі відповідаєте лише ви.</p><p>Беріться за ті проєкти, що не лише приносять користь компанії, а й наближають вас до поставлених кар’єрних цілей.</p><!--kg-card-begin: html--><h2 id="епілог-у-вас-все-вийде">Епілог: у вас все вийде</h2><!--kg-card-end: html--><p>Я хочу, щоб ви запам’ятали одне: <strong>у вас все вийде.</strong></p><p>Ви <strong>зможете</strong> розібратись з поняттями.</p><p>Ви <strong>зможете</strong> освоїти інструменти.</p><p>Ви <strong>зможете</strong> стати розробником.</p><p>А коли хтось ще й заплатить за написаний код, ви офіційно станете професійним розробником.</p><p>Навчитися програмувати і знайти першу роботу — непросто, але не відступайте.</p><p>Не здавайтесь і обов’язково досягнете успіху. Це лише питання практики.</p><p>Створюйте проєкти. Показуйте їх друзям. Створюйте проєкти для друзів.</p><p>Розширюйте коло знайомств. Допомагайте людям, яких зустрічаєте. Добро повертається.</p><p>Ніколи не пізно. Попереду ще багато часу.</p><p>Через кілька років ви згадуватимете цей момент і радітимете, що наважилися зробити цей крок.</p><p>Будьте готовими, що це займе багато часу. Будьте готовими до невизначеності.</p><p>Але найголовніше — продовжуйте працювати за клавіатурою. Ходіть на заходи. Діліться своїми перемогами з друзями.</p><p>Як колись сказав Лао-цзи:</p><blockquote>«Подорож у тисячу миль починається з одного кроку»</blockquote><p>Ви вже зробили цей крок хоча б тим, що дочитали цю книгу. А, можливо, вже пройшли чимало кроків на шляху до своїх цілей.</p><p>Не загасіть той вогник, який розпалили.</p><p>Почніть писати код для наступного проєкту вже сьогодні.</p><p>І завжди пам’ятайте:</p><p>У вас все вийде.</p><p>Переклад виконали: Борецька Ольга, Маркута Діана, Борецька Анастасія, Борецька Каміла, Перчишин Анастасія, Ліщук Юлія.</p> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ freeCodeCamp святкує 10 років + головні оновлення ]]>
                </title>
                <description>
                    <![CDATA[ Рівно 10 років тому я сів у своїй квартирі в Сан-Франциско і написав перші кілька сотень рядків коду для freeCodeCamp. Тоді я ще не знав, що freeCodeCamp швидко перетвориться на глобальну спільноту зайнятих дорослих, які вчаться програмувати разом. Багато з цих кемперів — як тепер ми називаємо себе — стали ]]>
                </description>
                <link>https://www.freecodecamp.org/ukrainian/news/freecodecamp-10-rokiv/</link>
                <guid isPermaLink="false">67224cea11de84045fc3bc9b</guid>
                
                    <category>
                        <![CDATA[ спільнота ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Anastasiia Buievych ]]>
                </dc:creator>
                <pubDate>Sun, 03 Nov 2024 14:25:05 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/ukrainian/news/content/images/2024/10/767f41f9-70e6-4e1c-b0d5-1927a925c9cc.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p data-test-label="translation-intro">
        <strong>Оригінальна публікація:</strong> <a href="https://www.freecodecamp.org/news/freecodecamp-turns-10-major-curriculum-updates/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">freeCodeCamp Turns 10 + Major Certification Updates</a>
      </p><p>Рівно 10 років тому я сів у своїй квартирі в Сан-Франциско і написав перші кілька сотень рядків коду для freeCodeCamp.</p><figure class="kg-card kg-image-card"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1730133437567/a29ae1ca-0350-4e94-b57a-296eb35dae6f.jpeg" class="kg-image" alt="Невеличкий офіс Квінсі" width="485" height="485" loading="lazy"></figure><p>Тоді я ще не знав, що freeCodeCamp швидко перетвориться на глобальну спільноту зайнятих дорослих, які вчаться програмувати разом.</p><p>Багато з цих кемперів — як тепер ми називаємо себе — стали програмістами. І багато кемперів також зробили свій внесок до відкритої кодової бази fCC.</p><figure class="kg-card kg-image-card"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1730133483889/9fe0f108-361f-4384-bbb9-774b9bbe7fe2.webp" class="kg-image" alt="Кемпери на заході freeCodeCamp в Нью-Йорку" width="960" height="528" loading="lazy"></figure><p>Протягом цих 10 років ми створили:</p><ol><li>Інтерактивну базову навчальну програму на 3000 годин, яка вчить математики, програмування та комп’ютерних наук.</li><li>Бібліотеку, яка містить більш ніж 12 000 покрокових довідників — і десятки посібників — на нашій платформі для публікацій, <a href="https://www.freecodecamp.org/news">freecodecamp.org/news</a>.</li><li>YouTube-канал з більш ніж 1000 безоплатних курсів. Лише кілька днів тому ми досягли десяти мільйонів підписників.</li><li>Найдобріший форум на планеті та схожий сервер на Discord.</li></ol><p>Команда виросла з мене одного до штату з 35 вчителів та інженерів. І це лише вершина айсберга. Велика частина роботи виконується самою спільнотою. Щодня волонтери щось роблять, щоб покращити нашу кодову базу, створити нові ресурси для навчання та допомогти один одному на форумі.</p><figure class="kg-card kg-image-card"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1730133557095/089e4ec6-16aa-49df-81c3-6b27c3001ed4.jpeg" class="kg-image" alt="знімок екрану репозиторія freecodecamp на github" width="607" height="515" loading="lazy"></figure><p>Ми лише починаємо. Тож замість сентиментального нарису про <strong>перші</strong> 10 років freeCodeCamp, ми зосередимося на наших планах на <strong>наступні</strong> 10 років.</p><p>Адже місія нашої благодійної організації — створити безоплатні навчальні ресурси, які допомагають людям вивчати математику, програмування та комп’ютерні науки. Попереду <strong>багато</strong> роботи, яку потрібно виконати.</p><p>У цій статті я викладу наші основні ініціативи на наступне десятиліття, а також поділюсь деякими значними покращеннями — деякі з них з’являться до Різдва.</p><h2 id="-"><strong>Одна сертифікація, щоб керувати всім</strong></h2><p>Найголовніша новина — ми об’єднуємо більшу частину теперішньої навчальної програми в одну комплексну сертифікацію «Сертифікований full stack розробник» (CFSD). До того ж ми розробляємо декілька нових комплексних сертифікацій з нуля.</p><p>Ми черпали натхнення від усталених некомерційних організацій розробників, серед яких CompTIA та (ISC)². Ми змінюємо наші сертифікації, щоб вони більше нагадували усталені сертифікації індустрії.</p><p>Наші нові сертифікації:</p><ul><li>будуть ще більш комплексними;</li><li>включатимуть підсумковий екзамен;</li><li>включатимуть кінцевий проєкт;</li><li>будуть дійсними протягом 3 років, з можливістю оновлення.</li></ul><p>Як і все, що створює freeCodeCamp, ці сертифікації залишаться <strong>повністю безоплатними</strong>.</p><p>Навчальна програма сертифікації «Сертифікований full stack розробник» охоплюватиме такі теми:</p><ul><li>семантичний HTML;</li><li>доступність;</li><li>основи CSS;</li><li>CSS Flexbox;</li><li>дизайн для розробників;</li><li>типографія;</li><li>редактори коду;</li><li>основи JavaScript;</li><li>функціональне програмування;</li><li>функції вищого порядку та зворотні виклики;</li><li>маніпуляція DOM та події;</li><li>вебстандарти;</li><li>основи React;</li><li>основи TypeScript;</li><li>поняття тестування;</li><li>скрипти Bash;</li><li>SQL та реляційні бази даних;</li><li>Git &amp; GitHub;</li><li>безпека та приватність;</li><li>Node.js;</li><li>Express.js;</li><li>основи Python;</li><li>алгоритмічне мислення;</li><li>структури даних;</li><li>об’єктноорієнтоване програмування;</li><li>динамічне програмування;</li><li>безпека для веброзробників;</li><li>інструменти та розробка;</li><li>робота з API;</li><li>основи інженерії штучного інтелекту;</li><li>як отримати роботу розробника;</li><li>та багато іншого.</li></ul><p>За численними проханнями ми будемо охоплювати <strong>набагато</strong> більше теорії одразу в навчальній програмі.</p><p>Раніше наші сертифікації на 100% концентрувались на розробці проєктів. Ми отримали багато зворотного зв’язку щодо нашого підходу «навчання через практику», і що багато хто бажає більшої кількості теорії.</p><p>Більше вам не доведеться доповнювати основну навчальну програму freeCodeCamp теоретичними відео або посібниками. Тепер ми будемо охоплювати всю необхідну теорію.</p><p>Ми додамо короткі відеолекції, спікерами яких є команда з освітнього дизайну freeCodeCamp (серед яких Боу Карнес та Аня Кубов). Для кемперів, які віддають перевагу читанню, буде доступний транскрипт до всіх лекцій.</p><p>Ми також додамо багато тестів, щоб ви могли повторити теорію та перевірити, наскільки зрозуміли матеріал. Разом із нашою вбудованою системою спеціального повторення, такий підхід має значно покращити запам’ятовування ключових понять і технік програмування.</p><p>Тепер ви починатимете програмувати з чистого аркуша значно раніше, щоб зменшити кількість втручання. Для цього будуть лабораторні роботи.</p><p>Ось повний зміст сертифікації «Сертифікований full stack розробник». Це справжній виклик:</p><ul><li><strong><strong>64 </strong>практичні завдання</strong>: інтерактивні покрокові курси від HTML до SQL і Python;</li><li><strong><strong>513 </strong>лекцій</strong>: короткі відео, що висвітлюють поняття комп’ютерної науки, з питаннями множинного вибору для перевірки;</li><li><strong><strong>83 </strong>лабораторні роботи</strong>: проєкти, у яких ви почнете з чистого редактора та набору тестів, і маєте побудувати свій проєкт так, щоб усі тести були успішними;</li><li><strong><strong>62 </strong>сторінки з повторенням</strong>: комплексні списки тем з кожного модуля, щоб ви могли підготуватись до тестів та екзаменів;</li><li><strong><strong>66 </strong>тестів</strong> та <strong><strong>6 </strong>підготовчих екзаменів</strong>: щоб підтвердити розуміння понять та інструментів;</li><li><strong><strong>1 </strong>головний<strong> </strong>проєкт</strong>: великий унікальний проєкт, який ви створите для свого портфоліо під керівництвом викладачів спільноти freeCodeCamp;</li><li><strong><strong>1 </strong>кінцевий<strong> </strong>екзамен</strong>: комплексний сертифікаційний екзамен з 90 запитань, що проводиться в екзаменаційному середовищі freeCodeCamp.</li></ul><p>Після всієї роботи ви зможете скласти кінцевий екзамен. Ми створили власне екзаменаційне середовище, де ви зможете скласти екзамен зі всього, що вивчили.</p><p>Якщо ви не складете екзамен, ви зможете скласти його ще раз (раз на 24 години, допоки не складете). Кожен екзамен буде генеруватись з великого корпусу запитань.</p><p>Можливо, ви чули страшні історії від людей, які складали екзамени онлайн та яких несправедливо звинуватили у шахрайстві. Ми ретельно продумали, як будемо дотримуватись кодексу академічної доброчесності. Для цього завжди буде людина-в-циклі.</p><p>Не буде автоматичних дискваліфікацій через те, що «ви встали зі стільця, бо ваша дитина заплакала». Ми будемо враховувати всі нюанси під час проведення екзаменів.</p><p>Після того, як ви складете екзамен, ви отримаєте безоплатний підтверджений сертифікат із серійним номером, який ви зможете додати до свого резюме й LinkedIn. Він залишатиметься дійсним протягом трьох років, після чого ви зможете пройти безоплатне навчання з метою повторної сертифікації.</p><p>Ось 3-хвилинне відео, яке ознайомить вас з деякими великими оновленнями навчальної програми freeCodeCamp.</p><figure class="kg-card kg-embed-card" data-test-label="fitted">
        <div class="fluid-width-video-container">
          <div style="padding-top: 56.25%;" class="fluid-width-video-wrapper">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/24ubTRtvNY0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy" style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size-adjust: inherit; font-kerning: inherit; font-variant-alternates: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-position: inherit; font-variant-emoji: inherit; font-feature-settings: inherit; font-optical-sizing: inherit; font-variation-settings: inherit; font-size: 22px; vertical-align: middle; aspect-ratio: 16 / 9; width: 720px; height: auto;" name="fitvid0"></iframe>
          </div>
        </div>
      </figure><h2 id="--1"><strong>Ми також розробляємо три інші сертифікації</strong></h2><p>Після виходу нової сертифікації «Сертифікований full stack розробник», наша команда з освітнього дизайну зосередить увагу на створенні трьох додаткових сертифікацій:</p><h3 id="-fcc-cmle-"><strong>Сертифікований інженер машинного навчання (fCC-CMLE)</strong></h3><p>Ця сертифікація передбачатиме вивчення Python та багатьох бібліотек. Ви вивчатимете велику кількість математики та теорії. Багато проєктів передбачатимуть створення власних моделей. Кайлі Йін вже працює з інженерами машинного навчання, щоб допомогти з розробкою. Ми плануємо опублікувати певну частину у 2025 році.</p><h3 id="-fcc-csse-"><strong>Сертифікований інженер системного програмного забезпечення (fCC-CSSE)</strong></h3><p>Ця сертифікація охоплюватиме низькорівневе програмування та високопродуктивні обчислення. Ви навчитеся програмувати на C й C++, і створите кілька проєктів (серед яких власний компілятор і власна пошукова система). Ми плануємо опублікувати певну частину у 2026 році.</p><h3 id="-data-scientist-fcc-cds-"><strong>Сертифікований data scientist (fCC-CDS)</strong></h3><p>Ми працюємо над комплексною навчальною програмою з науки про дані вже декілька років. Можливо, ви знаєте, що freeCodeCamp вже має багато популярних курсів з інструментів науки про дані (наприклад, Python, R і статистичні пакети) на YouTube.</p><p>Виклик у викладанні науки про дані полягає у величезній кількості математики, яка присутня в галузі. Нам також потрібно розробити проєктно-орієнтоване навчання, яке ми можемо оцінити програмно.</p><p>Наша мета — запропонувати найкращу освітню програму з науки про дані, доступну поза межами PhD. Це буде найбільшою проблемою з усіх. Але ми до цього готові.</p><p>Ми плануємо опублікувати певну частину у 2027 році.</p><h2 id="--2"><strong>Коли ми отримаємо більше інформації про сертифікації та навчальні курси?</strong></h2><p>Ми працюємо над основними темами оновленої навчальної програми і плануємо опублікувати деякі з них у 2025 році.</p><h2 id="-freecodecamp"><strong>Що станеться з поточними сертифікаціями freeCodeCamp?</strong></h2><p>freeCodeCamp має хорошу традицію зберігати старі курси зі застарілих сертифікацій. Цього разу нічого не змінюється.</p><p>Ми заохочуємо вас перейти на нову сертифікацію «Сертифікований full stack розробник» як тільки вона стане доступною цього Різдва. Можливо, ви вже виконали деякі з проєктів, оскільки багато з них збереглись зі старих сертифікацій.</p><p>Якщо ви вже виконали половину старої сертифікації та хочете продовжити свій прогрес там, ви можете це зробити.</p><h2 id="--3"><strong>Старі сертифікати втратять чинність?</strong></h2><p>Так. Усі застарілі сертифікати втратять чинність 31 грудня 2027 року. Це також стосується всіх сертифікатів, які ви отримали раніше.</p><p>Ми хотіли дати всім достатньо часу на використання поточних сертифікатів, перш ніж отримати сертифікацію «Сертифікований full stack розробник». І ми вважаємо, що достатньо трьох років.</p><p>Ми додали цей термін дії до всіх сертифікатів freeCodeCamp.</p><p>Надалі, коли ви отримаєте сертифікат «Сертифікований full stack розробник» або будь-який з трьох інших, він буде дійсний протягом трьох років з дати його отримання.</p><p>Знову ж таки, ми розробляємо програму безперервної освіти, яку ви зможете використати через три роки, щоб поновити сертифікат. І знову ж таки, все це буде безоплатно.</p><h2 id="-freecodecamp-"><strong>Чому freeCodeCamp вимагає екзамени та додає терміни дії до сертифікатів?</strong></h2><p>Ми робимо так, щоб наші сертифікати відповідали нормам у галузі технологій. Усі основні сертифікації вимагають складання сертифікаційного екзамену та мають термін дії 3 роки.</p><p>Наша мета полягає в тому, щоб сертифікати freeCodeCamp були максимально загальноприйнятими, аби полегшити розуміння роботодавцями.</p><h2 id="-freecodecamp--1"><strong>Чи планує freeCodeCamp займатися рекрутингом або працевлаштуванням?</strong></h2><p>У нас немає планів щодо цього. Місія нашої благодійної організації проста: створювати безоплатні навчальні ресурси. Ми плануємо зберегти нашу команду викладачів маленькою і зосередженою.</p><h2 id="--4"><strong>Наскільки навчальні курси будуть схожими?</strong></h2><p>Деякі з сертифікацій матимуть спільні проєкти та лекції. Наприклад, якщо ви закінчите курс «Вступ до Python» під час отримання сертифікації «Сертифікований full stack розробник», вам не потрібно буде повторювати його, щоб отримати сертифікацію «Сертифікований інженер машинного навчання».</p><h2 id="--5"><strong>Мої старі сертифікати залишаться онлайн? Посилання для перевірки продовжать працювати?</strong></h2><p>Протерміновані сертифікати будуть доступними, а прямі посилання на них працюватимуть. Вони будуть чітко позначені як «Термін закінчився [дата]», доки ви не поновите їх. Знову ж таки, це станеться не раніше 31 грудня 2027 року.</p><h2 id="-11-freecodecamp-org-learn"><strong>Що станеться з 11 сертифікаціями, які наразі розташовані на <a href="http://freecodecamp.org/learn">freecodecamp.org/learn</a>?</strong></h2><p>Вони будуть доступними принаймні ще декілька років, й позначені як застарілі сертифікації. Більшість курсів буде перероблено та вдосконалено, щоб стати частиною нових сертифікацій.</p><h2 id="--6"><strong>Мені доведеться знову виконувати вже виконані проєкти?</strong></h2><p>Деякі курси зі старих сертифікацій будуть в нових. У більшості випадків вам не доведеться знову виконувати проєкти, які ви вже завершили. Якщо ви вже побудували деякі проєкти, то є велика ймовірність, що розділи нових сертифікацій будуть позначені як завершені, коли ви їх переглянете.</p><h2 id="-rust-java-nosql"><strong>Що стосується викладання таких мов програмування, як Rust і Java, або інструментів баз даних NoSQL?</strong></h2><p>Ми зосереджуємо основну навчальну програму на найпопулярніших інструментах, щоб допомогти кемперам стати розробниками. Тобто Python, JavaScript, SQL і такі інструменти, як Git та Linux.</p><p>У нас є безліч відеокурсів з інших популярних інструментів на YouTube-каналі, а також серед публікацій спільноти freeCodeCamp. Ми продовжимо викладати їх як додаткові теми для всіх, хто хоче їх вивчати.</p><h2 id="--7"><strong>Як справи з навчальною програмою для вивчення англійської мови?</strong></h2><p>Ми активно працюємо над створенням інтерактивної навчальної програми для вивчення англійської мови, щоб допомогти кемперам покращити їхні знання.</p><p>Ми проводимо навчання через комбінацію відео та інтерактивних завдань, за якими слідує офіційний сертифікаційний екзамен.</p><figure class="kg-card kg-image-card"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1730133715267/450940c6-2799-48ac-8f8d-dbc4eece8951.jpeg" class="kg-image" alt="Знімок екрану інтерфейсу користувача навчальної програми з вивчення англійської мови на freeCodeCamp" width="1274" height="792" loading="lazy"></figure><p>Зараз ми завершуємо працювати над рівнем A2 і починаємо роботу над B1.</p><figure class="kg-card kg-image-card"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1730133738714/206d46e8-7a31-4229-b673-5c11e386cfee.png" class="kg-image" alt="Діаграма рівнів CEFR" width="1024" height="768" loading="lazy"></figure><h2 id="--8"><strong>Як справи з програмою здобуття безоплатного наукового ступеня?</strong></h2><p>Ми робимо стійкий прогрес зі ступенем молодшого спеціаліста з математики та ступеня бакалавра з комп’ютерних наук. Ми вже розробили 2 курси з математики і активно працюємо над іншими 38 курсами університетського рівня, а також їхніми лекціями, лабораторними роботами та екзаменами.</p><p>freeCodeCamp має маленьку команду освітніх дизайнерів, і зараз ми зосереджені на курсах для сертифікації «Сертифікований full stack розробник» та програмі для вивчення англійської мови. Як тільки ми їх завершимо, ми змістимо фокус на програми зі здобуття ступеня, щоб пришвидшити їхній розвиток.</p><h2 id="10-"><strong>10 років — це мало.</strong></h2><figure class="kg-card kg-image-card"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1730133954038/aeb1874c-1804-4910-8088-c262aa95c5cf.jpeg" class="kg-image" alt="Деякі члени команди freeCodeCamp перед бібліотекою в Далласі" width="1600" height="1200" loading="lazy"></figure><p>Дивовижно, скільки ми досягли як спільнота всього за 10 років.</p><ul><li>Безоплатна навчальна програма на 3000 години з інтерактивним навчальним матеріалом.</li><li>Тисячі додаткових курсів, книг і підручників.</li><li>Десятки тисяч кемперів, які стали розробниками.</li><li>Десятки тисяч волонтерів, які отримують досвід, ділячись своїми часом і талантом через відкритий код, тим самим допомагаючи іншим.</li></ul><p>І ми лише розпочинаємо.</p><p>Я закликаю вас долучитись до глобальної спільноти freeCodeCamp. Ви можете переглянути <a href="https://www.freecodecamp.org/news/freecodecamps-top-open-source-contributors-of-2024/">список найактивніших волонтерів за 2024 рік</a>, а також <a href="https://contribute.freecodecamp.org/intro/">посібник для волонтерів</a>, якщо хочете стати частиною спільноти.</p><p>Я також пропоную <a href="https://www.freecodecamp.org/ukrainian/donate/">стати донором</a>. А якщо ви вже підтримуєте нас щомісяця та хочете зробити подарунок наприкінці року, ми будемо дуже раді. Ось <a href="https://www.freecodecamp.org/news/how-to-donate-to-free-code-camp/">декілька способів зробити донат</a>.</p><p>Якщо у вас є будь-які запитання щодо підтримки місії нашої організації, або вам просто треба квитанція про донат, будь ласка, напишіть на <a href="https://www.freecodecamp.org/ukrainian/news/p/a8252bac-dd99-417d-bdc4-981faabd27e0/quincy@freecodecamp.org">quincy@freecodecamp.org</a>.</p><p>За наступні 10 років.</p><p>— Квінсі</p> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Python .sort(): як відсортувати список у Python? ]]>
                </title>
                <description>
                    <![CDATA[ У цій статті ви дізнаєтесь, як використовувати метод списку sort() у Python. Ви також дізнаєтесь про інший спосіб сортування в Python за допомогою функції  sorted(), щоб зрозуміти, чим вона відрізняється від sort(). Ви знатимете основи сортування списку в Python і як налаштувати сортування відповідно до своїх потреб. Що ми ]]>
                </description>
                <link>https://www.freecodecamp.org/ukrainian/news/python-sort-yak-vidsortuvaty-spysok-u-python/</link>
                <guid isPermaLink="false">66d94e77a2d90904c648dfd9</guid>
                
                    <category>
                        <![CDATA[ python ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Anastasiia Buievych ]]>
                </dc:creator>
                <pubDate>Thu, 05 Sep 2024 09:35:22 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/ukrainian/news/content/images/2024/09/pexels-ken-tomita-389818.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p data-test-label="translation-intro">
        <strong>Оригінальна публікація:</strong> <a href="https://www.freecodecamp.org/news/python-sort-how-to-sort-a-list-in-python/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">Python .sort() – How to Sort a List in Python</a>
      </p><p>У цій статті ви дізнаєтесь, як використовувати метод списку <code>sort()</code> у Python.</p><p>Ви також дізнаєтесь про інший спосіб сортування в Python за допомогою функції <code>sorted()</code>, щоб зрозуміти, чим вона відрізняється від <code>sort()</code>.</p><p>Ви знатимете основи сортування списку в Python і як налаштувати сортування відповідно до своїх потреб.</p><p>Що ми розглянемо:</p><ol><li><a href="#метод-sort-огляд-синтаксису">Синтаксис методу <code>sort</code></a>.</li><li><a href="#як-відсортувати-елементи-списку-в-порядку-зростання-за-допомогою-методу-sort">Сортування елементів списку в порядку зростання</a>.</li><li><a href="#як-відсортувати-елементи-списку-в-порядку-спадання-за-допомогою-методу-sort">Сортування елементів списку в порядку спадання</a>.</li><li><a href="#як-відсортувати-елементи-списку-за-допомогою-параметра-key-з-методом-sort">Сортування елементів списку за допомогою аргументу <code>key</code></a>.</li><li><a href="#різниця-між-sort-та-sorted">Різниця між <code>sort()</code> та <code>sorted()</code></a>.<br>5.1. &nbsp;<a href="#коли-використовувати-sort-та-sorted">Коли використовувати <code>sort()</code> та <code>sorted()</code></a>.</li></ol><!--kg-card-begin: html--><h2 id="метод-sort-огляд-синтаксису">Метод sort(). Огляд синтаксису</h2><!--kg-card-end: html--><p>Метод <code>sort()</code> — один зі способів, за допомогою якого можна відсортувати список у Python.</p><p>При використанні <code>sort()</code> список сортується <em>на місці</em>. Це означає, що початковий список безпосередньо змінюється. Зокрема, змінюється початковий порядок елементів.</p><p>Загальний синтаксис методу <code>sort()</code> виглядає так:</p><pre><code class="language-python">назва_списку.sort(reverse=..., key=... )</code></pre><p>Розглянемо деталі:</p><ul><li><code>назва_списку</code> — назва списку, з яким ви працюєте;</li><li><code>sort()</code> — один з методів списку Python для сортування та зміни списку. Він сортує елементи списку або в <em>порядку зростання</em>, або в <em>порядку спадання</em>;</li><li><code>sort()</code> приймає два <strong>необов’язкові</strong> параметри;</li><li><code>reverse</code> — перший необов’язковий параметр. Він визначає, як буде відсортований список: в порядку зростання чи спадання. Приймає логічне значення (тобто True або False). Значення за замовчуванням — <strong>False</strong>, тобто список сортується в порядку зростання. Якщо встановити його значення на True, то список сортується навпаки: у порядку спадання;</li><li><code>key</code> — другий необов’язковий параметр. Він приймає функцію або метод, які використовуються для визначення будь-яких можливих детальних критеріїв сортування.</li></ul><p>Метод <code>sort()</code> повертає <code>None</code> (тобто повернутого значення немає), оскільки він просто змінює початковий список. Він <strong>не</strong> повертає новий список.</p><!--kg-card-begin: html--><h2 id="як-відсортувати-елементи-списку-в-порядку-зростання-за-допомогою-методу-sort">Як відсортувати елементи списку в порядку зростання за допомогою методу sort()</h2><!--kg-card-end: html--><p>Як вже згадувалося раніше, <code>sort()</code> сортує елементи списку в порядку зростання за замовчуванням.</p><p>Це означає, що елементи розташовуються від найменшого до найбільшого значення.</p><p>Найменше значення знаходиться зліва, а найбільше — справа.</p><p>Загальний синтаксис виглядає приблизно так:</p><pre><code class="language-python">назва_списку.sort()</code></pre><p>Розглянемо приклад, де відсортуємо список цілих чисел:</p><pre><code class="language-python"># список чисел
мої_числа = [10, 8, 3, 22, 33, 7, 11, 100, 54]

# відсортуємо список на місці у порядку зростання
мої_числа.sort()

# надрукуємо змінений список
print(мої_числа)

# вихідні дані

# [3, 7, 8, 10, 11, 22, 33, 54, 100]</code></pre><p>У прикладі вище числа сортуються від найменшого до найбільшого.</p><p>Так само можна зробити зі списком рядків:</p><pre><code class="language-python"># список рядків
мови_програмування = ["Python", "Swift", "Java", "C++", "Go", "Rust"]

# відсортуємо список на місці в алфавітному порядку
мови_програмування.sort()

# надрукуємо змінений список
print(мови_програмування)

# вихідні дані

# ['C++', 'Go', 'Java', 'Python', 'Rust', 'Swift']</code></pre><p>У цьому випадку кожен рядок, що міститься у списку, був відсортований в алфавітному порядку.</p><p>Як ви побачили в обох прикладах, початкові списки були змінені.</p><!--kg-card-begin: html--><h2 id="як-відсортувати-елементи-списку-в-порядку-спадання-за-допомогою-методу-sort">Як відсортувати елементи списку в порядку спадання за допомогою методу `sort()`</h2><!--kg-card-end: html--><p>Порядок спадання протилежний порядку зростання: елементи розташовуються від найбільшого до найменшого значення.</p><p>Щоб відсортувати елементи списку в порядку спадання, потрібно використати необов’язковий параметр <code>reverse</code> з методом <code>sort()</code>, і встановити значення <code>True</code>.</p><p>Ось так виглядає загальний синтаксис:</p><pre><code class="language-python">назва_списку.sort(reverse=True)
</code></pre><p>Використаємо приклад з попереднього розділу, але цього разу зробимо так, щоб числа були відсортовані в зворотному порядку:</p><pre><code class="language-python"># список чисел
мої_числа = [10, 8, 3, 22, 33, 7, 11, 100, 54]

# відсортуємо список на місці в порядку спадання
мої_числа.sort(reverse=True)

# надрукуємо змінений список
print(мої_числа)

# вихідні дані

# [100, 54, 33, 22, 11, 10, 8, 7, 3]</code></pre><p>Тепер всі числа розташовані у зворотному порядку; найбільше значення зліва, а найменше — справа.</p><p>Так само можна зробити зі списком рядків.</p><pre><code class="language-python"># список рядків
мови_програмування = ["Python", "Swift", "Java", "C++", "Go", "Rust"]

# відсортуємо список на місці у зворотному алфавітному порядку
мови_програмування.sort(reverse=True)

# надрукуємо змінений список
print(мови_програмування)

# вихідні дані

# ['Swift', 'Rust', 'Python', 'Java', 'Go', 'C++']</code></pre><p>Тепер елементи списку розташовані у зворотному алфавітному порядку.</p><!--kg-card-begin: html--><h2 id="як-відсортувати-елементи-списку-за-допомогою-параметра-key-з-методом-sort">Як відсортувати елементи списку за допомогою параметра key з методом sort()</h2><!--kg-card-end: html--><p>Ви можете використати параметр <code>key</code>, щоб виконати конкретніші операції сортування.</p><p>Значення, призначене параметру <code>key</code>, має щось викликати.</p><p>Наприклад, можна викликати методи та функції.</p><p>Цей метод або функція, призначена до <code>key</code>, буде застосована до всіх елементів у списку перед будь-яким сортуванням і визначатиме логіку для критеріїв сортування.</p><p>Припустимо, ви хочете відсортувати список рядків на основі їхньої довжини.</p><p>Для цього потрібно призначити вбудовану функцію <code>len()</code> до параметру <code>key</code>.</p><p>Функція <code>len()</code> вирахує довжину кожного елемента в списку, підрахувавши символи, які містяться в цьому елементі.</p><pre><code class="language-python">мови_програмування = ["Python", "Swift", "Java", "C++", "Go", "Rust"]

мови_програмування.sort(key=len)

print(мови_програмування)

# вихідні дані

# ['Go', 'C++', 'Java', 'Rust', 'Swift', 'Python']</code></pre><p>У наведеному вище прикладі рядки сортуються у порядку зростання за замовчуванням, але цього разу сортування відбувається на основі їхньої довжини.</p><p>Найкоротший рядок знаходиться зліва, а найдовший — справа.</p><p>Параметри <code>key</code> та <code>reverse</code> також можна комбінувати.</p><p>Наприклад, елементи списку можна відсортувати на основі їхньої довжини, але у порядку спадання.</p><pre><code class="language-python">мови_програмування = ["Python", "Swift", "Java", "C++", "Go", "Rust"]

мови_програмування.sort(key=len, reverse=True)

print(мови_програмування)

# вихідні дані

# ['Python', 'Swift', 'Java', 'Rust', 'C++', 'Go']</code></pre><p>У наведеному вище прикладі рядки відсортовано від найдовшого до найкоротшого.</p><p>Варто зазначити, що ви можете створити власну функцію сортування, щоб надати конкретніші критерії сортування.</p><p>Наприклад, ви можете створити певну функцію, а потім відсортувати список відповідно до значення, яке вона повертає.</p><p>Припустимо, у вас є список словників з мовами програмування та роком створення кожної мови.</p><pre><code class="language-python">мови_програмування = [{'мова':'Python','рік':1991},
{'мова':'Swift','рік':2014},
{'мова':'Java', 'рік':1995},
{'мова':'C++','рік':1985},
{'мова':'Go','рік':2007},
{'мова':'Rust','рік':2010},
]
</code></pre><p>Ви можете визначити власну функцію, яка отримує значення певного ключа зі словника.</p><p>💡 Майте на увазі, що ключ словника і параметр <code>key</code>, який приймає <code>sort()</code>, — це дві різні речі!</p><p>Зокрема, функція отримає і поверне значення ключа <code>рік</code> у списку словників, що вказує рік, коли кожна мова була створена.</p><p>Повернене значення потім буде застосовано як критерій сортування списку.</p><pre><code class="language-python">мови_програмування = [{'мова':'Python','рік':1991},
{'мова':'Swift','рік':2014},
{'мова':'Java', 'рік':1995},
{'мова':'C++','рік':1985},
{'мова':'Go','рік':2007},
{'мова':'Rust','рік':2010},
]

def get_рік(element):
    return element['рік']
</code></pre><p>Потім ви можете виконати сортування відповідно до значення, яке повертає функція, призначивши його до параметру <code>key</code>, і відсортувати список за хронологічним порядком за замовчуванням:</p><pre><code class="language-python">мови_програмування = [{'мова':'Python','рік':1991},
{'мова':'Swift','рік':2014},
{'мова':'Java', 'рік':1995},
{'мова':'C++','рік':1985},
{'мова':'Go','рік':2007},
{'мова':'Rust','рік':2010},
]

def get_рік(element):
    return element['рік']

мови_програмування.sort(key=get_рік)

print(мови_програмування)</code></pre><p>Вихідні дані:</p><pre><code class="language-python">[{'мова': 'C++', 'рік': 1985}, {'мова': 'Python', 'рік': 1991}, {'мова': 'Java', 'рік': 1995}, {'мова': 'Go', 'рік': 2007}, {'мова': 'Rust', 'рік': 2010}, {'мова': 'Swift', 'рік': 2014}]</code></pre><p>Якщо ви хочете відсортувати список від найновішої мови до найстарішої, або інакше кажучи у порядку спадання, тоді використайте параметр <code>reverse=True</code>:</p><pre><code class="language-python">мови_програмування = [{'мова':'Python','рік':1991},
{'мова':'Swift','рік':2014},
{'мова':'Java', 'рік':1995},
{'мова':'C++','рік':1985},
{'мова':'Go','рік':2007},
{'мова':'Rust','рік':2010},
]

def get_рік(element):
    return element['рік']

мови_програмування.sort(key=get_рік, reverse=True)

print(мови_програмування)</code></pre><p>Вихідні дані:</p><pre><code class="language-python">[{'мова': 'Swift', 'рік': 2014}, {'мова': 'Rust', 'рік': 2010}, {'мова': 'Go', 'рік': 2007}, {'мова': 'Java', 'рік': 1995}, {'мова': 'Python', 'рік': 1991}, {'мова': 'C++', 'рік': 1985}]</code></pre><p>Щоб досягти точно такого ж результату, ви можете створити lambda-функцію.</p><p>Замість використання регулярної власної функції, визначеної за допомогою ключового слова <code>def</code>, ви можете:</p><ul><li>створити короткий вираз в одному рядку;</li><li>і не визначати назву функції, як це було зроблено з функцією <code>def</code>. Lambda-функції також називаються <em>анонімними</em> функціями.</li></ul><pre><code class="language-python">мови_програмування = [{'мова':'Python','рік':1991},
{'мова':'Swift','рік':2014},
{'мова':'Java', 'рік':1995},
{'мова':'C++','рік':1985},
{'мова':'Go','рік':2007},
{'мова':'Rust','рік':2010},
]

мови_програмування.sort(key=lambda element: element['рік'])

print(мови_програмування)</code></pre><p>Lambda-функція, яка визначається рядком <code>key=lambda element: element['рік']</code>, відсортує ці мови програмування від найстарішої до найновішої.</p><!--kg-card-begin: html--><h2 id="різниця-між-sort-та-sorted">Різниця між sort() та sorted()</h2><!--kg-card-end: html--><p>Метод <code>sort()</code> працює аналогічно до функції <code>sorted()</code>.</p><p>Загальний синтаксис функції <code>sorted()</code> виглядає так:</p><pre><code class="language-python">sorted(назва_списку,reverse=...,key=...)</code></pre><p>Розберемо детальніше:</p><ul><li><code>sorted()</code> — вбудована функція, яка приймає ітерабельний об’єкт. Потім вона сортує його у порядку зростання або спадання;</li><li><code>sorted()</code> приймає три параметри. Один параметр є обов’язковим, а два інші — необов’язкові;</li><li><code>назва_списку</code> — <strong>обов’язковий</strong> параметр. У цьому випадку параметром є список, але <code>sorted()</code> також приймає будь-який інший ітерабельний об’єкт;</li><li><code>sorted()</code> також приймає необов’язкові параметри <code>reverse</code> та <code>key</code>, які є такими ж необов’язковими параметрами, як і метод <code>sort()</code>.</li></ul><p>Головна різниця між <code>sort()</code> та <code>sorted()</code> полягає в тому, що функція <code>sorted()</code> приймає список і <strong>повертає нову відсортовану копію</strong> цього списку.</p><p>Нова копія містить елементи вихідного списку у відсортованому порядку.</p><p>Елементи у вихідному списку не змінюються і залишаються такими, як є.</p><p>Отже, підсумовуючи:</p><ul><li>метод <code>sort()</code> не має поверненого значення і безпосередньо змінює вихідний список, змінюючи порядок елементів у ньому;</li><li>з іншого боку, функція <code>sorted()</code> має повернене значення, яке є відсортованою копією вихідного списку. Ця копія містить елементи вихідного списку у відсортованому порядку. Крім того, вихідний список залишається незмінним.</li></ul><p>Давайте розглянемо приклад, щоб побачити, як це працює:</p><pre><code class="language-python"># вихідний список чисел
мої_числа = [10, 8, 3, 22, 33, 7, 11, 100, 54]

# відсортуємо вихідний список у стандартному порядку зростання
мої_числа_відсортовано = sorted(мої_числа)

# надрукуємо вихідний список
print(мої_числа)

# надрукуємо копію вихідного списку, яка була створена
print(мої_числа_відсортовано)

# вихідні дані

# [10, 8, 3, 22, 33, 7, 11, 100, 54]
# [3, 7, 8, 10, 11, 22, 33, 54, 100]</code></pre><p>Оскільки до <code>sorted()</code> не було надано додаткових аргументів, вона упорядкувала копію вихідного списку у стандартному порядку зростання — від найменшого значення до найбільшого.</p><p>При друку вихідного списку ви бачите, що він залишився таким самим, а елементи розташовані в початковому порядку.</p><p>Як ви бачили у прикладі вище, копія списку була присвоєна до нової змінної <code>мої_числа_відсортовано</code>.</p><p>Подібне не можна зробити з <code>sort()</code>.</p><p>Розглянемо ще один приклад, щоб побачити, що станеться, якщо спробувати використати метод <code>sort()</code>.</p><pre><code class="language-python">мої_числа = [10, 8, 3, 22, 33, 7, 11, 100, 54]

мої_числа_відсортовано = мої_числа.sort()

print(мої_числа)
print(мої_числа_відсортовано)

# вихідні дані

# [3, 7, 8, 10, 11, 22, 33, 54, 100]
# None</code></pre><p>Як бачите, <code>sort()</code> повертає значення <code>None</code>.</p><p>Ще одна річ, яку варто зазначити: параметри <code>reverse</code> та <code>key</code>, які приймає функція <code>sorted()</code>, працюють точно так само, як і метод <code>sort()</code> з попередніх розділів.</p><!--kg-card-begin: html--><h2 id="коли-використовувати-sort-та-sorted">Коли використовувати sort() та sorted()</h2><!--kg-card-end: html--><p>Нижче перераховано речі, на які потрібно звернути увагу, вирішуючи, що варто використовувати: <code>sort()</code> чи <code>sorted()</code>.</p><p>По-перше, врахуйте тип даних, з якими працюєте:</p><ul><li>якщо ви працюєте виключно зі списком з самого початку, то вам потрібно використовувати метод <code>sort()</code>, оскільки <code>sort()</code> викликається тільки для списків;</li><li>якщо ви хочете більшої гнучкості і поки не працюєте зі списком, то можете використовувати <code>sorted()</code>. Функція <code>sorted()</code> приймає і сортує будь-який ітерабельний об’єкт (словники, кортежі та множини), а не лише списки.</li></ul><p>Потім потрібно врахувати, чи для вас важливо зберегти початковий порядок списку, з яким працюєте:</p><ul><li>при виклику <code>sort()</code> буде змінено вихідний список, а початковий порядок буде втрачено. Ви не зможете відновити початкові позиції елементів списку. Використовуйте <code>sort()</code>, коли ви точно впевнені, що хочете змінити список, з яким працюєте, і впевнені, що не хочете зберігати попередній порядок;</li><li>з іншого боку, функція <code>sorted()</code> корисна, якщо ви хочете створити новий список, але потрібно залишити той список, з яким працюєте. Функція <code>sorted()</code> створить новий відсортований список, елементи якого впорядковані у бажаному порядку.</li></ul><p>Наостанок врахуйте ефективність у часі й пам’яті:</p><ul><li>метод <code>sort()</code> займає й споживає менше пам’яті, оскільки він просто сортує список на місці й не створює зайвий новий список, який вам не потрібний. З цієї ж причини він трохи швидший, оскільки не створює копію. Це може бути корисно, якщо ви працюєте з великими списками, які містять більше елементів.</li></ul><h2 id="-"><strong>Висновок</strong></h2><p>Це все! Тепер ви знаєте, як відсортувати список у Python за допомогою методу <code>sort()</code>.</p><p>Ми також розглянули ключові відмінності між сортуванням списку за допомогою <code>sort()</code> та <code>sorted()</code>.</p><p>Сподіваюсь, ця стаття була корисною.</p><p>Щоб дізнатися більше про мову програмування Python, ознайомтеся з безоплатною сертифікацією freeCodeCamp «<a href="https://www.freecodecamp.org/ukrainian/learn/scientific-computing-with-python/">Наукові обчислення з Python</a>».</p><p>Ви почнете з основ. Навчання побудоване в інтерактивний спосіб, дружній до початківців. У кінці ви створите п’ять проєктів, щоб попрактикуватись і закріпити вивчене.</p><p>Дякую, що прочитали. Щасливого програмування!</p> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Посібник з локалізації: як перекласти вебсайт різними мовами світу ]]>
                </title>
                <description>
                    <![CDATA[ Вітаю! Щоб досягти успіху в глобальному світі, де інформація доступна всього за декілька натискань, важливо адаптувати вебсайт та інші ресурси різними мовами і культурами. Цей посібник навчить основам локалізації та тому, як перекласти вебсайт так, щоб привернути увагу глобальної спільноти користувачів без будь-яких мовних бар’єрів. 🔹 З чого розпочати? Але ]]>
                </description>
                <link>https://www.freecodecamp.org/ukrainian/news/posibnyk-z-lokalizatsiyi-yak-pereklasty-vebsayt-usima-movamy-svitu/</link>
                <guid isPermaLink="false">65369224aa456103ebe1eed2</guid>
                
                    <category>
                        <![CDATA[ локалізація ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Anastasiia Buievych ]]>
                </dc:creator>
                <pubDate>Wed, 14 Aug 2024 11:25:37 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/ukrainian/news/content/images/2023/11/Localization-Course-Handbook-Cover-Version-4.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p data-test-label="translation-intro">
        <strong>Оригінальна публікація:</strong> <a href="https://www.freecodecamp.org/news/localization-book-how-to-translate-your-website/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">Localization Guide – How to Translate Your Website Into Different World Languages [Full Book]</a>
      </p><p>Вітаю! Щоб досягти успіху в глобальному світі, де інформація доступна всього за декілька натискань, важливо адаптувати вебсайт та інші ресурси різними мовами і культурами.</p><p>Цей посібник навчить основам локалізації та тому, як перекласти вебсайт так, щоб привернути увагу глобальної спільноти користувачів без будь-яких мовних бар’єрів.</p><h2 id="-"><strong>🔹 З чого розпочати?</strong></h2><p>Але з чого розпочати?</p><p>Це важливе запитання, яке менеджери часто задають собі, коли вирішують адаптувати продукт та зробити його багатомовним.</p><p>У цьому підручнику ви дізнаєтеся всі основи локалізації з концептуальної та практичної точки зору.</p><p>Ви дізнаєтеся, як локалізувати файли, вебсайти, ігри та будь-який інший матеріал на хмарній платформі керування локалізацією <a href="https://crowdin.com">Crowdin</a>, що забезпечує локалізацію freeCodeCamp.</p><p><strong>Ми розглянемо<strong>:</strong></strong></p><ul><li><a href="#freecodecamp-як-реальний-приклад">freeCodeCamp як реальний приклад</a></li><li><a href="#локалізація-від-людей-для-людей">Локалізація від людей для людей</a></li><li><a href="#основи-локалізації">Основи локалізації</a></li><li><a href="#що-таке-локалізація">Що таке локалізація?</a></li><li><a href="#переклад-та-локалізація">Переклад та локалізація</a></li><li><a href="#важливість-локалізації">Важливість локалізації</a></li><li><a href="#термінологія-локалізації">Термінологія локалізації</a></li><li><a href="#переклад-та-редагування">Переклад та редагування</a></li><li><a href="#що-можна-локалізувати">Що можна локалізувати?</a></li><li><a href="#поширені-формати-файлів">Поширені формати файлів</a></li><li><a href="#етапи-та-посади-в-локалізації">Етапи та посади в локалізації</a></li><li><a href="#основи-crowdin-для-локалізаційних-проєктів">Основи Crowdin для локалізаційних проєктів</a></li><li><a href="#важливі-терміни-при-використанні-crowdin">Важливі терміни при використанні Crowdin</a></li><li><a href="#початок-роботи-з-crowdin">Початок роботи з Crowdin</a></li><li><a href="https://www.freecodecamp.org/ukrainian/news/p/2f95d723-16c0-4f5b-a532-fa68c5573ebe/%D1%8F%D0%BA-%D1%81%D1%82%D0%B2%D0%BE%D1%80%D0%B8%D1%82%D0%B8-%D0%BE%D0%B1%D0%BB%D1%96%D0%BA%D0%BE%D0%B2%D0%B8%D0%B9-%D0%B7%D0%B0%D0%BF%D0%B8%D1%81%20%D0%BD%D0%B0-crowdin">Як створити обліковий запис на Crowdin</a></li><li><a href="#як-налаштувати-профіль-на-crowdin">Як налаштувати профіль на Crowdin</a></li><li><a href="#як-створити-проєкт-на-crowdin">Як створити проєкт на Crowdin</a></li><li><a href="#огляд-проєкту">Огляд проєкту</a></li><li><a href="#як-змінити-налаштування-проєкту-на-crowdin">Як змінити налаштування проєкту на Crowdin</a></li><li><a href="#як-видалити-проєкт-на-crowdin">Як видалити проєкт на Crowdin</a></li><li><a href="#як-завантажити-файли-до-проєкту-на-crowdin">Як завантажити файли до проєкту на Crowdin</a></li><li><a href="#як-розпочати-перекладати">Як розпочати перекладати</a></li><li><a href="https://www.freecodecamp.org/ukrainian/news/p/2f95d723-16c0-4f5b-a532-fa68c5573ebe/%D1%8F%D0%BA-%D0%BA%D0%BE%D1%80%D0%B8%D1%81%D1%82%D1%83%D0%B2%D0%B0%D1%82%D0%B8%D1%81%D1%8F-%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80%D0%BE%D0%BC-%D0%BF%D0%B5%D1%80%D0%B5%D0%BA%D0%BB%D0%B0%D0%B4%D1%83">Як користуватися редактором перекладу</a></li><li><a href="#режими-редактора-перекладу">Режими редактора перекладу</a></li><li><a href="#як-перейти-до-іншого-файлу">Як перейти до іншого файлу</a></li><li><a href="#як-переглянути-всі-рядки">Як переглянути всі рядки</a></li><li><a href="#як-перекладати-мови-із-письмом-справа-наліво">Як перекладати мови із письмом справа наліво</a></li><li><a href="#як-скачати-перекладені-файли">Як скачати перекладені файли</a></li><li><a href="#як-використовувати-память-перекладів">Як використовувати пам’ять перекладів (TM)</a></li><li><a href="#глосарій">Глосарій</a></li><li><a href="#забезпечення-якості-на-crowdin">Забезпечення якості (QA) на Crowdin</a></li><li><a href="#як-завантажити-наявні-переклади">Як завантажити наявні переклади</a></li><li><a href="#як-попередньо-перекласти-проєкт">Як попередньо перекласти проєкт</a></li><li><a href="#переклад-офлайн">Переклад офлайн</a></li><li><a href="#громадські-проєкти">Громадські проєкти</a></li><li><a href="#crowdin-для-команд-та-організацій">Crowdin для команд та організацій</a></li><li><a href="#як-запросити-членів-команди">Як запросити членів команди</a></li><li><a href="#посади">Посади</a></li><li><a href="#як-призначити-або-змінити-посаду">Як призначити або змінити посаду</a></li><li><a href="#менеджери-проєкту">Менеджери проєкту</a></li><li><a href="#завдання">Завдання</a></li><li><a href="#звіти">Звіти</a></li><li><a href="#бесіди-на-crowdin">Бесіди на Crowdin</a></li><li><a href="#інтеграції-та-інструменти-для-підвищення-продуктивності-на-crowdin">Інтеграції та інструменти для підвищення продуктивності на Crowdin</a></li><li><a href="#як-перекласти-вебсайт-на-crowdin">Як перекласти вебсайт на Crowdin</a></li><li><a href="#переклад-freecodecamp">Переклад freeCodeCamp</a></li></ul><p>Готові? Тоді розпочнемо!</p><!--kg-card-begin: html--><h2 id="freecodecamp-як-реальний-приклад">🔹 freeCodeCamp як реальний приклад</h2><!--kg-card-end: html--><p>freeCodeCamp.org — це реальний приклад організації та проєкту з відкритим кодом, який скористався поняттям локалізації, щоб привернути увагу глобальної спільноти. </p><p>Наша навчальна програма з програмування доступна багатьма мовами, зокрема:</p><ul><li>англійською;</li><li>іспанською;</li><li>китайською;</li><li>італійською;</li><li>португальською;</li><li>українською;</li><li>японською.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/freecodecamp-language-dropdown-1.png" class="kg-image" alt="freecodecamp-language-dropdown-1" width="600" height="400" loading="lazy"><figcaption>Як змінити мову на freeCodeCamp.</figcaption></figure><p>Наша спільнота активно працює над перекладом freeCodeCamp іншими мовами, зокрема:</p><ul><li>арабською;</li><li>азербайджанською;</li><li>бенгальською;</li><li>китайською (спрощеною);</li><li>нідерландською;</li><li>французькою;</li><li>німецькою;</li><li>івритом;</li><li>гінді;</li><li>індонезійською;</li><li>італійською;</li><li>японською;</li><li>корейською;</li><li>непальською;</li><li>перською;</li><li>португальською;</li><li>румунською;</li><li>іспанською;</li><li>суахілі;</li><li>турецькою;</li><li>українською;</li><li>урду;</li><li>та багатьма іншими.</li></ul><p>Для локалізації доступно багато світових мов, а також ми публікуємо локалізовані публікації, канали на YouTube, форуми та інше.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/freecodecamp-crowdin-project.png" class="kg-image" alt="freecodecamp-crowdin-project" width="600" height="400" loading="lazy"><figcaption>Локалізаційний проєкт навчальної програми та доступні мови.</figcaption></figure><!--kg-card-begin: html--><h2 id="локалізація-від-людей-для-людей">🔹 Локалізація від людей для людей</h2><!--kg-card-end: html--><p>Наш процес локалізації спрямований на те, що має найбільше значення: на чудову спільноту учнів, які прокидаються кожен день з ентузіазмом, щоб здобути нові навички.</p><p>Ми вважаємо, що мова та культура не повинні бути бар’єрами для навчання. Знання мають бути доступними по всьому світу.</p><p>Тому ми розпочали цей процес і будемо продовжувати наші зусилля, доки не забезпечимо доступ до знань у кожному куточку світу. </p><p>Одним з ключових аспектів нашого процесу локалізації є те, що він керується і виконується людьми для людей. Переклади написані й затверджені волонтерами та працівниками нашої неймовірної спільноти. </p><p>Будьмо чесними: кожен може відрізнити автоматично згенерований переклад. Він буквальний, в ньому не вистачає чіткості і він відчувається відокремленим від контексту та тону вихідного тексту. </p><p>Люди набагато краще адаптовують мову, а також перекладають речення таким чином, щоб вони звучали більш природно різними мовами та у контексті різних культур. </p><p>freeCodeCamp має чудову спільноту волонтерів, які присвячують свій час на переклад наших матеріалів, а також чудову команду працівників, які контролюють процес з остаточною метою публікації перекладів високої якості. </p><p>З моменту запуску наших зусиль з локалізації понад 2 000 перекладачів та понад 60 редакторів допомогли виконати нашу місію. </p><p>💡 <strong>Важливо<strong>:</strong></strong> якщо ви зацікавлені і хочете долучитися до перекладу freeCodeCamp, будь ласка, прочитайте <a href="https://contribute.freecodecamp.org/intro/">наші правила</a>. У кінці цієї статті ви знайдете більше інформації про наші зусилля з локалізації.</p><p>Керування таким великим проєктом зі світовою спільнотою може здатися складним, правда ж? Як ми можемо досягнути цього як неприбуткова організація? </p><p>Ви отримаєте відповіді на всі запитання у цьому посібнику. </p><p>Ми розглянемо всі основи локалізації, а також основні та розширені можливості <a href="https://crowdin.com">Crowdin</a>. </p><p>Готові? Розпочнемо.</p><!--kg-card-begin: html--><h2 id="основи-локалізації">🔹 Основи локалізації</h2><!--kg-card-end: html--><p>Ми розпочнемо з огляду основ локалізаційного процесу та кроків, які потрібно зробити, щоб продукт можна було використовувати без будь-яких мовних або культурних бар’єрів. </p><!--kg-card-begin: html--><h3 id="що-таке-локалізація">🔶 Що таке локалізація?</h3><!--kg-card-end: html--><p>Перш за все, визначимо <strong>локалізацію</strong>.</p><p>Згідно з <a href="https://dictionary.cambridge.org/dictionary/english/localization">Cambridge Dictionary</a>, локалізація — це: </p><blockquote>Процес організації бізнесу або промисловості так, щоб головна діяльність відбувалась в локальних місцях, а не на національному або міжнародному рівні. </blockquote><p>У контексті продуктів та послуг, локалізація, в основному, означає адаптацію до мови та культури конкретного населення. Це також стосується застосунків, оскільки їх також потрібно адаптувати до різних культур.</p><!--kg-card-begin: html--><h3 id="переклад-та-локалізація">🔶 Переклад та локалізація</h3><!--kg-card-end: html--><p>Ви можете бути здивовані, дізнавшись, що локалізація відрізняється від перекладу. Насправді, вона ширша. </p><p><a href="https://dictionary.cambridge.org/dictionary/english/translation">Cambridge Dictionary</a> дає таке визначення перекладу:</p><blockquote>Дія або процес заміни слів однієї мови на слова іншої мови, які мають той самий зміст. </blockquote><p>Зверніть увагу на ключову частину цього визначення: «заміна слів, які мають той самий зміст». </p><p>Переклад передбачає заміну слів однієї мови на слова іншої мови з метою збереження початкового значення. Це дуже корисно, але трохи обмежено, оскільки мета полягає в тому, щоб сказати те саме, але іншою мовою. </p><p>Однак локалізація може вийти за межі цього, щоб краще пристосувати продукт до іншої культури чи країни. </p><p>Наприклад, локалізація особливо корисна для маркетингових кампаній та рекламних оголошень, які намагаються досягти аудиторії і переконати придбати продукт. Деякі культури можуть краще сприймати певні кольори, або в них можуть бути місцеві фрази чи жаргон, з якими місцеве населення більше знайоме. </p><p>У такому випадку локалізація кампанії краща, ніж буквальний переклад. </p><p><strong>Постійна локалізація</strong> йде ще далі. Вона передбачає постійну локалізацію продукту під час оновлення або розширення в гнучкому циклі розробки продукту. Вона часто використовується для локалізації застосунків.</p><!--kg-card-begin: html--><h3 id="важливість-локалізації">🔶 Важливість локалізації</h3><!--kg-card-end: html--><p>Навіщо локалізувати продукт або платформу? Світ дуже різноманітний, і різні культури мають свої відмінні звичаї та говорять різними мовами. </p><p>Ви знали, що, за даними <a href="https://www.linguisticsociety.org/content/how-many-languages-are-there-world">Лінгвістичного товариства Америки</a>, у світі існує понад 6 000 мов? </p><p>Серед 20 найбільш поширених мов у світі ми можемо знайти такі:</p><ul><li>англійська;</li><li>мандаринська;</li><li>гінді;</li><li>іспанська;</li><li>французька;</li><li>арабська;</li><li>бенгальська;</li><li>португальська;</li><li>урду;</li><li>німецька;</li><li>японська.</li></ul><p>💡 <strong>Важливо<strong>: </strong></strong>більше інформації про мови за загальною кількістю мовців можна знайти у <a href="https://en.wikipedia.org/wiki/List_of_languages_by_total_number_of_speakers">цій статті</a>.</p><p>Велика частина людей не знає більше однієї мови. Не кожен має можливість вивчити та володіти англійською як другою мовою, але кожна людина є потенційним користувачем вашого продукту чи платформи. </p><p>Саме тому локалізація може бути настільки важливою для вас. </p><p>Наприклад, якщо ви створюєте освітню платформу, ви зможете привернути увагу людей і здійснити місію на світовому рівні, локалізуючи свій вебсайт. </p><p>Якщо ви створюєте комерційний продукт або платформу, будь-хто може стати вашим потенційним користувачем. </p><p>Не дозволяйте мові стати бар’єром. Локалізація може стати вашим найкращим другом.</p><!--kg-card-begin: html--><h3 id="термінологія-локалізації">🔶 Термінологія локалізації</h3><!--kg-card-end: html--><p>Тепер ви знаєте чому локалізація настільки важлива, тому заглибимося в деякі важливі терміни, з якими ви часто зустрічатиметесь у контексті перекладу та локалізації.</p><h3 id="--1"><strong>Інтернаціоналізація</strong></h3><blockquote>Дія становлення або перетворення чогось у міжнародний рівень.<br> — <a href="https://dictionary.cambridge.org/dictionary/english/internationalization">Cambridge Dictionary</a></blockquote><p>У контексті локалізації застосунку це також передбачає адаптацію інтерфейсу користувача для роботи з іншими мовами та його готовність до перекладу.</p><h3 id="--2"><strong>Культуризований</strong></h3><blockquote>Походить від культури або зумовлений нею.<br> — <a href="https://www.merriam-webster.com/dictionary/culturalized">Merriam-Webster Dictionary</a></blockquote><p>У кожної культури різні традиції та словниковий запас. Культура може відігравати ключову роль у тому, як спільнота сприймає продукт, кампанію та платформу. Для успіху дуже важливо розуміти, як їх адаптувати.</p><h3 id="--3"><strong>Псевдолокалізація</strong></h3><p>Префікс <em>псевдо</em> визначений як:</p><blockquote>Несправжній, неправильний, фальшивий.<br> — <a href="https://goroh.pp.ua/Етимологія/псевдо-">Горох</a></blockquote><p>Саме про це йдеться в псевдолокалізації. Це процес створення фальшивих перекладів, які виступають як заповнювачі для реальних перекладів на платформі чи в продукті.</p><p>Ви можете запитати: «Для чого нам фальшиві переклади?»</p><p>Відповідь полягає в тому, що ми використовуємо їх перед початком перекладу, щоб перевірити, чи програмне забезпечення готове працювати з декількома мовами.</p><p>Найчастіше це стосується перевірки того, чи мова з довшими або коротшими словами працює з інтерфейсом користувача, і чи правильно відтворюються мови із письмом справа наліво.</p><p>Цей процес також допомагає знайти будь-які рядки, які можуть бути закодованими у вихідних файлах проєкту. Можливо, вам знадобиться перемістити їх до файлу, де зберігаються всі рядки проєкту.</p><p>Основною метою псевдолокалізації є перевірка готовності до перекладу.</p><h3 id="-mt-"><strong>Машинний переклад (MT)</strong></h3><blockquote>Процес використання штучного інтелекту для автоматичного перекладу тексту з однієї мови на іншу без участі людини.<br> — <a href="https://aws.amazon.com/what-is/machine-translation/">Amazon Web Services</a></blockquote><p>Ми поговоримо про цей термін детальніше, оскільки платформа, яку ми використовуватимемо для перекладу нашого матеріалу, має цю функцію, і може зберегти багато часу.</p><h3 id="-tm-"><strong>Пам’ять перекладів (TM)</strong></h3><blockquote>База даних, що містить набір раніше перекладених текстів.<br> — <a href="https://uk.wikipedia.org/wiki/Пам%27ять_перекладів">Вікіпедія</a></blockquote><p>Завдяки цій функції можна зберігати попередні переклади і повторно використовувати їх, щоб зберегти час.</p><p>💡 <strong>Важливо<strong>: </strong></strong>зверніть увагу, що абревіатури (MT та TM) дуже схожі, але вони відрізняються. Будь ласка, приділіть деякий час, щоб зрозуміти різницю між цими двома поняттями, оскільки ви будете часто зустрічати їх у цьому посібнику.</p><h3 id="-llm-"><strong>Великі мовні моделі (LLM)</strong></h3><blockquote>Алгоритми глибокого навчання, які можуть розпізнавати, узагальнювати, перекладати, передбачати та генерувати вміст, використовуючи дуже великі набори даних.<br> — <a href="https://www.nvidia.com/en-us/glossary/data-science/large-language-models/">Nvidia</a></blockquote><p>Ці терміни є фундаментальними, якщо ви плануєте зануритися у переклад та локалізацію.</p><p>Ви також можете зустріти слова, які використовують числа для позначення скорочень. Їх називають нумеронімами.</p><ul><li><strong>l<strong>10n</strong></strong>: цей нумеронім означає локалізацію. Число 10 позначає 10 літер між <strong>l</strong> напочатку та <strong>n</strong> вкінці;</li><li><strong><strong>i18n</strong></strong>: цей нумеронім означає інтернаціоналізацію (так, це дуже довге слово!). Число 18 позначає 18 літер між <strong>і</strong> напочатку та <strong>n</strong> вкінці.</li></ul><p>💡 <strong>Важливо<strong>: </strong></strong>літеру L в l10n можуть писати як великою, так і малою. Велика літера L допомагає відрізнити його від нумероніма i18n (вони можуть виглядати схожими в деяких шрифтах).</p><!--kg-card-begin: html--><h3 id="переклад-та-редагування">🔶 Переклад та редагування</h3><!--kg-card-end: html--><p>Ще одний важливий аспект, який ви повинні знати, — це різниця між перекладом та редагуванням.</p><p><strong>Переклад</strong> передбачає заміну слів з однієї мови на іншу з метою збереження того самого значення.</p><p>Але після того, як перекладачі завершили свою роботу, команда локалізації також повинна переглянути, відредагувати та затвердити переклади, щоб переконатися, що все точно і правильно. Цей процес перевірки перекладів називається <strong>редагуванням</strong>.</p><p>Переклад та редагування — це різні етапи процесу локалізації. Ми докладніше розглянемо ці процеси, і ви дізнаєтеся про кроки, з яких вони складаються, та роль команди у забезпеченні правильної локалізації.</p><!--kg-card-begin: html--><h3 id="що-можна-локалізувати">🔶 Що можна локалізувати?</h3><!--kg-card-end: html--><p>Коли ми говоримо про переклад та локалізацію, першим на думку спадає переклад файлів з текстом, правда ж?</p><p>Проте це не єдиний матеріал, який можна локалізувати. Ми можемо локалізувати документи, електронні таблиці, вебсайти, ігри, діалоги, сценарії, аудіо, відео, графіку і так далі.</p><p>Подумайте про подкасти та відео. Їх можна локалізувати за допомогою дубляжу. Нам просто потрібно перекласти транскрипт, замінити оригінальне аудіо та синхронізувати перекладений звук.</p><p>Титри та субтитри також можна локалізувати. Це форма тексту, але вона походить з відеоджерела. Ви можете помітити, як різні типи файлів можуть бути тісно пов’язані у процесі локалізації.</p><p>Зрештою, ми можемо локалізувати графіку, як-от зображення, візуальні маркетингові кампанії, рекламу та багато іншого.</p><p>Основний момент, який варто підкреслити, полягає в тому, що локалізація та переклад не обмежуються лише письмовим матеріалом. Є широкий спектр матеріалу, який можна локалізувати, щоб отримати увагу більшої аудиторії.</p><!--kg-card-begin: html--><h3 id="поширені-формати-файлів">🔶 Поширені формати файлів</h3><!--kg-card-end: html--><p>У попередньому розділі ми говорили про різні типи матеріалу, який можна перекласти. Тепер поговоримо про формати файлів, які зазвичай зустрічаються в перекладі. Ви також можете знайти їх на платформі, на якій ми будемо працювати.</p><p>💡 <strong>Важливо<strong>: </strong></strong>навіть якщо ви зараз не використовуєте ці формати, завжди корисно розуміти, що вони роблять і що вони представляють. Вони можуть стати в нагоді у майбутньому або у випадках, коли ви зустрінете їх у документації платформи, якою користуєтеся.</p><h3 id="-csv"><strong>Файли CSV</strong></h3><ul><li>розширення файлу: <code><strong><strong>.csv</strong></strong></code>;</li><li>текстовий формат файлу, де значення розділені комами;</li><li>зберігає табличні дані, серед яких числа і текст;</li><li>кожен рядок зазвичай представляє один запис;</li><li>зазвичай використовується для обміну даними і може бути оброблений за допомогою мов програмування.</li></ul><h3 id="-html"><strong>Файли HTML</strong></h3><ul><li>розширення файлу: <code><strong><strong>.html</strong></strong></code>;</li><li>HTML означає «мова розмітки гіпертексту»;</li><li>використовується для представлення структури та вмісту вебсайту;</li><li>якщо ви відкриєте цей файл у браузері, ви побачите вміст вебсайту.</li></ul><h3 id="-json"><strong>Файли JSON</strong></h3><ul><li>розширення файлу: <code><strong><strong>.json</strong></strong></code>;</li><li>JSON означає «запис об’єктів JavaScript»;</li><li>зберігає дані у простому текстовому форматі на основі пар ключ-значення;</li><li>використовується для обміну даними, особливо в інтернеті, оскільки є легким.</li></ul><h3 id="-markdown"><strong>Файли markdown</strong></h3><ul><li>розширення файлу: <code><strong><strong>.md</strong></strong></code>;</li><li>використовується для створення форматованого тексту;</li><li>легка мова розмітки зі специфічним синтаксисом;</li><li>часто використовується для написання документації програмного забезпечення, блогів та статей.</li></ul><h3 id="-po"><strong>Файли PO</strong></h3><ul><li>розширення файлу: <code><strong><strong>.po</strong></strong></code>;</li><li>використовується системою <code><strong>gettext</strong></code>, яку часто використовують для написання багатомовних програм. Також широко використовується при реалізації <code><strong>GNU gettext</strong></code>;</li><li><code><strong>gettext</strong></code> є стандартом в багатьох рушіях розробки ігор, таких як Unreal Engine. Використовується в багатьох мовах програмування, включно з C, C++, PHP та Python.</li></ul><h3 id="--4"><strong>Текстовий файл</strong></h3><ul><li>розширення файлу: <code><strong><strong>.txt</strong></strong></code>;</li><li>використовується для зберігання звичайного тексту;</li><li>не містить зображень або нетекстових символів.</li></ul><h3 id="-xml-"><strong>Розширювана мова розмітки (XML)</strong></h3><ul><li>розширення файлу: <code><strong><strong>.xml</strong></strong></code>;</li><li>використовується для зберігання, обміну та відновлення довільних даних;</li><li>зазвичай використовується для обміну даними в інтернеті;</li><li>багато локалізаційних фреймворків використовують XML. Наприклад, Android використовує формат файлів на основі XML для зберігання текстів, які можна перекласти.</li></ul><h3 id="-xliff"><strong>Файли XLIFF</strong></h3><ul><li>розширення файлу: <code><strong><strong>.xliff</strong></strong></code>;</li><li>XLIFF означає «формат файлу обміну локалізацією на основі XML»;</li><li>використовує формат на основі XML;</li><li>використовується для стандартизації способу передачі локалізованих даних між інструментами локалізації.</li></ul><h3 id="-xlsx"><strong>Файли XLSX</strong></h3><ul><li>розширення файлу: <code><strong><strong>.xlsx</strong></strong></code>;</li><li>використовується для зберігання даних в електронних таблицях;</li><li>скорочення до «Microsoft Excel Spreadsheet».</li></ul><h3 id="-resx"><strong>Файли RESX</strong></h3><ul><li>розширення файлу: <code><strong><strong>.resx</strong></strong></code>;</li><li>використовується .NET-застосунками для зберігання ресурсів, які можна локалізувати;</li><li>використовує формат файлу на основі XML.</li></ul><p>Це найпоширеніші формати файлів, які можна знайти у локалізаційних проєктах, але існує більше сотні форматів файлів, якими можна користуватися.</p><p>Crowdin — платформа керування локалізацією, яку ми використовуватимемо у цьому посібнику — підтримує більше 100 форматів файлів.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/supported-formats.png" class="kg-image" alt="supported-formats" width="600" height="400" loading="lazy"><figcaption>Перегляд <a href="https://store.crowdin.com/categories/file-formats">підтримуваних форматів</a> на Crowdin.</figcaption></figure><!--kg-card-begin: html--><h3 id="етапи-та-посади-в-локалізації">🔶 Етапи та посади в локалізації</h3><!--kg-card-end: html--><p>Чудово! Тепер ви знаєте більше про типи файлів, які можуть зустрітися у локалізаційному проєкті, тому давайте розглянемо цей процес з точки зору керування проєктами.</p><p>Які кроки потрібно виконати для локалізації проєкту? З чого почати? Ось кроки, які допоможуть відповісти на ці запитання:</p><h3 id="-1-"><strong>Крок №1. Визначте область та мету проєкту</strong></h3><p>Перш ніж локалізувати будь-який файл, важливо проаналізувати область та мету проєкту.</p><p>Дайте відповідь на такі запитання:</p><ul><li>Хто виступає цільовою аудиторією?</li><li>Чого я намагаюсь досягти, локалізуючи матеріал?</li><li>Як досягти цих цілей?</li><li>Які частини вебсайту, гри, відео або матеріалу потрібно локалізувати? </li><li>Матеріал потрібно перекласти чи локалізувати (адаптувати)? Іноді достатньо перекладу.</li><li>Якщо його потрібно адаптувати, як це зробити?</li><li>Варто просити порад від людей, які знайомі з цією культурою? Якщо так, як зв’язатись з ними?</li><li>Я розмовляю іншими мовами. Чи можу я самостійно перекласти матеріал, чи варто залучити допомогу?</li><li>Який бюджет?</li><li>Чи реалістичні мої цілі відносно бюджету?</li></ul><p>Також потрібно визначити, хто перекладатиме матеріал:</p><ul><li>Я перекладатиму самостійно?</li><li>Я залучу команду волонтерів?</li><li>Я найму команду перекладачів?</li><li>Я використовуватиму автоматизовані процеси, такі як машинний переклад або попередній переклад за допомогою штучного інтелекту?</li></ul><p>💡 <strong>Важливо<strong>: </strong></strong>Crowdin дозволяє найняти їхні послуги локалізації та послуги від партнерів на Crowdin Marketplace.</p><p>Важливо визначити чіткі та реалістичні цілі, щоб уникнути непередбачуваних ситуацій.</p><p>Запишіть свої цілі і переконайтеся, що у вас розписані кроки, які потрібно зробити, щоб розпочати, виконати та завершити процес локалізації.</p><h3 id="-2-"><strong>Крок №2. Створіть файли, які потрібно локалізувати</strong></h3><p>Коли у вас є чіткі цілі та обсяг проєкту, наявність вихідних файлів проєкту є обов’язковою. Це файли, які ваша команда буде локалізувати.</p><p>Переконайтеся, що у вас є всі необхідні вихідні файли та ресурси, перш ніж розпочати процес локалізації.</p><p>Звичайно, ви завжди можете додати новий матеріал в процесі, але наявність чіткої початкової ідеї про складнощі проєкту буде корисною з точки зору керування часом та бюджетом.</p><h3 id="-3-"><strong>Крок №3. Підготуйте продукт до інтернаціоналізації</strong></h3><p>Перш ніж розпочати процес локалізації, потрібно підготувати свій продукт до інтернаціоналізації, що дуже специфічно стосовно технологій.</p><p>Це особливо стосується програмного забезпечення. Інструменти, які ви використовуватимете для інтернаціоналізації застосунку React.js, можуть відрізнятися від інструментів, які ви використовуватимете для Android, iOS або гри.</p><p>Однак підходи та поняття, які ви будете використовувати, в основному однакові.</p><p>Вам потрібно подумати про те, як ви адаптуєте інтерфейс користувача та сервіси до інших мов. Наприклад, деякі мови можуть мати слова, які довші або коротші за вихідну мову, і це може змінити відтворення елементів.</p><p>Важливо переконатися, що все виглядає так, як ви цього бажаєте, ще до того, як у процес будуть залучені перекладачі та редактори.</p><p>Ще один ключовий крок — переконатися, що весь текст для перекладу відокремлений від коду. Під час перекладу програмного забезпечення весь текст для перекладу витягнутий у файл матеріалів, який можна передати перекладачам або завантажити на платформу керування локалізацією.</p><p>Команда Crowdin рекомендує зберігати великі файли, наприклад, HTML-сторінки та шаблони листів, в окремій директорії та мати по одній директорії на кожну мовну локаль. Вони пропонують, що «якщо ви перекладаєте свій матеріал на 5 цільових мов, у вас буде 5 копій матеріалу з позначками інтерфейсу та 5 директорій з усіма іншими активами, як-от HTML-файли».</p><p>Якщо ви розробляєте вебзастосунок, потрібно реалізувати багатомовний маршрутизатор. Застосунок повинен дозволяти користувачам вибрати бажану мову.</p><p>Для цього у вас є два варіанти. Ви можете:</p><ul><li>додати код мови як частину назви домена. Наприклад, <code><strong><strong>fr.example.com</strong></strong></code>;</li><li>додати код мови до посилання. Наприклад, <strong><strong><code>example.com/fr</code></strong></strong>.</li></ul><p>Це рекомендується з метою оптимізації пошукової системи (SEO).</p><p>Програмне забезпечення має обробляти та відтворювати адаптовані числа, дати та валюти, оскільки локалізація може передбачати їх адаптацію до різних форматів для різних культур.</p><p>Контекст дуже важливий. Багато інструментів інтернаціоналізації створюють файли з однією парою ключ-значення для кожної частини тексту. Вони пов’язують частину тексту вихідною мовою з відповідним перекладом.</p><p>Але важливо впевнитися, що файли містять деяку контекстуальну інформацію про вміст або елементи навколо них. Це може бути дуже корисно для перекладачів, оскільки вони можуть вибирати найкращий переклад, виходячи з контексту навколо рядка.</p><p>Зрештою, застосунок повинен вміти правильно обробляти множину, оскільки різні мови можуть мати різні форми множини.</p><p>💡 <strong>Важливо<strong>:</strong></strong> деякі з цих функцій можуть бути доступними в комплекті розробки програмного забезпечення (SDK), який ви використовуєте, але, можливо, вам знадобиться додати деякі з них за допомогою сторонніх бібліотек. Варто завжди це враховувати та перевіряти.</p><h3 id="-4-"><strong>Крок №4. Зберіть команду</strong></h3><p>Якщо ви проаналізували обсяг проєкту і вирішили, що не можете впоратися з ним самостійно, настав час зібрати команду.</p><p>Ви можете найняти команду або, якщо ви неприбуткова організація, як і freeCodeCamp, використовувати краудсорсинг, щоб попросити спільноту про допомогу з перекладом. Ви можете бути здивовані кількістю щирих і добрих людей, які готові допомогти.</p><p>Як тільки у вас є команда, ви можете призначити їм посади:</p><ul><li><strong>перекладачі</strong> використовують обрану вами платформу керування локалізацією для перекладу матеріалу;</li><li><strong>редактори</strong> переглядають, редагують та затверджують переклади. Переклади завжди корисно переглядати, щоб виправити будь-які помилки або невідповідності;</li><li><strong>розробники</strong> працюють над інтеграцією інструментів, які ви вибрали, для автоматизації процесу локалізації;</li><li><strong>менеджери проєкту</strong> координують завдання. Вони призначають перекладачам та редакторам конкретні завдання, щоб забезпечити якомога швидше просування проєкту.</li></ul><h3 id="-5-"><strong>Крок №5. Виберіть інструменти для локалізації</strong></h3><p>Вибір правильного інструменту локалізації може бути вирішальним для досягнення цілей. У світі локалізації існує інструмент, який називається системою керування перекладами (TMS).</p><p>Цей тип системи призначений для того, щоб допомогти автоматизувати повторювані завдання з метою оптимізації робочого процесу команди. Люди все одно матимуть свою посаду в процесі локалізації, але за допомогою системи керування перекладами вони можуть досягати своїх цілей набагато швидше.</p><p>Зазвичай ці системи можуть бути інтегровані з системами керування вмістом (CMS), щоб автоматично імпортувати матеріал з інших платформ, таких як платформи для блогів. Після імпорту ви можете локалізувати його і експортувати для публікації перекладених версій.</p><p>З відповідними інтеграціями системи керування перекладами також можуть перевіряти, чи були зміни у вихідних файлах, і автоматично імпортувати новий матеріал для початку локалізації.</p><p>Реальний приклад цього процесу: freeCodeCamp перекладає вихідні файли на Crowdin. Коли файл з навчальної програми freeCodeCamp змінюється, новий матеріал автоматично оновлюється в системі, щоб волонтери могли швидко його перекласти та опублікувати.</p><p>Автоматизація цього процесу може бути дуже корисною, особливо для великих організацій з різними проєктами та файлами, щоб вам не доводилося вручну відстежувати ці зміни.</p><h3 id="-6-"><strong>Крок №6. Перекладіть матеріал</strong></h3><p>Якщо ви вже обрали систему керування перекладами або інший корисний інструмент, то настав час почати перекладати матеріал.</p><p>Зазвичай ці платформи розбивають вихідний матеріал на так звані «рядки», які є частинами тексту, що можна перекласти. Перекладачі перекладатимуть рядки та зберігатимуть переклади.</p><p>Програмне забезпечення буде відповідальне за зберігання та об’єднання рядків для їх заміни у правильному місці файлу.</p><h3 id="-7-"><strong>Крок №7. Відредагуйте переклади</strong></h3><p>Редагування є одним з найважливіших етапів процесу, оскільки це останній крок контролю якості, зроблений людьми.</p><p>Редактори мають перевірити, чи переклади точні, і чи можна їх адаптувати до культури чи мови ще краще. Вони також перевіряють, чи є друкарські помилки або помилково введені слова, і чи використовується правильний формат. Вони можуть редагувати та затверджувати перекладені рядки.</p><p>Іноді вони можуть виявити додаткову кому, відсутній емоджі, зайвий пробіл або відсутню літеру, а ці маленькі деталі дійсно важливі для користувачів, тому цей етап варто сприймати дуже серйозно.</p><h3 id="-8-"><strong>Крок №8. Експортуйте локалізований матеріал</strong></h3><p>Після перевірки та затвердження всіх перекладів наступним кроком є експорт остаточного локалізованого матеріалу.</p><p>Якщо проєкт невеликий, ви можете зробити це вручну. Але якщо проєкт складніший, можна вибрати автоматизацію цього процесу з різними інтеграціями у системі керування локалізацією.</p><p>Наприклад, Crowdin дозволяє інтеграцію з різними платформами, включно з GitHub, Google Drive, Google Sheets, Dropbox, MailChimp та іншими.</p><p>Якщо переклад готовий та затверджений, і ви налаштували інтеграцію з GitHub, перекладені файли будуть автоматично оновлюватися у сховищі проєкту. Ви навіть можете налаштувати, де будуть зберігатися перекладені файли.</p><h3 id="-9-"><strong>Крок №9. Слідкуйте за змінами</strong></h3><p>Проєкти та платформи можуть змінюватися з часом. Файли можуть змінюватися, оскільки ви додаєте нові функції та матеріал. Це актуально для freeCodeCamp, оскільки ми регулярно додаємо новий матеріал і оновлюємо старий.</p><p>Як ми можемо керувати цими змінами і зберігати платформу локалізованою?</p><p>Завдяки Crowdin ми можемо використовувати інтеграції, щоб бути повідомленими про зміни, внесеними до файлів, і ми можемо знати, якщо у нас є нові рядки для перекладу.</p><p>Коли це стається, наша дивовижна команда волонтерів і працівників починає перекладати та перевіряти нові рядки, повторюючи цей цикл кожного разу, коли нам потрібно повернути відсоток перекладу до 100%.</p><!--kg-card-begin: html--><h2 id="основи-crowdin-для-локалізаційних-проєктів">🔹 Основи Crowdin для локалізаційних проєктів</h2><!--kg-card-end: html--><p>Ми ознайомилися з основними поняттями локалізації, тому можемо використати їх на платформі керування локалізацією, яка забезпечує локалізацію freeCodeCamp.</p><h3 id="--5"><strong>Що таке платформа керування локалізацією?</strong></h3><p>Це платформа, яка допомагає вам та вашій команді ефективно локалізувати матеріал, продукт та платформу за допомогою автоматизації, хмарних послуг та інтеграцій з іншими платформами.</p><p>Ми вже говорили про платформи керування перекладами, правда ж?</p><p>Платформи керування локалізацією дуже схожі, але вони допомагають локалізувати продукт, що є ширшим, ніж дослівний переклад тексту.</p><h3 id="-crowdin"><strong>Що таке Crowdin?</strong></h3><p>Crowdin — це платформа керування локалізацією, яку можна описати як:</p><blockquote>рішення на основі хмарних технологій, яке спрощує управління локалізацією для вашої команди (<a href="https://crowdin.com/">джерело: Crowdin</a>)</blockquote><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/crowdin-landing-page.png" class="kg-image" alt="crowdin-landing-page" width="600" height="400" loading="lazy"><figcaption>Цільова сторінка Crowdin.</figcaption></figure><p>Команда зазначає, що «це ідеальне місце для ефективного управління всім багатомовним матеріалом. Воно дозволяє оптимізувати процес локалізації та зберігати робочий потік гнучким».</p><p>Ця платформа також чудово підходить для команд та організацій, які планують локалізувати матеріал декількома мовами.</p><p>Ось <a href="https://crowdin.com">офіційний вебсайт Crowdin</a>, якщо ви хочете його переглянути.</p><p>На цій платформі ви будете застосовувати свої знання з локалізації, і навіть дізнаєтеся, як локалізувати вебсайт всього за декілька хвилин завдяки сервісам та інтеграціям Crowdin.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/crowdin-workflow.png" class="kg-image" alt="crowdin-workflow" width="600" height="400" loading="lazy"><figcaption>Робочий потік Crowdin. Зображення з <a href="https://crowdin.com">офіційного вебсайту</a>.</figcaption></figure><h3 id="-crowdin-1"><strong>Засновник Crowdin</strong></h3><p><a href="https://crowdin.com/page/about-crowdin">Сергій Дмитришин</a> — засновник та генеральний директор Crowdin. Він запустив компанію в 2009 році, і наразі вона має понад 2 мільйони зареєстрованих користувачів у 160+ країнах.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/Founder-and-CEO-of-Crowdin.png" class="kg-image" alt="Founder-and-CEO-of-Crowdin" width="600" height="400" loading="lazy"><figcaption><a href="https://crowdin.com/page/about-crowdin">Сергій Дмитришин</a> — засновник та генеральний директор Crowdin.</figcaption></figure><p>Ми мали можливість зустрітися з ним і запитати, як він би описав Crowdin п’ятьма словами. Він відповів:</p><blockquote>Постійна локалізація для сучасних компаній.<br>— Сергій Дмитришин</blockquote><p>Його бачення полягає в тому, щоб Crowdin був найкращою платформою для локалізації продуктів, які постійно еволюціонують, та для проєктів, які можуть ніколи не мати остаточної версії, оскільки їх постійно вдосконалюють, розширюють і оновлюють.</p><p>freeCodeCamp є прикладом цього. Ми постійно додаємо та оновлюємо матеріал, тому нам потрібний ефективний та гнучкий процес локалізації, щоб наша платформа була доступною та оновленою для глобальної спільноти.</p><p><a href="https://crowdin.com/page/about-crowdin">Основною метою</a> Crowdin є:</p><blockquote>розширення потенціалу гнучкої локалізації.</blockquote><p>Але що таке гнучка локалізація? Давайте розглянемо.</p><h3 id="--6"><strong>Що таке гнучка локалізація?</strong></h3><p>Гнучка локалізація — це процес, в якому локалізація включена в гнучкий цикл розробки продукту з метою локалізації продукту якнайшвидше, оскільки він розвивається.</p><p>💡 <strong>Важливо<strong>:</strong> </strong>гнучкий цикл розробки продукту — це цикл, в якому продукт постійно оновлюється в ітеративному методі.</p><p>Процес гнучкої локалізації відрізняється від процесу традиційної локалізації тим, що переклади не лише пишуться один раз і потім додаються до кінцевого продукту, а постійно додаються та оновлюються зі змінами продукту.</p><p>Звучить чудово, правда ж?</p><p>Але постійні оновлення також вимагають постійного керування, командної роботи, завантаження та скачування файлів, розгортання платформ і так далі.</p><p>Цей процес може швидко ускладнитися, якщо ваша команда не має необхідних інструментів. Але з такою платформою керування локалізацією, як Crowdin, ви та ваша команда можете зекономити час та ефективно досягти своїх цілей.</p><h3 id="-crowdin-2"><strong>Переваги Crowdin</strong></h3><p>Розглянемо деякі причини, чому варто використовувати Crowdin:</p><ul><li>ви можете приєднати свій проєкт до зовнішніх служб через інтеграції, щоб автоматизувати частину процесу локалізації;</li><li>ви можете зберігати свої переклади на їхніх хмарних службах і надавати доступ членам команди та волонтерам з усього світу;</li><li>ви можете автоматично генерувати машинні переклади при створенні матеріалу і попросити перекладачів перевірити та відредагувати їх, що заощаджує час;</li><li>ваша команда може перевіряти якість та формат перекладів за допомогою функцій контролю якості, перевірки орфографії та редагування;</li><li>ви можете генерувати звіти, створювати власні робочі процеси, спілкуватися з членами команди внутрішньо, призначати посади та дозволи, запрошувати нових учасників і багато іншого.</li></ul><p>Простими словами, це платформа, яка зробить процес локалізації набагато простішим для вас та вашої команди.</p><h3 id="-crowdin-3"><strong>Безоплатний план Crowdin</strong></h3><p>Crowdin чудовий тим, що пропонує повністю безоплатний план з усіма основними функціями, щоб перекладачі розпочали локалізацію матеріалу.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/crowdin-free-plan.png" class="kg-image" alt="crowdin-free-plan" width="600" height="400" loading="lazy"><figcaption>Безоплатні функції на Crowdin.</figcaption></figure><p>Так, це безоплатно! Вам потрібно лише створити обліковий запис, і ви зможете:</p><ul><li>створити необмежену кількість відкритих проєктів, які можуть бачити та перекладати інші користувачі;</li><li>додати необмежену кількість перекладачів до своїх відкритих проєктів;</li><li>створити один закритий проєкт;</li><li>розмістити до 60 000 слів у своїх перекладах;</li><li>використовувати корисні функції для підвищення ефективності перекладачів;</li><li>додати одну інтеграцію до свого проєкту (згодом ми їх розглянемо). </li></ul><p>Коли ви реєструєтеся та створюєте свій обліковий запис, ви також можете розпочати 14-денний безоплатний випробувальний період командного плану, а також 30-денний випробувальний період для бізнес-плану.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/free-trial.png" class="kg-image" alt="free-trial" width="600" height="400" loading="lazy"><figcaption>Часті питання (ЧаПи).</figcaption></figure><p>На Crowdin також є <a href="https://crowdin.com/pricing#annual">інші плани</a>, щоб відповідати вашим потребам.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/crowdin-pricing.png" class="kg-image" alt="crowdin-pricing" width="600" height="400" loading="lazy"><figcaption>Плани, які можна обрати.</figcaption></figure><h3 id="crowdin-"><strong>Crowdin для відкритих проєктів та навчальних закладів</strong></h3><p>Як неприбуткова організація, freeCodeCamp має спеціальну ліцензію, яку Crowdin надає проєктам з відкритим вихідним кодом та навчальним закладам для підтримки їхньої місії.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/crowdin-for-nonprofits.png" class="kg-image" alt="crowdin-for-nonprofits" width="600" height="400" loading="lazy"><figcaption>Часті питання (ЧаПи).</figcaption></figure><p>Якщо ви представляєте відкритий проєкт або навчальний заклад, ви можете зв’язатися з Crowdin для запиту на <a href="https://crowdin.com/page/open-source-project-setup-request">ліцензію відкритого коду</a> або <a href="https://crowdin.com/page/academic-license-project-setup-request">ліцензію для академічних потреб</a>.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/crowdin-for-open-source.png" class="kg-image" alt="crowdin-for-open-source" width="600" height="400" loading="lazy"><figcaption>Crowdin для відкритих проєктів.</figcaption></figure><p>Команда Crowdin допоможе вам та вашій організації.</p><!--kg-card-begin: html--><h3 id="важливі-терміни-при-використанні-crowdin">🔶 Важливі терміни при використанні Crowdin</h3><!--kg-card-end: html--><p>Перш ніж ми зануримося в практику, трішки поговоримо про важливі терміни для роботи з платформами керування локалізацією. <br><br>Ви часто зустрічатимете ці терміни в наступних розділах, тому давайте розглянемо їх детальніше. </p><h3 id="--7"><strong>Рядки</strong></h3><p>Коли ви завантажуєте матеріал на Crowdin, платформа повинна розділити текст на менші частини, які можна перекладати та зберігати окремо, доки всі переклади не будуть готові. Ці частини тексту називають «рядками». Після того, як вони будуть перекладені та затверджені, їх можна об’єднати, щоб згенерувати локалізовану версію матеріалу.</p><p>💡 <strong>Важливо:</strong> рядки можна вважати найменшими одиницями процесу перекладу. Ми не перекладаємо текст слово за слово. Ми перекладаємо його рядок за рядком. </p><h3 id="--8"><strong>Вихідна мова</strong></h3><p>Вихідна мова — це мова оригіналу. Наприклад, вихідною мовою freeCodeCamp є англійська, оскільки навчальна програма та документація створюються англійською мовою.</p><h3 id="--9"><strong>Цільова мова</strong></h3><p>Це мова, на яку перекладається матеріал. Наприклад, проєкти freeCodeCamp мають різні цільові мови, оскільки ми перекладаємо матеріал різними мовами.</p><h3 id="-tm--1"><strong>Пам’ять перекладів (TM)</strong></h3><p>Це схоже на базу даних, де ми зберігаємо всі раніше перекладені частини проєкту. Ми можемо зберігати речення, абзаци або інші одиниці тексту. Мета полягає в тому, щоб повторно використати ті ж самі переклади пізніше. Це функція, яка може зекономити багато часу, оскільки на вибір збереженого перекладу зазвичай потрібно всього кілька секунд. Його можна відредагувати за необхідності, але у нас все одно буде основа для роботи.</p><h3 id="-mt--1"><strong>Машинний переклад (MT)</strong></h3><p>Цей процес включає автоматичний переклад матеріалу без будь-якого втручання людини. Зазвичай в цьому процесі беруть участь штучний інтелект та машинне навчання. Перекладачі та редактори можуть взяти переклади, створені комп’ютером, та адаптувати або виправити їх за потреби.</p><p>💡 <strong>Важливо:</strong> будь ласка, майте на увазі, що пам’ять перекладів (TM) та машинний переклад (MT) відрізняються, хоча їхні абревіатури дуже схожі. Це може бути трохи заплутано спочатку, але завжди пам’ятайте, що «memory» (<em>укр.</em> пам’ять) вказує на базу даних перекладу, а «machine» (<em>укр.</em> машина) вказує на автоматизований процес перекладу.</p><h3 id="-qa"><strong>Перевірка QA</strong></h3><p>QA означає «Quality Assurance» (<em>укр.</em> забезпечення якості). Це процес перевірки перекладу на правильний формат та орфографію. На Crowdin є багато функцій QA, які допомагають знайти та виправити потенційні помилки.</p><h3 id="--10"><strong>Глосарій</strong></h3><p>Це база даних важливих термінів проєкту з визначеннями. Мета створення та підтримки глосарію полягає в тому, щоб надати перекладачам більше контексту щодо термінів та допомогти обрати найточніший переклад.</p><h3 id="--11"><strong>Знімок екрана</strong></h3><p>Картинка того, що ви можете бачити на екрані свого комп’ютера у певний момент. Зберігається як файл зображення.</p><h3 id="--12"><strong>Краудсорсинг</strong></h3><p>Це практика локалізації на основі співпраці. Основна ідея полягає в тому, що якщо ви є організацією і ваша мета — перекласти матеріал різними мовами, ви можете попросити допомоги у своєї спільноти. Наприклад, переклад freeCodeCamp є прикладом краудсорсингу.</p><h3 id="--13"><strong>Попередній переклад</strong></h3><p>Це автоматизована техніка, яку ви можете використовувати на Crowdin для попереднього автоматичного перекладу проєкту за допомогою машинного перекладу (MT) або пам’яті перекладів (TM). Після цього перекладачі можуть перевірити комп’ютерні переклади та відредагувати їх за необхідності.</p><h3 id="--14"><strong>Інтеграції</strong></h3><p>Це з’єднання, які ви можете створити між Crowdin та іншими програмами чи сервісами (наприклад, GitHub, Google Drive, Google Sheets тощо). Саме так сховище freeCodeCamp на GitHub залишається перекладеним. Коли ми додаємо нові рядки, вони автоматично завантажуються на Crowdin, і перекладачі можуть починати працювати над ними.</p><h3 id="--15"><strong>Вебхуки</strong></h3><p>Це автоматизовані «повідомлення», які застосунок або платформа надсилають іншому застосунку або платформі, коли відбуваються певні події. На Crowdin ви можете надіслати їх, коли переклади завершені, файли пройшли перевірку на помилки тощо.</p><h3 id="-cli-"><strong>Інтерфейс командного рядка (CLI)</strong></h3><p>Це інтерфейс користувача на основі тексту, який можна використовувати для взаємодії з комп’ютерною програмою, вводячи команди. На Crowdin є інтерфейс командного рядка (CLI) під назвою Crowdin Console Client, який дозволяє синхронізувати локалізаційний матеріал з проєктом.</p><h3 id="-api-"><strong>Прикладний програмний інтерфейс (API)</strong></h3><p>Це посередник, який дозволяє двом застосункам спілкуватися між собою, надсилаючи інформацію за певними протоколами. Crowdin також має API, який допомагає інтегрувати локалізацію в процес розробки.</p><h3 id="--16"><strong>Спеціальні змінні</strong></h3><p>На Crowdin можна вказати змінні, які не потрібно перекладати. Вони будуть виділені у вихідних рядках, які можуть бачити перекладачі. Щоб увімкнути цю функцію, вам потрібно звернутися до служби підтримки Crowdin.</p><!--kg-card-begin: html--><h3 id="початок-роботи-з-crowdin">🔶 Початок роботи з Crowdin</h3><!--kg-card-end: html--><p>Після цього детального, але надзвичайно важливого вступу до основ локалізації, прийшов час зануритися в практику та почати працювати на Crowdin.</p><!--kg-card-begin: html--><h3 id="як-створити-обліковий-запис на-crowdin">🔶 Як створити обліковий запис на Crowdin</h3><!--kg-card-end: html--><p>Якщо ваша мета — створити проєкт на Crowdin, вам потрібно створити обліковий запис, якщо його досі немає.</p><p>Для цього перейдіть на <a href="https://crowdin.com/">crowdin.com</a>.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/crowdin-landing-page-signed-out.png" class="kg-image" alt="crowdin-landing-page-signed-out" width="600" height="400" loading="lazy"><figcaption>Головна сторінка Crowdin.</figcaption></figure><p>Натисніть на кнопку <code>Sign up</code>.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/sign-up.png" class="kg-image" alt="sign-up" width="600" height="400" loading="lazy"><figcaption>Кнопка «Sign up».</figcaption></figure><p>Створіть обліковий запис, заповнивши та надіславши форму. Вам потрібно ввести свою електронну адресу, ім’я користувача та пароль. Також вам доведеться погодитися з умовами, поставивши відповідну позначку.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/sign-up-form.png" class="kg-image" alt="sign-up-form" width="600" height="400" loading="lazy"><figcaption>Форма реєстрації.</figcaption></figure><p><strong><strong>💡 </strong>Важливо<strong>:</strong></strong> після реєстрації потрібно підтвердити свою електронну адресу. Ви отримаєте електронний лист від Crowdin з активним посиланням, щоб перейти до свого профілю. Ви повинні побачити повідомлення про підтвердження про те, що адресу електронної пошти підтверджено.</p><p>Після реєстрації (або входу, якщо у вас вже є обліковий запис), ви побачите свій профіль Crowdin, де зможете керувати проєктами, командою, робочим процесом, активністю тощо.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/new-profile.png" class="kg-image" alt="new-profile" width="600" height="400" loading="lazy"><figcaption>Новий профіль на Crowdin.</figcaption></figure><p>🎉 Вітаємо! Тепер у вас є обліковий запис на Crowdin і ви готові налаштувати свій профіль.</p><!--kg-card-begin: html--><h3 id="як-налаштувати-профіль-на-crowdin">🔶 Як налаштувати профіль на Crowdin</h3><!--kg-card-end: html--><p>Щоб налаштувати свій профіль:</p><p>Натисніть на зображення профілю у верхньому правому куті та оберіть <code>Settings</code> зі спадного меню.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/settings-menu.png" class="kg-image" alt="settings-menu" width="600" height="400" loading="lazy"><figcaption>Налаштування профілю.</figcaption></figure><p>Ви побачите свій профіль та інформацію, яку можна налаштувати, а саме:</p><ul><li>зображення профілю;</li><li>повне ім’я, ім’я користувача та електронна адреса;</li><li>компанія та посада;</li><li>стать;</li><li>коротка автобіографія;</li><li>мова, часовий пояс та формат часу;</li><li>обрані мови;</li><li>тема (світла, темна або відповідно до місцевого часу);</li><li>приватність. За замовчуванням профіль є публічним. Встановіть цю опцію, якщо хочете зробити свій профіль приватним.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/black-profile-1.png" class="kg-image" alt="black-profile-1" width="600" height="400" loading="lazy"><figcaption>Account Settings &gt; Profile.</figcaption></figure><p>💡 <strong>Важливо<strong>:</strong></strong> з цієї сторінки також можна видалити свій обліковий запис. Внизу є червона кнопка та попередження про наслідки. Натискайте на цю кнопку лише тоді, коли абсолютно впевнені, що потрібно видалити всі проєкти та пов’язані з ними дані.</p><!--kg-card-begin: html--><h3 id="як-створити-проєкт-на-crowdin">🔶 Як створити проєкт на Crowdin</h3><!--kg-card-end: html--><p>Тепер ви знаєте, як налаштувати свій профіль, тому давайте створимо проєкт. Ви можете створити проєкт зі своєї сторінки профілю.</p><p>Якщо ви перебуваєте на іншій частині платформи, можете повернутися до профілю, натиснувши на своє зображення профілю у верхньому правому куті та обравши <code>Profile</code>, як показано нижче:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/go-back-to-profile.png" class="kg-image" alt="go-back-to-profile" width="600" height="400" loading="lazy"><figcaption>Сторінка профілю.</figcaption></figure><p>Щоб створити проєкт, натисніть на кнопку <code>Create Project</code> (зелену або сіру, вони еквівалентні).</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/create-a-profile.png" class="kg-image" alt="create-a-profile" width="600" height="400" loading="lazy"><figcaption>Зелена кнопка «Create Project».</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/create-a-profile-2-1.png" class="kg-image" alt="create-a-profile-2-1" width="600" height="400" loading="lazy"><figcaption>Сіра кнопка «Create Project».</figcaption></figure><p>Ви побачите сторінку, де потрібно заповнити основну інформацію про проєкт, а саме:</p><ul><li>назва;</li><li>адреса проєкту. Якщо адреса проєкту складається з декількох слів, відокремте їх дефісами (-);</li><li>налаштування приватності (публічний чи приватний);</li><li>вихідна мова;</li><li>цільові мови.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/create-a-project.png" class="kg-image" alt="create-a-project" width="600" height="400" loading="lazy"><figcaption>Створення проєкту.</figcaption></figure><p>💡 <strong>Важливо<strong>:</strong></strong> адреса проєкту має бути унікальною. Вона автоматично заповнюється, коли ви вводите назву проєкту. Якщо вона вже зайнята іншим користувачем, ви побачите червоне попередження і потрібно буде обрати іншу адресу.</p><p>Ви можете обрати будь-яку кількість цільових мов. Просто позначте їх прапорцями та вони будуть додані.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/target-languages.png" class="kg-image" alt="target-languages" width="600" height="400" loading="lazy"><figcaption>Цільові мови.</figcaption></figure><p>Ось що ви побачите при виборі цільових мов:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/target-languages-selected.png" class="kg-image" alt="target-languages-selected" width="600" height="400" loading="lazy"><figcaption>Вибір цільових мов.</figcaption></figure><p>У вас також є можливість автоматично заповнити вибір 30-тьма найпопулярнішими мовами:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/select-top-30-languages.png" class="kg-image" alt="select-top-30-languages" width="600" height="400" loading="lazy"><figcaption>Оберіть «Select Top 30».</figcaption></figure><p>💡 <strong>Важливо<strong>: </strong></strong>ви також можете створити власні мови або скопіювати вибір, зроблений для іншого проєкту.</p><p>Якщо ви оберете додати власну мову, ви побачите це:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/adding-a-custom-language.png" class="kg-image" alt="adding-a-custom-language" width="600" height="400" loading="lazy"><figcaption>Додавання власної мови.</figcaption></figure><p>Оскільки це абсолютно власна мова, вам потрібно вказати:</p><ul><li>назву мови;</li><li>чи це діалект іншої мови;</li><li>код для цієї мови на Crowdin;</li><li>трьохлітерний код;</li><li>код локалі;</li><li>чи текст буде записуватися зліва направо чи справа наліво;</li><li>форму множини.</li></ul><p>Після заповнення усієї інформації можна створити проєкт. Просто натисніть на кнопку <code>Create Project</code> внизу сторінки.</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2023/09/create-project.png" class="kg-image" alt="create-project" width="600" height="400" loading="lazy"></figure><p>💡 <strong>Важливо<strong>: </strong></strong>ви також можете натиснути на <code>Cancel</code> і повернутися до цієї сторінки, якщо хочете почати спочатку.</p><p>Тепер ви можете бачити свій проєкт. Звичайно, спочатку він буде порожнім, але не хвилюйтеся. Ми займемося цим вже зараз. 😉</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/project-dashboard.png" class="kg-image" alt="project-dashboard" width="600" height="400" loading="lazy"><figcaption>Новий проєкт.</figcaption></figure><!--kg-card-begin: html--><h3 id="огляд-проєкту">🔶 Огляд проєкту</h3><!--kg-card-end: html--><p>Швидко оглянемо проєкт.</p><p>Зверху ви бачите назву проєкту та його поточні налаштування приватності. Мій демопроєкт є приватним. На безоплатному обліковому записі Crowdin можна створити необмежену кількість публічних проєктів або один приватний проєкт.</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2023/09/project-dashboard-name.png" class="kg-image" alt="project-dashboard-name" width="600" height="400" loading="lazy"></figure><p>Поруч з назвою проєкту ви побачите дві кнопки: <code>Invite People</code> та <code>Buy Translations</code>.</p><p>Ви можете запросити членів команди приєднатися до проєкту (ми розглянемо, як це зробити), а також купити переклади від Crowdin.</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2023/09/project-dashboard-buttons.png" class="kg-image" alt="project-dashboard-buttons" width="600" height="400" loading="lazy"></figure><p>Ви також знайдете всі вкладки, які потрібні для доступу до інструментів.</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2023/09/project-dashboard-tabs.png" class="kg-image" alt="project-dashboard-tabs" width="600" height="400" loading="lazy"></figure><p>За замовчуванням ви знаходитесь на вкладці <code>Sources</code>, де можете побачити файли, які ви завантажили, та рядки проєкту.</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2023/09/project-dashboard-sources.png" class="kg-image" alt="project-dashboard-sources" width="600" height="400" loading="lazy"></figure><p><strong><strong>💡 </strong>Важливо<strong>:</strong></strong> ви також зможете створювати папки та додавати файли.</p><p>Розглянемо інші вкладки.</p><h4 id="-dashboard-"><strong>Вкладка «Dashboard»</strong></h4><p>Тут ви побачите список цільових мов проєкту.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/dashboard-target-languages.png" class="kg-image" alt="dashboard-target-languages" width="600" height="400" loading="lazy"><figcaption>Вкладка «Dashboard».</figcaption></figure><h4 id="-translations-"><strong>Вкладка «Translations»</strong></h4><p>Тут ви можете завантажити наявні переклади, скачати переклади як ZIP-файл, експортувати матеріал в обраному файлі та налаштувати доставку вмісту по повітрю.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/translations-tab.png" class="kg-image" alt="translations-tab" width="600" height="400" loading="lazy"><figcaption>Вкладка «Translations».</figcaption></figure><h4 id="-screenshots-"><strong>Вкладка «Screenshots»</strong></h4><p>Тут ви можете завантажити знімки екрану свого проєкту, щоб надати перекладачам більше контексту про рядки, які вони перекладають.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/screenshots-tab.png" class="kg-image" alt="screenshots-tab" width="600" height="400" loading="lazy"><figcaption>Вкладка «Screenshots».</figcaption></figure><h4 id="-tasks-"><strong>Вкладка «Tasks»</strong></h4><p>Тут ви можете створити та призначити завдання своїй команді.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/tasks-tab.png" class="kg-image" alt="tasks-tab" width="600" height="400" loading="lazy"><figcaption>Вкладка «Tasks».</figcaption></figure><h4 id="-members-"><strong>Вкладка «Members»</strong></h4><p>Тут ви можете побачити всіх членів проєкту з відповідними посадами, датами приєднання до проєкту та діями, які ви можете виконати щодо них.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/members-tab.png" class="kg-image" alt="members-tab" width="600" height="400" loading="lazy"><figcaption>Вкладка «Members».</figcaption></figure><h4 id="-integrations-"><strong>Вкладка «Integrations»</strong></h4><p>Тут ви можете додати інтеграції до свого проєкту та побачити всі поточні інтеграції.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/integrations-tab.png" class="kg-image" alt="integrations-tab" width="600" height="400" loading="lazy"><figcaption>Вкладка «Integrations».</figcaption></figure><h4 id="-reports-"><strong>Вкладка «Reports»</strong></h4><p>Тут ви можете переглядати та генерувати звіти про діяльність свого проєкту, включно з перекладом та редагуванням.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/reports-tab.png" class="kg-image" alt="reports-tab" width="600" height="400" loading="lazy"><figcaption>Вкладка «Reports».</figcaption></figure><h4 id="-activity-"><strong>Вкладка «Activity»</strong></h4><p>Тут ви можете побачити активність проєкту.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/activity-tab.png" class="kg-image" alt="activity-tab" width="600" height="400" loading="lazy"><figcaption>Вкладка «Activity».</figcaption></figure><h4 id="-discussions-"><strong>Вкладка «Discussions»</strong></h4><p>Тут ви можете відкривати теми для обговорення проєкту зі своєю командою.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/discussions-tab.png" class="kg-image" alt="discussions-tab" width="600" height="400" loading="lazy"><figcaption>Вкладка «Discussions».</figcaption></figure><h4 id="-tools-"><strong>Вкладка «Tools»</strong></h4><p>Тут ви знайдете більше інформації про CLI, API, вебхуки та Crowdin in-context (інструмент для перекладу вебзастосунків із переглядом у реальному часі).</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/tools-tab.png" class="kg-image" alt="tools-tab" width="600" height="400" loading="lazy"><figcaption>Вкладка «Tools».</figcaption></figure><h4 id="-settings-"><strong>Вкладка «Settings»</strong></h4><p>Тут ви можете змінити налаштування проєкту.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/settings-tab.png" class="kg-image" alt="settings-tab" width="600" height="400" loading="lazy"><figcaption>Вкладка «Settings».</figcaption></figure><p>Говорячи про налаштування проєкту, давайте зануримось в налаштування, які ви можете змінити для свого проєкту.</p><!--kg-card-begin: html--><h3 id="як-змінити-налаштування-проєкту-на-crowdin">🔶 Як змінити налаштування проєкту на Crowdin</h3><!--kg-card-end: html--><p>Ви знайдете різні категорії налаштувань проєкту.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/settings-tab-1.png" class="kg-image" alt="settings-tab-1" width="600" height="400" loading="lazy"><figcaption>Вкладка «Settings».</figcaption></figure><h4 id="general"><strong>General</strong></h4><p>До загальних налаштувань належать:</p><ul><li>назва;</li><li>публічний опис;</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/general-settings-1.png" class="kg-image" alt="general-settings-1" width="600" height="400" loading="lazy"><figcaption>Загальні налаштування.</figcaption></figure><ul><li>брендинг, включно з власним доменом та логотипом;</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/branding-1.png" class="kg-image" alt="branding-1" width="600" height="400" loading="lazy"><figcaption>Налаштування брендингу.</figcaption></figure><ul><li>значки для відтворення прогресу процесу локалізації;</li><li>можливість видалити проєкт.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/Screenshot-2023-09-18-at-8.25.48-PM.png" class="kg-image" alt="Screenshot-2023-09-18-at-8.25.48-PM" width="600" height="400" loading="lazy"><figcaption>Значки та видалення проєкту.</figcaption></figure><h4 id="privacy-collaboration"><strong>Privacy &amp; collaboration</strong></h4><p>У цій категорії ви знайдете налаштування для керування приватністю та сповіщеннями проєкту.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/privacy-and-collaboration.png" class="kg-image" alt="privacy-and-collaboration" width="600" height="400" loading="lazy"><figcaption>Категорія «Privacy &amp; collaboration».</figcaption></figure><p>Ви можете керувати видимістю проєкту в налаштуваннях <code>Project visibility</code>. Проєкт можна налаштувати як публічний або приватний.</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2023/09/project-visibility.png" class="kg-image" alt="project-visibility" width="600" height="400" loading="lazy"></figure><p>Далі ми маємо налаштування приватності. Ви можете прочитати короткий опис кожного з цих налаштувань під відповідним пунктом. Щоб увімкнути налаштування, поставте галочку біля нього.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/privacy-settings.png" class="kg-image" alt="privacy-settings" width="600" height="400" loading="lazy"><figcaption>Налаштування приватності за замовчуванням. Їх можна налаштувати відповідно до ваших потреб.</figcaption></figure><p>Зрештою, можна налаштувати сповіщення для перекладачів, менеджерів проєкту та розробників. Просто відмітьте сповіщення, які хочете увімкнути.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/Screenshot-2023-09-18-at-8.29.36-PM.png" class="kg-image" alt="Screenshot-2023-09-18-at-8.29.36-PM" width="600" height="400" loading="lazy"><figcaption>Налаштування сповіщень.</figcaption></figure><h4 id="languages"><strong>Languages</strong></h4><p>У категорії мов ви можете змінити вихідну та цільові мови свого проєкту.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/languages-settings.png" class="kg-image" alt="languages-settings" width="600" height="400" loading="lazy"><figcaption>Категорія «Languages».</figcaption></figure><h4 id="qa-checks"><strong>QA Checks</strong></h4><p>Я ж обіцяла, що це буде важливо? Так ось. У категорії перевірки якості (QA) ви можете увімкнути перевірку якості (QA) та вибрати, які саме перевірки вас цікавлять.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/qa-checks.png" class="kg-image" alt="qa-checks" width="600" height="400" loading="lazy"><figcaption>Категорія «QA Checks».</figcaption></figure><p>Crowdin <a href="https://support.crowdin.com/qa-checks/">зазначає</a>:</p><blockquote>Основна мета перевірок якості (QA) — допомогти ефективно вирішити мовні аспекти у перекладах та забезпечити їхнє форматування так само, як у вихідних рядках, щоб вони ідеально підходили для інтерфейсу користувача. До деяких типових проблем перевірки якості (QA) належать пропущені коми, зайві пробіли або орфографічні помилки.<br><br>Всі питання перевірки якості (QA) рекомендовано переглянути і вирішити до побудови проєкту та скачування перекладу.</blockquote><p>До перевірок якості (QA) належать:</p><ul><li>порожні переклади;</li><li>проблеми з довжиною;</li><li>неспівпадіння тегів;</li><li>неспівпадіння пробілів;</li><li>неспівпадіння змінних;</li><li>неспівпадіння пунктуації;</li><li>неспівпадіння регістру символів;</li><li>неспівпадіння спецсимволів;</li><li>неправильний переклад, визначений учасниками проєкту;</li><li>орфографічні помилки;</li><li>помилки синтаксису ICU;</li><li>термінологія не відповідає глосарію проєкту;</li><li>дубльований переклад;</li><li>синтаксис Android.</li></ul><p>Після того, як ви вибрали перевірки якості (QA), які хочете увімкнути, просто натисніть на кнопку <code>Save</code>, і зміни будуть збережені.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/save-qa-checks.png" class="kg-image" alt="save-qa-checks" width="600" height="400" loading="lazy"><figcaption>Кнопка «Save».</figcaption></figure><h4 id="translation-memories"><strong>Translation Memories</strong></h4><p>Ви також знайдете категорію налаштувань пам’яті перекладів.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/translation-memories.png" class="kg-image" alt="translation-memories" width="600" height="400" loading="lazy"><figcaption>Категорія «Translation Memories».</figcaption></figure><p>Ми поговоримо про пам’ять перекладів більш детально пізніше, але знайте, що це місце, де ви можете змінити налаштування цієї функції.</p><h4 id="glossaries"><strong>Glossaries</strong></h4><p>Ви можете керувати своїми глосаріями в категорії <code>Glossaries</code>.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/glossaries.png" class="kg-image" alt="glossaries" width="600" height="400" loading="lazy"><figcaption>Категорія «Glossaries».</figcaption></figure><p>Ви можете перевірити призначені глосарії та натиснути на посилання, щоб переглянути записи кожного глосарію. Вгорі ви також знайдете посилання на <a href="https://crowdin.com/store/apps/glossary-translate-app">застосунок для перекладу глосарію</a>.</p><h4 id="import"><strong>Import</strong></h4><p>На Crowdin ви можете імпортувати вихідні рядки та змінити налаштування (наприклад, обробку дубльованих рядків та підрахунок слів).</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/import-category.png" class="kg-image" alt="import-category" width="600" height="400" loading="lazy"><figcaption>Налаштування імпорту.</figcaption></figure><h4 id="export"><strong>Export</strong></h4><p>Категорія експорту має корисні налаштування для експорту перекладених файлів.</p><p>Ви можете:</p><ul><li>зберегти інформацію контексту у файлах;</li><li>пропустити неперекладені рядки;</li><li>пропустити неперекладені файли;</li><li>експортувати лише затверджені переклади;</li><li>автоматично заповнити регіональні діалекти.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/export.png" class="kg-image" alt="export" width="600" height="400" loading="lazy"><figcaption>Налаштування експорту.</figcaption></figure><h4 id="labels"><strong>Labels</strong></h4><p>Мітки можуть бути корисними для надання контексту рядкам та їх розподілу за темами. Вони можуть бути корисними, якщо ви хочете знайти певні рядки.</p><p>Мітки можна додати у цій категорії налаштувань:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/labels.png" class="kg-image" alt="labels" width="600" height="400" loading="lazy"><figcaption>Налаштування міток.</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/creating-a-label.png" class="kg-image" alt="creating-a-label" width="600" height="400" loading="lazy"><figcaption>Створення нової мітки.</figcaption></figure><h4 id="parser-configuration"><strong>Parser configuration</strong></h4><p>За допомогою налаштувань парсера ви можете встановити, як Crowdin імпортує та експортує обрані типи файлів.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/parser-configuration.png" class="kg-image" alt="parser-configuration" width="600" height="400" loading="lazy"><figcaption>Категорія «Parser Configuration».</figcaption></figure><h4 id="file-processorrs"><strong>File Processorrs</strong></h4><p>Остання група в налаштуваннях — це обробники файлів, які дозволяють налаштувати спосіб обробки підтримуваних форматів файлів.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/file-processors.png" class="kg-image" alt="file-processors" width="600" height="400" loading="lazy"><figcaption>Категорія «File Processors».</figcaption></figure><!--kg-card-begin: html--><h3 id="як-видалити-проєкт-на-crowdin">🔶 Як видалити проєкт на Crowdin</h3><!--kg-card-end: html--><p>Якщо вам потрібно видалити проєкт, перейдіть до вкладки <code>Settings</code>, а потім до вкладки <code>General</code>.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/settings-tab-1.png" class="kg-image" alt="settings-tab-1" width="600" height="400" loading="lazy"><figcaption>Settings &gt; General.</figcaption></figure><p>Внизу ви знайдете червону кнопку <code>Delete Project</code>.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/delete-a-project-2.png" class="kg-image" alt="delete-a-project-2" width="600" height="400" loading="lazy"><figcaption>Видалення проєкту.</figcaption></figure><!--kg-card-begin: html--><h3 id="як-завантажити-файли-до-проєкту-на-crowdin">🔶 Як завантажити файли до проєкту на Crowdin</h3><!--kg-card-end: html--><p>Тепер ви знаєте, як змінити налаштування проєкту, тому давайте додамо файл до проєкту. Ви можете завантажити файли до проєкту вручну або автоматизувати цей процес завдяки інтеграціям.</p><h3 id="--17"><strong>Як завантажити файли вручну</strong></h3><p>Завантажимо звичайний PDF-файл з текстом та зображеннями.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/demo-pdf-document-1.png" class="kg-image" alt="demo-pdf-document-1" width="600" height="400" loading="lazy"><figcaption>Демофайл PDF. Перекладемо його на Crowdin.</figcaption></figure><p>Щоб завантажити файли:</p><ol><li>Перейдіть до проєкту.</li><li>Перейдіть до вкладки <code>Sources</code>.</li><li>Натисніть на зелену кнопку <code>Add File</code> або сіру кнопку <code>Upload Files</code> (див. знімок екрана нижче).</li><li>Виберіть файл, який потрібно завантажити з файлової системи.</li></ol><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/upload-files-sources.png" class="kg-image" alt="upload-files-sources" width="600" height="400" loading="lazy"><figcaption>Завантаження файлів.</figcaption></figure><p>💡 <strong>Важливо<strong>:</strong></strong> щоб дізнатись, як працює Crowdin, ви можете додати зразки від Crowdin, натиснувши на <code>Use Samples</code>.</p><p>Після завантаження файлу ви побачите його в списку:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/upload-files.png" class="kg-image" alt="upload-files" width="600" height="400" loading="lazy"><figcaption>Завантаження файлу.</figcaption></figure><p>Можливо, вам доведеться почекати кілька секунд, перш ніж файл буде оброблено. Потім ви побачите загальну кількість рядків у своєму файлі.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/upload-finished.png" class="kg-image" alt="upload-finished" width="600" height="400" loading="lazy"><figcaption>Завантаження завершено.</figcaption></figure><p>💡 <strong>Важливо<strong>: </strong></strong>ви можете перетягнути свій файл в область файлів у вкладці <code>Sources</code>, і ваш файл буде автоматично завантажено.</p><p>Якщо ви натиснете на три маленькі крапки праворуч, ви побачите більше опцій для цього файлу, включно з:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/uploaded-file-options.png" class="kg-image" alt="uploaded-file-options" width="600" height="400" loading="lazy"><figcaption>Додаткові опції.</figcaption></figure><ul><li>Settings (налаштування);</li><li>Progress (прогрес);</li><li>View strings (перегляд рядків);</li><li>Open in Editor (відкрити в редакторі);</li><li>Download source (скачати вихідний файл);</li><li>Rename (перейменувати);</li><li>Delete (видалити).</li></ul><h3 id="--18"><strong>Як завантажити файли автоматично</strong></h3><p>Одна з ключових особливостей Crowdin полягає в тому, наскільки легко підключати його до інших служб через інтеграції, щоб автоматично завантажувати файли та синхронізувати переклади.</p><p>Наприклад, у freeCodeCamp встановлено інтеграцію з GitHub, тому ми можемо автоматично синхронізувати файли проєкту, коли додаємо нові рядки, які потрібно перекласти на Crowdin.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/github-integration-2.png" class="kg-image" alt="github-integration-2" width="600" height="400" loading="lazy"><figcaption>Інтеграція GitHub.</figcaption></figure><p>Ви можете знайти сотні інтеграцій у <a href="https://store.crowdin.com/">Crowdin Store</a> для підключення свого проєкту до зовнішніх служб.</p><p>Crowdin також має прикладний програмний інтерфейс (API) для розробників.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/crowdin-api.png" class="kg-image" alt="crowdin-api" width="600" height="400" loading="lazy"><figcaption><a href="https://developer.crowdin.com/api/v2/">Документація</a> Crowdin API.</figcaption></figure><p>Команда Crowdin <a href="https://developer.crowdin.com/api/v2/">описує</a> його як:</p><blockquote>Повнофункціональний REST API, який допомагає інтегрувати локалізацію у процес розробки. Кінцеві точки, які ми використовуємо, дозволяють легко робити виклики для отримання інформації та виконання необхідних дій.</blockquote><p>За допомогою цього API ви можете:</p><ul><li>створювати проєкти для перекладу;</li><li>додавати та оновлювати файли;</li><li>скачувати переклади та багато іншого.</li></ul><p>Це чудовий спосіб автоматизувати процес локалізації. Дізнайтеся більше про Crowdin API в <a href="https://developer.crowdin.com/api/v2/">офіційній документації</a>.</p><p>І третя опція автоматичного завантаження файлів — це використання інтерфейсу командного рядка (CLI).</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/crowdin-cli-1.png" class="kg-image" alt="crowdin-cli-1" width="600" height="400" loading="lazy"><figcaption>Інтерфейс командного рядка Crowdin (CLI).</figcaption></figure><p>З цим інтерфейсом ви можете:</p><ul><li>автоматизувати процес завантаження файлів;</li><li>автоматично скачувати переклади та зберігати їх у відповідних місцях;</li><li>завантажувати наявні переклади;</li><li>інтегрувати Crowdin з іншими інструментами (наприклад, Git). </li></ul><p>Щоб дізнатися більше про Crowdin CLI, перегляньте <a href="https://www.youtube.com/watch?v=0duN4khpWjM">цю інструкцію</a>, створену командою Crowdin.</p><p>Тепер ви знаєте, як завантажувати файли на Crowdin вручну та автоматично, тому розберемось, як розпочати перекладати матеріал.</p><!--kg-card-begin: html--><h3 id="як-розпочати-перекладати">🔶 Як розпочати перекладати</h3><!--kg-card-end: html--><p>Коли файл завантажено, час розпочати переклад. Ви можете перекласти його власноруч або попросити команду.</p><p>💡 <strong>Важливо:</strong> ви можете призначити конкретні файли перекладачам та редакторам за допомогою функції <code>Tasks</code>.</p><p>Припустимо, що ви перекладаєте матеріал самостійно.</p><p>Для початку вам потрібно перейти на вкладку <code>Dashboard</code> та вибрати мову, на яку ви будете перекладати матеріал, зі списку цільових мов, які ви вибрали при створенні проєкту.</p><p>Для цього прикладу я виберу іспанську мову.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/list-of-target-languages.png" class="kg-image" alt="list-of-target-languages" width="600" height="400" loading="lazy"><figcaption>Вкладка «Dashboard».</figcaption></figure><p>Ви побачите всі файли свого проєкту для конкретної цільової мови.</p><p>На сторінці мови ви можете перевіряти прогрес перекладу та редагування кожного файлу, перекладати й редагувати, а також завантажувати переклад та вихідні файли.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/project-files-in-spanish.png" class="kg-image" alt="project-files-in-spanish" width="600" height="400" loading="lazy"><figcaption>Список файлів, які потрібно перекласти іспанською мовою.</figcaption></figure><p>Ви можете натиснути на назву файлу, який хочете перекласти. Ви перейдете на редактор перекладу і побачите файл у попередньому перегляді.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/translation-editor.png" class="kg-image" alt="translation-editor" width="600" height="400" loading="lazy"><figcaption>Редактор перекладу.</figcaption></figure><p>Під час завантаження файлу Crowdin розділяє його на рядки. Цей процес може вимагати певних перетворень формату залежно від типу файлу, який ви завантажуєте.</p><p>Відповідно до <a href="https://support.crowdin.com/supported-formats/#converted-file-formats">документації Crowdin</a>:</p><blockquote>При імпорті деякі формати файлів автоматично конвертуються в інші формати для подальшого аналізу та обробки.<br><br>У таблиці нижче подано список початкових форматів файлів та формати файлів, у які вони конвертуються.</blockquote><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/file-formats-table.png" class="kg-image" alt="Image" width="600" height="400" loading="lazy"><figcaption>Конвертація форматів файлів. Зображення з <a href="https://support.crowdin.com/supported-formats/#converted-file-formats">документації Crowdin</a>.&nbsp;</figcaption></figure><p>Ми можемо бачити, що PDF-файли конвертуються у DOCX-файли — тип файлів, який зазвичай створюють у текстовому редакторі.</p><p>Для експорту файлів <a href="https://support.crowdin.com/supported-formats/#converted-file-formats">Crowdin також зазначає</a>:</p><blockquote>За замовчуванням ми експортуємо переклади в тому ж форматі, що й вихідні файли. Наприклад, якщо ви завантажуєте XML-файл на Crowdin, ви отримаєте експортований XML-файл.</blockquote><!--kg-card-begin: html--><h3 id="як-користуватися-редактором-перекладу">🔶 Як користуватися редактором перекладу</h3><!--kg-card-end: html--><p>Це макет редактора перекладу, який ви побачите за замовчуванням, коли натиснете на файл. Такий режим називають «Comfortable».</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/translation-editor.png" class="kg-image" alt="translation-editor" width="600" height="400" loading="lazy"><figcaption>Редактор перекладу.</figcaption></figure><p>Він має чотири основні секції:</p><ul><li>ліва бокова панель (позначена фіолетовим);</li><li>верхня середня область (позначена жовтим);</li><li>нижня середня область (позначена оранжевим);</li><li>права бокова панель (позначена блакитним).</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/translation-editor-sections.png" class="kg-image" alt="translation-editor-sections" width="600" height="400" loading="lazy"><figcaption>Редактор перекладу в режимі «Comfortable».</figcaption></figure><p>Розглянемо кожну секцію.</p><h3 id="--19"><strong>Ліва бокова панель</strong></h3><ul><li>виділена фіолетовим на малюнку вище;</li><li>показує всі рядки у документі та попередній перегляд вихідного файлу;</li><li>у верхній частині ви знайдете корисні інструменти, серед яких (зліва направо): пошук рядків у файлі, зміна вигляду рядків, виділення перекладених та неперекладених рядків, показ попереднього перегляду перекладу, перемикач масштабу та додавання рядка.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/toolbar-options.png" class="kg-image" alt="toolbar-options" width="600" height="400" loading="lazy"><figcaption>Панель інструментів у верхній частині лівої бокової панелі.</figcaption></figure><p>Якщо натиснути на першу кнопку після поля пошуку файлів, ви можете змінити вигляд рядків: так ви будете бачити список усіх рядків, а не попередній перегляд файлу.</p><p>Тепер ви побачите список усіх рядків:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/list-of-all-strings.png" class="kg-image" alt="list-of-all-strings" width="600" height="400" loading="lazy"><figcaption>Основний вигляд списку.</figcaption></figure><p>Ви можете знову натиснути на цю кнопку, щоб повернутися до попереднього режиму, де ви можете бачити рядки в оригінальному контексті та макеті вихідного файлу:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/translation-editor.png" class="kg-image" alt="translation-editor" width="600" height="400" loading="lazy"><figcaption>Режим перекладу «Що бачите, те й отримуєте».</figcaption></figure><p>Як бачите, рядки виділені різними кольорами:</p><ul><li>червоний означає, що рядок не перекладений;</li><li>жовтий означає, що рядок частково перекладений;</li><li>блакитний означає, що рядок перекладений;</li><li>сірий означає, що рядок прихований і видимий тільки для менеджерів проєкту та редакторів.</li></ul><p>Коли ви почнете редагування рядків, ви також побачите:</p><ul><li>жовту галочку, якщо рядок частково затверджений (якщо деякі форми множини не затверджені);</li><li>зелену галочку, якщо рядок затверджений.</li></ul><p>Ви також можете побачити іконку коментаря, якщо хтось залишив коментар до рядка або позначив коментар як проблему.</p><h3 id="--20"><strong>Верхня середня область</strong></h3><ul><li>виділена жовтим на малюнку нижче;</li><li>це місце, де потрібно перекладати рядок. Вам потрібно лише вибрати його з лівої бокової панелі, і він з’явиться в цій області.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/translation-editor-sections.png" class="kg-image" alt="translation-editor-sections" width="600" height="400" loading="lazy"><figcaption>Редактор перекладу в режимі «Comfortable».</figcaption></figure><p>Натиснемо на рядок і подивимося, що станеться:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/selecting-a-strings.png" class="kg-image" alt="selecting-a-strings" width="600" height="400" loading="lazy"><figcaption>Виберіть рядок.</figcaption></figure><p>Чудово! Рядок тепер вибраний як <code>Source String</code>, і ми можемо почати його перекладати:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/writing-translations.png" class="kg-image" alt="writing-translations" width="600" height="400" loading="lazy"><figcaption>Перекладіть рядок.</figcaption></figure><p>Три інструменти, які ви можете побачити у нижній частині (зліва направо):</p><ul><li><strong><strong>Copy Source:</strong> </strong>щоб зберегти початкову структуру рядка;</li><li><strong><strong>Clear:</strong></strong> щоб швидко видалити переклад;</li><li><strong><strong>Text Selection Mode:</strong></strong> щоб скопіювати частину перекладу з пам’яті перекладів (TM) або машинних перекладів (MT).</li></ul><p>Якщо натиснути на три крапки вгорі, ви побачите додаткові опції для рядка, зокрема:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/strings-translation-options.png" class="kg-image" alt="strings-translation-options" width="600" height="400" loading="lazy"><figcaption>Опції перекладу рядка.</figcaption></figure><ul><li>Hide String (приховати рядок);</li><li>Copy String URL (скопіювати посилання на рядок);</li><li>Copy Source Skeleton (скопіювати вихідний скелет);</li><li>Translation History (історія перекладів);</li><li>View String in Context (переглянути рядок у контексті).</li></ul><p>Коли ви пишете свій переклад, ви побачите його в попередньому перегляді. Рядок буде виділено жовтим, якщо його вибрано.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/preview-with-partially-translated-string.png" class="kg-image" alt="preview-with-partially-translated-string" width="600" height="400" loading="lazy"><figcaption>Переклад у попередньому перегляді (бокова панель). Перекладений рядок іспанською у попередньому перегляді.</figcaption></figure><p>Щоб зберегти свій переклад, натисніть на зелену кнопку <code>Save</code>.</p><p>Після цього ви можете перейти до наступного рядка, а раніше перекладений рядок буде виділений іншим кольором (блакитним).</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/translated-saved-string.png" class="kg-image" alt="translated-saved-string" width="600" height="400" loading="lazy"><figcaption>Збережений переклад.</figcaption></figure><p>Щоб повернутися до попереднього рядка, просто натисніть на нього або натисніть на ліву стрілку поруч із <code>Source String</code>.</p><p>Якщо повернутись до рядка, ви побачите щось нове у нижній середній області.</p><p>Давайте поговоримо про нижню середню область.</p><h3 id="--21"><strong>Нижня середня область</strong></h3><ul><li>виділена оранжевим на малюнку нижче;</li><li>ця секція містить переклади, зроблені іншими перекладачами (якщо такі є), пропозиції з пам’яті перекладів (TM), пропозиції машинного перекладу (MT) та переклади іншими мовами.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/translation-editor-sections.png" class="kg-image" alt="translation-editor-sections" width="600" height="400" loading="lazy"><figcaption>Редактор перекладу в режимі «Comfortable».</figcaption></figure><p><strong><strong>💡 </strong>Важливо:</strong> якщо натиснути на запропонований переклад, то він автоматично з’явиться в полі введення.</p><p>Це поточний стан нашого проєкту. У нас є перекладений рядок, і ви можете побачити переклад іспанською у нижній середній секції (оранжева рамка нижче).</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/back-to-translated-string.png" class="kg-image" alt="back-to-translated-string" width="600" height="400" loading="lazy"><figcaption>Нижня середня область.</figcaption></figure><p>Для кожного перекладу ви будете бачити:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/approve-string-translation.png" class="kg-image" alt="approve-string-translation" width="600" height="400" loading="lazy"><figcaption>Переклад.</figcaption></figure><ul><li>переклад цільовою мовою;</li><li>користувача Crowdin, який запропонував переклад;</li><li>коли переклад було збережено;</li><li>поточний рейтинг перекладу (інші члени проєкту можуть піднімати або знижувати рейтинг);</li><li>кнопка з галочкою для схвалення перекладу (для редакторів);</li><li>кнопка зі смітником для видалення перекладу.</li></ul><p>Якщо ви власник проєкту або маєте право на редагування, ви можете самостійно затвердити переклад рядка. Однак бажано, щоб хтось інший перевірив ваш переклад, щоб уникнути поширених помилок.</p><p>Щоб затвердити переклад, просто натисніть на галочку біля нього.</p><p>Тепер ви побачите затверджений рядок, виділений зеленим у попередньому перегляді:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/approved-string.png" class="kg-image" alt="approved-string" width="600" height="400" loading="lazy"><figcaption>Затверджений рядок, виділений зеленим.</figcaption></figure><p>Перекладений рядок тепер покаже, хто і коли затвердив його:</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2023/09/back-to-approved-string-1.png" class="kg-image" alt="back-to-approved-string-1" width="600" height="400" loading="lazy"></figure><h3 id="--22"><strong>Права бокова панель</strong></h3><ul><li>виділена блакитним на малюнку нижче;</li><li>це місце, де ви можете писати коментарі, користуватись TM, шукати терміни у своєму глосарії, додавати нові застосунки та знаходити застосунки, які ви додали через <a href="https://crowdin.com/store/apps">Crowdin Store</a>.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/translation-editor-sections.png" class="kg-image" alt="translation-editor-sections" width="600" height="400" loading="lazy"><figcaption>Редактор перекладу в режимі «Comfortable».</figcaption></figure><p>Щоб написати коментар, просто перейдіть до коментарів на боковій панелі та напишіть свій коментар у текстовому полі внизу. Ви можете позначити коментар як проблему, якщо потрібно.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/writing-a-comment-1.png" class="kg-image" alt="writing-a-comment-1" width="600" height="400" loading="lazy"><figcaption>Написання коментаря.</figcaption></figure><p>💡 <strong>Важливо<strong>:</strong></strong> коментар потрібно писати вихідною мовою проєкту, щоб інші члени команди та менеджери проєкту могли зрозуміти його.</p><p>Якщо натиснути на другу кнопку на цій боковій панелі, ви зможете користуватись пам’яттю перекладів серед попередніх перекладів.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/translation-memory.png" class="kg-image" alt="translation-memory" width="600" height="400" loading="lazy"><figcaption>Пошук у пам’яті перекладів (TM).</figcaption></figure><p>За допомогою третьої кнопки ви можете шукати терміни, пов’язані з вибраним рядком, у глосарії.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/glossary.png" class="kg-image" alt="glossary" width="600" height="400" loading="lazy"><figcaption>Пошук термінів.</figcaption></figure><p><a href="https://support.crowdin.com/online-editor/#section-4">Crowdin</a> стверджує, що цей пошук чудовий, оскільки:</p><blockquote>Якщо конкретний термін відсутній у глосарії проєкту, система покаже пояснення з вікіпедії.</blockquote><p>Це може бути дуже корисно, щоб зрозуміти контекст терміну під час перекладу матеріалу.</p><p>Остання ккнопка — це значок плюс, який направить вас до Crowdin Store, де ви зможете знайти застосунки та інтеграції для свого проєкту й отримати доступ до них на боковій панелі.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/add-apps.png" class="kg-image" alt="add-apps" width="600" height="400" loading="lazy"><figcaption>Перейти до Crowdin Store.</figcaption></figure><!--kg-card-begin: html--><h3 id="режими-редактора-перекладу">🔶 Режими редактора перекладу</h3><!--kg-card-end: html--><p>Редактор перекладу має три режими, щоб налаштувати макет відповідно до ваших потреб: Comfortable, Side-by-Side та Multilingual.</p><h3 id="-comfortable-"><strong>Режим «Comfortable»</strong></h3><ul><li>переважно використовується для перекладів;</li><li>має чотири основні секції, які ми бачили у попередньому розділі.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/comfortable-mode.png" class="kg-image" alt="comfortable-mode" width="600" height="400" loading="lazy"><figcaption>Макет у режимі «Comfortable».</figcaption></figure><h3 id="--23"><strong>Як змінити режим</strong></h3><p>Щоб змінити режим, потрібно натиснути на іконку меню у верхньому лівому куті редактора перекладу:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/change-mode-1.png" class="kg-image" alt="change-mode-1" width="600" height="400" loading="lazy"><figcaption>Натисніть на іконку меню.</figcaption></figure><p>Потім натисніть на <code>View</code> та виберіть бажаний режим:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/view-change-mode.png" class="kg-image" alt="view-change-mode" width="600" height="400" loading="lazy"><figcaption>Змініть режим редактора.</figcaption></figure><h3 id="-side-by-side-"><strong>Режим «Side-by-Side»</strong></h3><ul><li>переважно використовується менеджерами та редакторами для затвердження найкращих перекладів, а також перекладачами для голосування за переклади.</li></ul><p>Перший раз, коли ви переключитеся на цей режим, ви побачите декілька корисних порад:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/tip-1.png" class="kg-image" alt="tip-1" width="600" height="400" loading="lazy"><figcaption>Оцінюйте або робіть переклади.</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/tip-2.png" class="kg-image" alt="tip-2" width="600" height="400" loading="lazy"><figcaption>Затверджуйте декілька перекладів одночасно.</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/tip-3.png" class="kg-image" alt="tip-3" width="600" height="400" loading="lazy"><figcaption>Перейдіть у режим «Comfortable», щоб робити нові переклади.</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/tip-4.png" class="kg-image" alt="tip-4" width="600" height="400" loading="lazy"><figcaption>Це все, друзі!</figcaption></figure><p>Ось що ви побачите, коли перейдете до режиму «Side-by-Side». Будь ласка, витратьте трохи часу, щоб детально ознайомитися з цими змінами:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/side-by-side-mode.png" class="kg-image" alt="side-by-side-mode" width="600" height="400" loading="lazy"><figcaption>Режим «Side-by-Side».</figcaption></figure><p>Щоб побачити всі можливі стани рядків у режимі «Side-by-Side», повернімося до режиму «Comfortable», щоб перекласти та зберегти ще один рядок (але цього разу ми не будемо затверджувати його).</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/string-translation-2.png" class="kg-image" alt="string-translation-2" width="600" height="400" loading="lazy"><figcaption>Перекладемо ще один рядок.</figcaption></figure><p>У режимі «Side-by-Side» у нас тепер є перекладений рядок, затверджений рядок і рядки, які ще потрібно перекласти.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/side-by-side-with-multiple-strings.png" class="kg-image" alt="side-by-side-with-multiple-strings" width="600" height="400" loading="lazy"><figcaption>Режим «Side-by-Side».</figcaption></figure><p>Почнемо з короткої екскурсії. У вас є чотири області, розмір яких можна змінювати відповідно до ваших потреб:</p><ul><li>у верхньому лівому куті ми знайдемо список рядків. Ви можете вибрати декілька рядків для масових операцій (наприклад, затвердження декількох перекладів одним натисканням);</li><li>у нижньому лівому куті ми знайдемо попередній перегляд вихідного файлу;</li><li>у верхньому правому куті ми знайдемо деталі рядка;</li><li>у нижньому правому куті ми знайдемо поточні переклади та пропозиції. Це дуже схоже на те, що ви бачите у режимі «Comfortable».</li></ul><h4 id="--24"><strong>Панель інструментів</strong></h4><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/toolbar.png" class="kg-image" alt="toolbar" width="600" height="400" loading="lazy"><figcaption>Панель інструментів.</figcaption></figure><p>У верхній частині списку рядків ви побачите декілька інструментів, зокрема (зліва направо):</p><ul><li>пошук рядка;</li><li>зміна критеріїв сортування;</li><li>довжина рядка в оригіналі та перекладі;</li><li>кнопка збереження;</li><li>кнопка скасування;</li><li>скопіювати вихідний рядок;</li><li>затвердити рядок;</li><li>додати рядок;</li><li>редагувати рядок;</li><li>більше опцій.</li></ul><p>Якщо відкрити меню «Більше опцій», натиснувши на три крапки, ви побачите більше корисних опцій для вибраних рядків.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/more-options-2.png" class="kg-image" alt="more-options-2" width="600" height="400" loading="lazy"><figcaption>Більше опцій.</figcaption></figure><h4 id="--25"><strong>Як відсортувати рядки</strong></h4><p>Ви помітите, що за замовчуванням рядки відсортовано за їхнім станом.</p><p><strong><strong>💡 </strong>Важливо<strong>:</strong></strong> неперекладені рядки з’являються першими в списку, тому ви не побачите рядки у порядку їхньої появи у вихідному файлі.</p><p>Ви можете змінити критерії сортування, натиснувши на іконку фільтра поруч із полем пошуку.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/filtering-strings.png" class="kg-image" alt="filtering-strings" width="600" height="400" loading="lazy"><figcaption>Сортування рядків.</figcaption></figure><p>У цьому режимі ви також побачите різні візуальні позначення стану кожного рядка.</p><p>Тут ми бачимо:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/types-of-strings.png" class="kg-image" alt="types-of-strings" width="600" height="400" loading="lazy"><figcaption>Стан рядка.</figcaption></figure><ul><li>неперекладений рядок, виділений червоним;</li><li>перекладений рядок, виділений блакитним;</li><li>затверджений рядок із зеленою галочкою;</li><li>прихований рядок, виділений сірим.</li></ul><h3 id="-multilingual-"><strong>Режим «Multilingual»</strong></h3><p> Тепер перейдемо до режиму «Multilingual». Цей режим переважно використовується перекладачами та редакторами для роботи з кількома мовами одночасно.</p><p>💡 <strong>Важливо<strong>: </strong></strong>ви можете працювати одночасно з максимум десятьма мовами.</p><p>Щоб перейти до цього режиму, натисніть на іконку головного меню у верхній частині. Потім оберіть <code>View</code> і виберіть <code>Multilingual</code>.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/multilingual-view.png" class="kg-image" alt="multilingual-view" width="600" height="400" loading="lazy"><figcaption>Перейдіть до режиму «Multilingual».</figcaption></figure><p>Якщо ви вибрали режим «Multilingual», вам потрібно буде вибрати мови, з якими плануєте працювати.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/languages.png" class="kg-image" alt="languages" width="600" height="400" loading="lazy"><figcaption>Мови для режиму «Multilingual».</figcaption></figure><p>Давайте виберемо іспанську та японську, щоб побачити, як працює цей режим. Натисніть на них, а потім натисніть на кнопку <code>Apply</code>.</p><p>Ви повинні побачити наступне:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/multilingual-mode.png" class="kg-image" alt="multilingual-mode" width="600" height="400" loading="lazy"><figcaption>Режим «Multilingual».</figcaption></figure><p>Кожен рядок матиме текстове поле, де ви можете написати переклад для кожної з вибраних мов.</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2023/09/string-in-multilingual.png" class="kg-image" alt="string-in-multilingual" width="600" height="400" loading="lazy"></figure><p>Якщо ви працюєте у багатомовному режимі, ви можете переключатися між двома можливими виглядами:</p><ul><li>вигляд списку;</li><li>вигляд сітки.</li></ul><p>Ось приклад вигляду списку:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/multilingual-mode.png" class="kg-image" alt="multilingual-mode" width="600" height="400" loading="lazy"><figcaption>Вигляд списку в режимі «Multilingual».</figcaption></figure><p>Щоб переключитися на вигляд сітки, потрібно натиснути на відповідну кнопку на панелі інструментів вгорі:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/multilingual-mode-copy.png" class="kg-image" alt="multilingual-mode-copy" width="600" height="400" loading="lazy"><figcaption>Зміна між виглядом списку та виглядом сітки.</figcaption></figure><p>Інші частини редактора та інструменти в цьому режимі дуже схожі на ті, про які ви вже знаєте у режимі «Side-by-Side».</p><!--kg-card-begin: html--><h3 id="як-перейти-до-іншого-файлу">🔶 Як перейти до іншого файлу</h3><!--kg-card-end: html--><p>Можливо, після перекладу всіх рядків у файлі вам потрібно буде перейти до іншого файлу. Це дуже легко зробити:</p><p>Натисніть на головне меню у верхньому лівому куті.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/main-menu-button.png" class="kg-image" alt="main-menu-button" width="600" height="400" loading="lazy"><figcaption>Головне меню.</figcaption></figure><p>Перейдіть до <code>File</code> та оберіть <code>Open...</code>.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/open-another-file-1.png" class="kg-image" alt="open-another-file-1" width="600" height="400" loading="lazy"><figcaption>Відкрийте файл.</figcaption></figure><p>Виберіть файл, який хочете відкрити, та натисніть <code>Open</code> (або двічі натисніть на назву файлу).</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/open-file-menu.png" class="kg-image" alt="open-file-menu" width="600" height="400" loading="lazy"><figcaption>Список файлів.</figcaption></figure><p>💡 <strong>Важливо<strong>:</strong></strong> ви можете швидше перейти до списку файлів, натиснувши одразу на назву файлу.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/file-click-on-file.png" class="kg-image" alt="file-click-on-file" width="600" height="400" loading="lazy"><figcaption>Натисніть на назву файлу.</figcaption></figure><p>Ви перейдете до обраного файлу.</p><!--kg-card-begin: html--><h3 id="як-переглянути-всі-рядки">🔶 Як переглянути всі рядки</h3><!--kg-card-end: html--><p>Якщо вам коли-небудь знадобиться побачити список усіх рядків у проєкті, то:</p><p>Перейдіть до головного меню у верхньому лівому куті.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/main-menu-button.png" class="kg-image" alt="main-menu-button" width="600" height="400" loading="lazy"><figcaption>Головне меню.</figcaption></figure><p>Перейдіть до <code>File</code> та виберіть <code>All Strings</code>.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/all-strings-1.png" class="kg-image" alt="all-strings-1" width="600" height="400" loading="lazy"><figcaption>Побачити всі рядки.</figcaption></figure><p>Ви побачите список усіх рядків у проєкті, їхній стан та переклади.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/all-strings-list.png" class="kg-image" alt="all-strings-list" width="600" height="400" loading="lazy"><figcaption>Всі рядки.</figcaption></figure><!--kg-card-begin: html--><h3 id="як-перекладати-мови-із-письмом-справа-наліво">🔶 Як перекладати мови із письмом справа наліво</h3><!--kg-card-end: html--><p>У той час як деякі мови, серед яких іспанська та італійська, пишуться зліва направо (LTR), інші мови, серед яких арабська та урду, пишуться справа наліво (RTL).</p><p><a href="https://support.crowdin.com/online-editor/#translating-rtl-languages">Crowdin</a> зазначає, що:</p><blockquote>Під час перекладу між мовами LTR і RTL деякі елементи у полі перекладу в редакторі можуть відтворюватись не так само, як після експорту.</blockquote><p>Щоб переконатися, що переклади будуть правильно відтворені в експортованому файлі, Crowdin рекомендує:</p><ol><li>Під час написання перекладу використайте кнопку <code>Copy Source</code>. Це перша кнопка на панелі інструментів.</li></ol><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/toolbar-copy-source-1.png" class="kg-image" alt="toolbar-copy-source-1" width="600" height="400" loading="lazy"><figcaption>Кнопка «Copy Source».</figcaption></figure><p>2. Перекладіть текст на цільову мову.</p><p>3. Не змінюйте змінні або теги, навіть якщо вони виглядають по-іншому. Після експорту файлу вони матимуть правильний вигляд.</p><p>💡 <strong>Важливо<strong>: </strong></strong>Crowdin <a href="https://support.crowdin.com/online-editor/#translating-rtl-languages">пропонує</a> використовувати застосунок <a href="https://store.crowdin.com/unicode">Unicode Table</a> для копіювання та вставки знаків справа наліво та зліва направо, змінюючи напрямок тексту, коли це потрібно.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/image-77.png" class="kg-image" alt="image-77" width="600" height="400" loading="lazy"><figcaption>Приклад перекладу мови RTL з <a href="https://support.crowdin.com/online-editor/#translating-rtl-languages">документації Crowdin</a>.</figcaption></figure><h3 id="--26"><strong>Налаштування редактора перекладу</strong></h3><p>Ви також можете налаштувати редактор перекладу.</p><p>Щоб перейти до цих налаштувань, натисніть на шестерню у верхньому правому куті редактора перекладу.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/editor-settings.png" class="kg-image" alt="editor-settings" width="600" height="400" loading="lazy"><figcaption>Налаштування редактора перекладу.</figcaption></figure><p>Ви побачите список налаштувань, які можете змінити.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/editor-settings-1.png" class="kg-image" alt="editor-settings-1" width="600" height="400" loading="lazy"><figcaption>Налаштування редактора (частина 1).</figcaption></figure><p>Перша частина цих налаштувань містить:</p><ul><li>мінімальний відсоток відповідності для перекладів з пам’яті перекладів;</li><li>чи потрібно перевіряти переклади на наявність проблем із забезпечення якості (QA);</li><li>чи повинен редактор автоматично завершувати те, що ви пишете, і показувати прогнозовані переклади;</li><li>чи потрібно автоматично затверджувати переклади. Це може бути корисно, якщо ви самостійно перекладаєте і редагуєте проєкт;</li><li>чи потрібно автоматично переходити до наступного рядка;</li><li>тема редактора перекладу (світла, темна або автоматично).</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/editor-settings-2-1.png" class="kg-image" alt="editor-settings-2-1" width="600" height="400" loading="lazy"><figcaption>Налаштування редактора (частина 2).</figcaption></figure><p>Якщо прокрутити вниз, ви знайдете ще більше налаштувань, серед яких:</p><ul><li>чи повинен редактор показувати лише початок вихідного рядка в компактному вигляді;</li><li>чи показувати попередній перегляд перекладу для перекладених рядків;</li><li>як відтворювати HTML-теги: їх можна показувати або приховати;</li><li>чи потрібно відтворювати непридатні для друку символи;</li><li>чи потрібно виділяти поле для перекладу;</li><li>чи потрібно ввімкнути перевірку орфографії в реальному часі;</li><li>мова інтерфейсу користувача вашого редактора перекладу.</li></ul><p>Ви можете налаштувати ці параметри відповідно до своїх потреб.</p><h3 id="--27"><strong>Гарячі клавіші</strong></h3><p>Ще одна ключова функція підвищення продуктивності для перекладачів і редакторів у Crowdin — використання гарячих клавіш.</p><p>Щоб побачити всі гарячі клавіші, доступні для вашої операційної системи, просто натисніть на іконку клавіатури у верхньому правому куті.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/keyboard-shortcuts-button-1.png" class="kg-image" alt="keyboard-shortcuts-button-1" width="600" height="400" loading="lazy"><figcaption>Відкрийте гарячі клавіші.</figcaption></figure><p>Гарячі клавіші, доступні для Windows:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/image-78.png" class="kg-image" alt="image-78" width="600" height="400" loading="lazy"><figcaption>Гарячі клавіші (Windows). Знімок екрана з <a href="https://support.crowdin.com/online-editor/#helpful-tips">документації Crowdin</a>.</figcaption></figure><p>Гарячі клавіші, доступні для macOS:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/keyboard-shortcuts-macos-1.png" class="kg-image" alt="keyboard-shortcuts-macos-1" width="600" height="400" loading="lazy"><figcaption>Гарячі клавіші (macOS).</figcaption></figure><p>Якщо прокрутити вниз, ви знайдете ще більше гарячих клавіш для macOS.</p><!--kg-card-begin: html--><h3 id="як-скачати-перекладені-файли">🔶 Як скачати перекладені файли</h3><!--kg-card-end: html--><p>Після того, як проєкт перекладено та затверджено, його потрібно скачати.</p><p>Crowdin пропонує три різні варіанти скачування файлів. Ви можете скачати весь проєкт, скачати всі файли проєкту конкретною мовою або скачати один файл конкретною мовою.</p><p>Розглянемо всі варіанти докладніше.</p><h3 id="--28"><strong>Як скачати весь проєкт</strong></h3><p>Якщо вам потрібно скачати весь проєкт:</p><ol><li>Перейдіть до проєкту.</li><li>Перейдіть до вкладки <code>Translations</code>.</li><li>У розділі <code>Download as ZIP</code> натисніть на кнопку <code>Build &amp; Download</code>.</li></ol><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/download-project-1.png" class="kg-image" alt="download-project-1" width="600" height="400" loading="lazy"><figcaption>Розділ «Download as ZIP».</figcaption></figure><p>Ви побачите індикатор виконання, доки Crowdin складає проєкт, а потім розпочнеться скачування.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/progress-bar.png" class="kg-image" alt="progress-bar" width="600" height="400" loading="lazy"><figcaption>Build &amp; Download.</figcaption></figure><p>ZIP-файл буде містити папки для кожної мови. Назви папок будуть відповідати їхнім мовним кодам.</p><h3 id="--29"><strong>Як скачати всі файли цільовою мовою</strong></h3><p>Цей варіант корисний, якщо вам потрібно скачати всі перекладені файли конкретною цільовою мовою.</p><ol><li>Перейдіть до проєкту.</li><li>Перейдіть до вкладки <code>Translations</code>.</li><li>У розділі <code>Download as ZIP</code> виберіть мову.</li><li>Натисніть на кнопку <code>Build &amp; Download</code>.</li></ol><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/download-language-1.png" class="kg-image" alt="download-language-1" width="600" height="400" loading="lazy"><figcaption>Розділ «Download as ZIP».</figcaption></figure><h3 id="--30"><strong>Як скачати один файл цільовою мовою</strong></h3><p>Третій варіант — скачати лише один файл цільовою мовою.</p><p>Для цього:</p><ol><li>Перейдіть до проєкту.</li><li>Перейдіть до вкладки <code>Dashboard</code>.</li><li>Виберіть цільову мову.</li><li>Натисніть на файл.</li><li>Натисніть на три крапки праворуч, щоб побачити додаткові опції (див. знімок екрана нижче).</li><li>Натисніть на <code>Download</code>.</li></ol><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/download-one-file.png" class="kg-image" alt="download-one-file" width="600" height="400" loading="lazy"><figcaption>Скачування файлу цільовою мовою.</figcaption></figure><p>Скачування має розпочатися, і перекладений файл повинен бути готовий через кілька секунд або хвилин.</p><p>Ви також можете автоматизувати процес експорту чи скачування перекладених файлів за допомогою інтеграцій Crowdin.</p><!--kg-card-begin: html--><h3 id="як-використовувати-память-перекладів">🔶 Як використовувати пам’ять перекладів (TM)</h3><!--kg-card-end: html--><p>Чудова робота! Ви вже знаєте основні функції редактора перекладу, тому поговоримо про більш просунуті функції, серед яких пам’ять перекладів.</p><p>Ми розглянемо, як ви можете:</p><ul><li>створити пам’ять перекладів;</li><li>керувати пам’яттю перекладів;</li><li>завантажити пам’ять перекладів;</li><li>призначити пам’ять перекладів до проєкту.</li></ul><p>💡 <strong>Важливо<strong>:</strong></strong> пам’ятайте, що TM — це як база даних перекладених рядків та їхні відповідні переклади. Використання попередніх перекладів може значно заощадити час.</p><p>Готові? Тоді розпочнемо.</p><h3 id="-tm--2"><strong>Як створити пам’ять перекладів (TM)</strong></h3><p>Щоб створити TM для проєкту:</p><ol><li>Перейдіть до свого профілю. Для цього натисніть на <code>Profile</code> у спадному меню, яке з’явиться, якщо натиснути на зображення свого профілю у верхньому правому куті.</li><li>Перейдіть до вкладки <code>Resources</code>.</li></ol><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/resources-1.png" class="kg-image" alt="resources-1" width="600" height="400" loading="lazy"><figcaption>Вкладка «Resources».</figcaption></figure><p>3. Якщо у вас уже створено проєкт, ви побачите TM для цього проєкту. Ви також можете створити нову TM, незалежну від проєкту (ви можете призначити її до проєкту пізніше).</p><p><a href="https://support.crowdin.com/translation-memory/#creating-tm">Crowdin</a> зазначає, що:</p><blockquote>Окрім проєктних TM, які автоматично створюються разом із відповідними проєктами, ви також можете створити окремі TM, заповнити їх відповідним вмістом, завантаживши наявні TM у форматі TMX, XLSX або CSV, а потім призначити ці TM до потрібних проєктів.</blockquote><p>4. Щоб створити нову пам’ять перекладів, натисніть на зелену кнопку <code>Create TM</code>.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/create-TM-1.png" class="kg-image" alt="create-TM-1" width="600" height="400" loading="lazy"><figcaption>Кнопка «Create TM».</figcaption></figure><p>5. Заповніть інформацію для нової пам’яті перекладів (наприклад, її назву, мову та чи хочете ви призначити її до наявного проєкту).</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/create-translation-memory.png" class="kg-image" alt="create-translation-memory" width="600" height="400" loading="lazy"><figcaption>Створення пам’яті перекладів.</figcaption></figure><p>Я створю нову TM під назвою <code>Demo TM</code> англійською мовою. Поки що я не призначатиму її до жодного проєкту.</p><p>Глянемо, що відбувається:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/demo-translation-memory.png" class="kg-image" alt="demo-translation-memory" width="600" height="400" loading="lazy"><figcaption>Нова пам’ять перекладів.</figcaption></figure><p>🎉 Чудово! Тепер ми бачимо нову TM у списку.</p><h3 id="-tm--3"><strong>Як керувати пам’яттю перекладів (TM)</strong></h3><p>Якщо натиснути на три крапки праворуч від TM, щоб переглянути додаткові опції, ви побачите наступне:</p><ul><li>Upload (завантажити);</li><li>Download (скачати);</li><li>Edit (редагувати);</li><li>View Records (переглянути записи);</li><li>Delete (видалити).</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/additional-options-1.png" class="kg-image" alt="additional-options-1" width="600" height="400" loading="lazy"><figcaption>Додаткові опції TM.</figcaption></figure><p>Якщо вибрати TM, поставивши галочку, ви зможете її видалити, відредагувати або переглянути записи.</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2023/09/manage-tm-2.png" class="kg-image" alt="manage-tm-2" width="600" height="400" loading="lazy"></figure><p>Оскільки наша пам’ять перекладів є новою (а отже, порожньою), переглянемо записи TM для freeCodeCamp Course Project.</p><p>Якщо натиснути на неї, ви побачите список усіх записів, збережених у TM:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/translation-memory-strings-1.png" class="kg-image" alt="translation-memory-strings-1" width="600" height="400" loading="lazy"><figcaption>Пам’ять перекладів (TM).</figcaption></figure><p>Тут ви можете:</p><ul><li>редагувати записи;</li><li>видаляти записи;</li><li>шукати певні записи, враховуючи регістр, цілу фразу та точний збіг;</li><li>приховувати або показувати певні стовпці.</li></ul><h3 id="-tm--4"><strong>Як завантажити та скачати пам’ять перекладів (TM)</strong></h3><p>У вкладці <code>Resources</code> ви також можете завантажувати та скачувати TM.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/tm-records-download-upload.png" class="kg-image" alt="tm-records-download-upload" width="600" height="400" loading="lazy"><figcaption>Панель інструментів вкладки «Resources».</figcaption></figure><p>Файл повинен бути в одному з наступних форматів:</p><ul><li>TMX</li><li>XLSX</li><li>CSV</li></ul><p>Щоб завантажити TM:</p><ul><li>натисніть на кнопку <code>Upload</code>;</li><li>виберіть файл у файловій системі;</li><li>зіставте стовпці до відповідної мови.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/tm-records-download-upload.png" class="kg-image" alt="tm-records-download-upload" width="600" height="400" loading="lazy"><figcaption>Кнопка «Upload».</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/image-79.png" class="kg-image" alt="image-79" width="600" height="400" loading="lazy"><figcaption>Відповідність стовпців та мов. Зображення з <a href="https://support.crowdin.com/translation-memory/#downloading-and-uploading-tm">документації Crowdin</a>.</figcaption></figure><p>Щоб скачати пам’ять перекладів:</p><ul><li>натисніть на кнопку <code>Download</code>;</li><li>виберіть формат (TMX, XLSX або CSV);</li><li>виберіть, чи ви хочете завантажити всі мови або лише конкретну пару.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/tm-records-download-upload.png" class="kg-image" alt="tm-records-download-upload" width="600" height="400" loading="lazy"><figcaption>Кнопка «Download».</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/download-tm.png" class="kg-image" alt="download-tm" width="600" height="400" loading="lazy"><figcaption>Скачування TM.</figcaption></figure><p>Скачування має розпочатися після натискання зеленої кнопки <code>Download</code>.</p><p>Ось файл CSV, який ми отримаємо після експорту пам’яті перекладів для freeCodeCamp Course Project:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/Screenshot-2023-09-19-at-5.19.49-PM.png" class="kg-image" alt="Screenshot-2023-09-19-at-5.19.49-PM" width="600" height="400" loading="lazy"><figcaption>Експортований файл CSV.</figcaption></figure><h3 id="--31"><strong>Як призначити пам’ять перекладів до проєкту</strong></h3><p>Щоб призначити наявну TM до проєкту:</p><ol><li>Перейдіть до проєкту.</li><li>Перейдіть до вкладки <code>Settings</code>.</li><li>Перейдіть до <code>Translation Memories</code>.</li></ol><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/assign-tm.png" class="kg-image" alt="assign-tm" width="600" height="400" loading="lazy"><figcaption>Вкладка «Settings».</figcaption></figure><p>4. Прокрутіть вниз, щоб знайти <code>Assigned Translation Memories</code>.</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2023/09/assigned-tm.png" class="kg-image" alt="assigned-tm" width="600" height="400" loading="lazy"></figure><p>5. Виберіть TM, які хочете призначити до свого проєкту.</p><p><a href="https://support.crowdin.com/translation-memory/#prioritizing-tm">Crowdin</a> зазначає, що:</p><blockquote>Якщо ви призначаєте декілька TM до проєкту, ви можете встановити потрібний пріоритет для кожної пам’яті. У результаті пропозиції TM з вищим пріоритетом будуть відображатися в першу чергу.</blockquote><p>💡 <strong>Важливо<strong>:</strong></strong> більше число означає вищий пріоритет. Якщо TM має пріоритет 5, це буде вище, ніж пріоритет 1.</p><p>Ви також можете змінити стандартну TM, натиснувши на відповідну іконку зірочки.</p><p><strong>Примітка<strong>: </strong></strong>зверніть увагу, що Crowdin нещодавно прибрав необхідність використовувати власні робочі процеси для автоматичного застосування збігів пам’яті перекладів. Тепер ви можете ввімкнути пам’ять перекладів у налаштуваннях проєкту, як показано нижче:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2024/01/image-13.png" class="kg-image" alt="image-13" width="600" height="400" loading="lazy"><figcaption>Як увімкнути попередній переклад пам’яті перекладів для нового матеріалу в налаштуваннях проєкту. Знімок екрана надано командою Crowdin.</figcaption></figure><!--kg-card-begin: html--><h3 id="глосарій">🔶 Глосарій</h3><!--kg-card-end: html--><p>Чудово! Тепер ви знаєте найважливіші аспекти TM на Crowdin, тож розглянемо глосарії.</p><p>💡 <strong>Важливо<strong>: </strong></strong>пам’ятайте, що глосарій дозволяє зберігати та керувати термінологією проєкту, допомагаючи перекладачам з контекстом та визначеннями.</p><h3 id="--32"><strong>Як створити глосарій</strong></h3><p>Глосарій автоматично створюється під час створення проєкту, але ви також можете створити нові глосарії, які будуть незалежні від будь-якого проєкту.</p><p>Щоб створити глосарій:</p><ul><li>перейдіть до свого профілю;</li><li>перейдіть до <code>Resources</code>;</li><li>натисніть на <code>Glossaries</code>.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/glossaries-tab.png" class="kg-image" alt="glossaries-tab" width="600" height="400" loading="lazy"><figcaption>Кнопка «Glossaries»</figcaption></figure><p>Ви побачите глосарій для кожного проєкту, який ви створили на Crowdin.</p><ul><li>натисніть на зелену кнопку <code>Create Glossary</code>;</li><li>введіть назву глосарію та виберіть мову;</li><li>якщо потрібно, призначте глосарій до проєкту.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/create-a-glossary.png" class="kg-image" alt="create-a-glossary" width="600" height="400" loading="lazy"><figcaption>Призначення глосарію.</figcaption></figure><p>Після цього ви побачите новий глосарій у списку глосаріїв. Я створила новий глосарій під назвою «Demo Glossary».</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/demo-glossary.png" class="kg-image" alt="demo-glossary" width="600" height="400" loading="lazy"><figcaption>Список глосаріїв.</figcaption></figure><h3 id="--33"><strong>Як керувати термінами глосарію</strong></h3><p>Ви можете додавати, редагувати та видаляти поняття і терміни зі своїх глосаріїв. Розглянемо, як це можна зробити.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/empty-glossary.png" class="kg-image" alt="empty-glossary" width="600" height="400" loading="lazy"><figcaption>Новий порожній глосарій.</figcaption></figure><p><strong><strong>💡 </strong>Важливо<strong>:</strong></strong> на Crowdin поняття відрізняються від термінів. Поняття є ширшим за термін. Ось що каже <a href="https://support.crowdin.com/glossary/#managing-glossary-concepts-and-terms">документація</a> про різницю між ними:</p><blockquote>Поняття включає терміни глосарію та їхні варіації з кількома перекладами та іншою релевантною інформацією.</blockquote><p>Щоб додати поняття, натисніть на зелену кнопку <code>Add concept</code>:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/add-concept-2.png" class="kg-image" alt="add-concept-2" width="600" height="400" loading="lazy"><figcaption>Кнопка «Add concept».</figcaption></figure><p>Вам потрібно буде написати інформацію про нове поняття:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/Screenshot-2023-09-19-at-6.08.32-PM.png" class="kg-image" alt="Screenshot-2023-09-19-at-6.08.32-PM" width="600" height="400" loading="lazy"><figcaption>Додайте інформацію про поняття.</figcaption></figure><p><a href="https://support.crowdin.com/glossary/#managing-glossary-concepts-and-terms">Документація Crowdin</a> описує наступні деталі <strong>поняття</strong>:</p><blockquote><strong><strong>Definition:</strong></strong> визначення поняття.<br><strong><strong>Subject:</strong></strong> галузь знань, до якої відноситься поняття.<br><strong><strong>Note:</strong></strong> короткі примітки про поняття, які можуть бути корисними перекладачам.<br><strong><strong>URL:</strong></strong> посилання на вебсторінки з релевантною інформацією про поняття.<br><strong><strong>Figure:</strong> </strong>посилання на відповідне зображення.</blockquote><p>У &nbsp;документації також зазначено деталі <strong>терміну</strong>:</p><blockquote><strong><strong>Part of speech: </strong></strong>частина мови (наприклад, іменник, дієслово, прикметник тощо).<br><strong><strong>Type: </strong></strong>тип (наприклад, повна форма, акронім, абревіатура тощо).<br><strong><strong>Status:</strong></strong> статус (рекомендований, допущений, не рекомендований, застарілий).<br><strong><strong>Gender:</strong></strong> рід терміну.<br><strong><strong>Description:</strong></strong> опис терміну.<br><strong><strong>Note: </strong></strong>короткі примітки про термін, які можуть бути корисними перекладачам.<br><strong><strong>URL:</strong> </strong>посилання на вебсторінки з релевантною інформацією про термін.</blockquote><p>Після створення терміну ви побачите його у списку термінів глосарію:</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2023/09/glossary-term-demo.png" class="kg-image" alt="glossary-term-demo" width="600" height="400" loading="lazy"></figure><p>Щоб відредагувати або видалити термін, натисніть на три крапки праворуч, щоб переглянути додаткові опції та виберіть потрібне.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/glosssary-term-1.png" class="kg-image" alt="glosssary-term-1" width="600" height="400" loading="lazy"><figcaption>Термін глосарію.</figcaption></figure><p>Ви можете скачати або завантажити глосарій у наступних форматах:</p><ul><li>TBX (v2)</li><li>TBX (v3)</li><li>CSV</li><li>XLSX</li></ul><p>Просто натисніть на відповідну кнопку, і ви зможете вибрати файл для завантаження або формат файлу для скачування.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/download-upload.png" class="kg-image" alt="download-upload" width="600" height="400" loading="lazy"><figcaption>Завантаження та скачування глосарію.</figcaption></figure><p><a href="https://support.crowdin.com/glossary/#downloading-and-uploading-glossary">Crowdin</a> рекомендує:</p><blockquote>Якщо ви завантажуєте глосарій у форматі файлу CSV або XLS/XLSX, виберіть мову для кожного стовпця та значення стовпця (термін, опис або частина мови) у діалоговому вікні конфігурації.</blockquote><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/image-80.png" class="kg-image" alt="image-80" width="600" height="400" loading="lazy"><figcaption>Вибір стовпців. Зображення з <a href="https://support.crowdin.com/glossary/#downloading-and-uploading-glossary">документації Crowdin</a>.</figcaption></figure><h3 id="--34"><strong>Як призначити глосарій до проєкту</strong></h3><p>Призначити глосарій до проєкту на Crowdin дуже просто:</p><ul><li>перейдіть до свого проєкту;</li><li>перейдіть до вкладки <code>Settings</code>;</li><li>перейдіть до <code>Glossaries</code>;</li><li>виберіть глосарій (або глосарії), які хочете призначити до проєкту.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/glossaries-demo.png" class="kg-image" alt="glossaries-demo" width="600" height="400" loading="lazy"><figcaption>Глосарії проєкту.</figcaption></figure><p><strong><strong>💡 </strong>Важливо<strong>:</strong></strong> щоб змінити стандартний глосарій проєкту, просто натисніть на іконку зірочки відповідного глосарію. Темно-сіра зірочка позначає поточний стандартний глосарій.</p><p>Ви також можете ділитися глосаріями між усіма проєктами, встановивши опцію <code>Share Glossaries</code> у своєму профілі:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/share-glossaries.png" class="kg-image" alt="share-glossaries" width="600" height="400" loading="lazy"><figcaption>Опція «Share Glossaries».</figcaption></figure><h3 id="--35"><strong>Як перекласти глосарій</strong></h3><p>Переклад глосарію може бути дуже корисним для послідовного використання термінів цільовими мовами.</p><p>Щоб перекласти глосарій, Crowdin рекомендує використовувати безоплатний застосунок <a href="https://crowdin.com/store/apps/glossary-translate-app">Translate Glossary</a>.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/translate-glossary.png" class="kg-image" alt="translate-glossary" width="600" height="400" loading="lazy"><figcaption>Застосунок «Translate Glossary».</figcaption></figure><p>Якщо ви встановите цей застосунок, ви зможете перекладати глосарій безпосередньо на Crowdin і вибирати, які проєкти повинні мати доступ до цього застосунку.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/install-translate-glossary.png" class="kg-image" alt="install-translate-glossary" width="600" height="400" loading="lazy"><figcaption>Встановлення застосунку.</figcaption></figure><!--kg-card-begin: html--><h3 id="забезпечення-якості-на-crowdin">🔶 Забезпечення якості (QA) на Crowdin</h3><!--kg-card-end: html--><p>Забезпечення якості є важливим для будь-якого типу проєктів, і це особливо актуально для проєктів з локалізації. Одна маленька помилка може значно вплинути на ваших користувачів.</p><p>Саме тому Crowdin впровадив ефективну перевірку якості, щоб допомогти надавати високоякісні переклади, яких заслуговують ваші користувачі.</p><p><a href="https://support.crowdin.com/qa-checks/">Crowdin</a> зазначає:</p><blockquote>Перевірки QA допомагають легко і швидко виявити деякі поширені помилки. Ми рекомендуємо переглянути та вирішити всі проблеми перевірок QA перед побудовою проєкту й скачуванням перекладів.</blockquote><p>Перевірки QA дозволяють виявити:</p><ul><li>орфографічні помилки;</li><li>відсутні коми;</li><li>зайві пробіли;</li><li>інші поширені помилки.</li></ul><h3 id="-qa-"><strong>Як налаштувати забезпечення якості (QA)</strong></h3><p>Щоб налаштувати перевірки QA та вибрати, що ви хочете перевіряти в перекладених рядках:</p><ul><li>перейдіть до свого проєкту;</li><li>перейдіть до вкладки <code>Settings</code>;</li><li>переконайтеся, що вибрано <code>Enable QA Checks</code>;</li><li>виберіть, що ви хочете перевіряти.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/qa-checks-settings.png" class="kg-image" alt="qa-checks-settings" width="600" height="400" loading="lazy"><figcaption>Категорія «QA Checks».</figcaption></figure><p>Ви можете перевіряти:</p><ul><li>чи переклад порожній;</li><li>чи переклад довший за дозволену довжину (якщо така існує);</li><li>невідповідність тегів;</li><li>невідповідність пробілів;</li><li>невідповідність змінних;</li><li>невідповідність пунктуації;</li><li>невідповідність регістру знаків;</li><li>невідповідність спеціальних символів;</li><li>проблеми «Incorrect translation»;</li><li>орфографічні помилки;</li><li>помилки синтаксису ICU;</li><li>відповідність термінам з глосарію;</li><li>дубльовані переклади;</li><li>помилки синтаксису FTL;</li><li>помилки синтаксису Android.</li></ul><p><strong><strong>💡 </strong>Важливо<strong>: </strong></strong>для кожної з цих перевірок QA ви можете вибрати: показувати користувачеві попередження чи вказувати на помилку.</p><p>Щоб зберегти зміни, натисніть на зелену кнопку <code>Save</code>.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/qa-save-button.png" class="kg-image" alt="qa-save-button" width="600" height="400" loading="lazy"><figcaption>Збереження перевірок QA.</figcaption></figure><h3 id="-qa-1"><strong>Як перевірити стан QA</strong></h3><p>Редактори та менеджери проєктів можуть бачити проблеми, знайдені перевірками якості.</p><p>Щоб побачити поточний стан:</p><ul><li>перейдіть до свого проєкту;</li><li>перейдіть до вкладки <code>Dashboard</code>;</li><li>знайдіть стан <code>QA Checks</code>.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/qa-checks-status-1.png" class="kg-image" alt="qa-checks-status-1" width="600" height="400" loading="lazy"><figcaption>Перевірка QA без проблем.</figcaption></figure><p>Ви побачите один з наступних станів:</p><ul><li><strong><strong>Off</strong></strong>: перевірки QA вимкнені;</li><li><strong><strong>In Progress</strong></strong>: перевірки QA в процесі;</li><li><strong><strong>No Issues</strong></strong>: перевірки QA не знайшли жодних проблем;</li><li><strong><strong>Issues Foun</strong>d</strong>: перевірки QA виявили проблеми.</li></ul><p>Якщо ви спробуєте зберегти рядок з проблемою перевірки QA, ви побачите попередження або помилку. Ви все одно можете зберегти його, але ці проблеми краще одразу виправити.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/qa-warning.png" class="kg-image" alt="qa-warning" width="600" height="400" loading="lazy"><figcaption>Попередження про зайві пробіли.</figcaption></figure><p>💡<strong><strong> </strong>Важливо<strong>: </strong></strong>проблема буде автоматично виправлена, якщо ви натиснете на кнопку <code>Autofix</code>. Ви також можете зберегти цей переклад без виправлення або скасувати його.</p><p>Це зображення з документації Crowdin показує, що ви побачите, якщо у вашому проєкті будуть знайдені проблеми:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/image-81.png" class="kg-image" alt="image-81" width="600" height="400" loading="lazy"><figcaption>Знайдено проблеми. Зображення з <a href="https://support.crowdin.com/qa-checks/">документації Crowdin</a>.</figcaption></figure><p>Забезпечення якості — це дуже важливий крок, до якого потрібно серйозно віднестись під час процесу локалізації.</p><!--kg-card-begin: html--><h3 id="як-завантажити-наявні-переклади">🔶 Як завантажити наявні переклади</h3><!--kg-card-end: html--><p>Якщо у вас є наявні переклади, ви також можете завантажити їх до свого проєкту.</p><p>Є три варіанти:</p><ul><li>завантажити їх через вкладку Translations;</li><li>завантажити їх через сторінку мови;</li><li>завантажити їх через редактор перекладу.</li></ul><h3 id="-translations"><strong>Як завантажити переклади через вкладку Translations</strong></h3><p>Щоб завантажити їх через вкладку Translations:</p><ul><li>перейдіть до свого проєкту;</li><li>перейдіть до <code>Upload existing translations</code>;</li><li>перетягніть наявні переклади або виберіть файли зі своєї файлової системи.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/translations-tab-upload.png" class="kg-image" alt="translations-tab-upload" width="600" height="400" loading="lazy"><figcaption>Завантаження перекладів через вкладку «Translations».</figcaption></figure><p>Згідно з Crowdin, до <a href="https://support.crowdin.com/uploading-translations/#key-value-formats">підтримуваних форматів</a> для завантаження перекладів належать ті, що мають структуру ключ-значення, серед яких:</p><blockquote>Android XML, macOS/iOS Strings, Stringsdict, JSON, Chrome JSON, GO JSON, i18next JSON, FBT JSON, XLIFF, XLIFF 2.0, Java Properties, Play Properties, Java Properties XML, RESX, RESW, RES JSON, YAML, INI, Joomla INI, JS, FJS, PO, TS, QT TS, Blackberry, Symbian, Flex, BADA, TOML, Coffee, DKLANG, XAML, SRT, VTT, VTT2, SBV, SVG, DTD, CSV, RC, WXL, Maxthon, Haml, XLSX, PLIST, PHP, ARB, VDF.</blockquote><p>Crowdin також <a href="https://support.crowdin.com/uploading-translations/#text-and-html-based-formats">зазначає</a>:</p><blockquote>Для файлів, які не мають визначеної структури, завантаження перекладу обробляється експериментальною технологією машинного навчання.</blockquote><h3 id="--36"><strong>Як завантажити переклади через сторінку мови</strong></h3><p>Щоб завантажити їх через сторінку мови:</p><ul><li>перейдіть до свого проєкту;</li><li>перейдіть до <code>Dashboard</code>;</li><li>виберіть цільову мову;</li><li>виберіть файл, але натискайте не на нього, а на три крапки праворуч, щоб переглянути додаткові опції;</li><li>натисніть на <code>Upload Translations</code>.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/upload-translations-language-page-2-1.png" class="kg-image" alt="upload-translations-language-page-2-1" width="600" height="400" loading="lazy"><figcaption>Завантаження перекладів через сторінку мови.</figcaption></figure><p>Коли ви натиснете на цю опцію, ви побачите деякі налаштування для завантаження та призначення перекладів. Виберіть опції, які потрібні для вашого проєкту.</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2023/09/upload-options.png" class="kg-image" alt="upload-options" width="600" height="400" loading="lazy"></figure><h3 id="--37"><strong>Як завантажити переклади через редактор перекладу</strong></h3><p>Ви також можете завантажити переклади безпосередньо з редактора перекладу.</p><p>Для цього:</p><ul><li>натисніть на головне меню;</li><li>у <code>File</code> виберіть <code>Upload Translations...</code>.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/upload-from-editor.png" class="kg-image" alt="upload-from-editor" width="600" height="400" loading="lazy"><figcaption>Завантаження перекладів через редактор перекладу.</figcaption></figure><h3 id="-crowdin-4"><strong>Підтримувані формати файлів на Crowdin</strong></h3><p>Раніше згадувалось про різні формати файлів, з якими можна працювати на Crowdin. Але Crowdin підтримує більше ніж 100 форматів файлів.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/100-file-formats.png" class="kg-image" alt="100-file-formats" width="600" height="400" loading="lazy"><figcaption>Crowdin підтримує 100+ форматів.</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/supported-file-formats.png" class="kg-image" alt="supported-file-formats" width="600" height="400" loading="lazy"><figcaption>Підтримувані формати файлів у Crowdin Store.</figcaption></figure><p>Ви можете перевірити підтримувані формати файлів тут:</p><ul><li><a href="https://support.crowdin.com/supported-formats/">підтримувані формати;</a></li><li><a href="https://store.crowdin.com/categories/file-formats">формати файлів у Crowdin Store</a>.</li></ul><!--kg-card-begin: html--><h3 id="як-попередньо-перекласти-проєкт">🔶 Як попередньо перекласти проєкт</h3><!--kg-card-end: html--><p>Якщо ваша мета — заощадити час та підвищити продуктивність, попередній переклад за допомогою машинного перекладу (MT) може бути саме тим, що вам потрібно.</p><p>Це автоматизований процес, який застосовує комп’ютерні переклади до вашого проєкту при завантаженні файлу. На Crowdin ви можете налаштувати двигуни машинного перекладу для використання цієї функції.</p><p>У вас є два варіанти для впровадження цього процесу:</p><ul><li>вручну;</li><li>автоматично.</li></ul><h3 id="--38"><strong>Попередній переклад вручну</strong></h3><p>Щоб попередньо перекласти свій матеріал за допомогою машинного перекладу (MT):</p><ul><li>перейдіть до свого проєкту;</li><li>перейдіть до вкладки <code>Dashboard</code>;</li><li>натисніть на <code>Pre-translation</code>;</li><li>виберіть <code>via TM</code> (пам’ять перекладів) або <code>via MT</code> (машинний переклад).</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/pretranslation-1.png" class="kg-image" alt="pretranslation-1" width="600" height="400" loading="lazy"><figcaption>Попередній переклад.</figcaption></figure><p>Якщо ви вибрали <code>via MT</code> (машинний переклад), вам потрібно буде вибрати двигун перекладу, цільові мови та файли, які ви хочете попередньо перекласти. Ви також можете додати мітки.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/translation-engine.png" class="kg-image" alt="translation-engine" width="600" height="400" loading="lazy"><figcaption>Попередній переклад проєкту через MT.</figcaption></figure><h3 id="--39"><strong>Автоматичний попередній переклад</strong></h3><p>Якщо ви вибрали автоматичний процес, система буде автоматично попередньо перекладати новий матеріал.</p><p>Нещодавно Crowdin дозволив увімкнути автоматичний попередній переклад нового матеріалу в налаштуваннях проєкту. Якщо увімкнути цю функцію і завантажити новий матеріал до свого проєкту, система буде перекладати його автоматично.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2024/01/image--1-.png" class="kg-image" alt="image--1-" width="600" height="400" loading="lazy"><figcaption>Автоматичний попередній переклад нового матеріалу. Знімок екрана надано командою Crowdin.</figcaption></figure><!--kg-card-begin: html--><h3 id="переклад-офлайн">🔶 Переклад офлайн</h3><!--kg-card-end: html--><p>Іноді потрібно працювати офлайн. Crowdin має чудову функцію для ситуацій, коли команда хочете працювати над перекладами без підключення до інтернету.</p><p>Щоб увімкнути або вимкнути цю функцію:</p><ul><li>перейдіть до свого проєкту;</li><li>перейдіть до вкладки <code>Settings</code>;</li><li>перейдіть до <code>Privacy and Collaboration</code>;</li><li>поставте або зніміть галочку біля <code>Allow offline translation</code>.</li></ul><p><strong><strong>💡</strong>Важливо<strong>:</strong></strong> цю функцію можуть увімкнути або вимкнути менеджери проєкту.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/settings-tab-offline-1.png" class="kg-image" alt="settings-tab-offline-1" width="600" height="400" loading="lazy"><figcaption>Дозвіл на переклад офлайн.</figcaption></figure><p>Файли можна скачати через редактор або сторінку мови.</p><h3 id="--40"><strong>Як скачати файл через редактор</strong></h3><p>Щоб скачати файл через редактор перекладу:</p><ul><li>натисніть на головне меню у верхньому лівому куті;</li><li>перейдіть до <code>File</code>;</li><li>натисніть на <code>Download</code> або <code>Export in XLIFF</code>.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/download-files.png" class="kg-image" alt="download-files" width="600" height="400" loading="lazy"><figcaption>Скачування файлу через редактор.</figcaption></figure><h3 id="--41"><strong>Як скачати файл через сторінку мови</strong></h3><p>Щоб скачати файл через сторінку мови:</p><ul><li>перейдіть до свого проєкту;</li><li>перейдіть до <code>Dashboard</code>;</li><li>виберіть мову;</li><li>у списку файлів натисніть на три крапки поруч з файлом, який хочете скачати, щоб переглянути додаткові опції;</li><li>натисніть на <code>Download</code> або <code>Export in XLIFF</code>.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/language-download-1.png" class="kg-image" alt="language-download-1" width="600" height="400" loading="lazy"><figcaption>Скачування файлу через сторінку мови.</figcaption></figure><h3 id="--42"><strong>Як скачати всі файли цільової мови</strong></h3><p>Якщо вам потрібно скачати всі файли цільовою мовою:</p><ul><li>перейдіть до свого проєкту;</li><li>перейдіть до <code>Dashboard</code>;</li><li>виберіть мову;</li><li>натисніть на іконку стрілок вгору і вниз (див. знімок екрана нижче);</li><li>натисніть на <code>Download translations</code> або <code>Export in XLIFF</code>.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/download-files-from-language-1.png" class="kg-image" alt="download-files-from-language-1" width="600" height="400" loading="lazy"><figcaption>Скачування всіх перекладів.</figcaption></figure><!--kg-card-begin: html--><h3 id="громадські-проєкти">🔶 Громадські проєкти</h3><!--kg-card-end: html--><p>Тепер ви знаєте деякі з найважливіших функцій Crowdin, тому можете задатись питанням, як досліджувати інші проєкти, які наразі перекладаються на Crowdin.</p><p>Якщо ви натиснете на <code>Projects</code> вгорі, а потім виберете <code>Explore Public Projects</code>, то побачите сторінку, де можна переглянути публічні проєкти за темами та знайти популярні проєкти на Crowdin.</p><p>Ви також можете фільтрувати проєкти за допомогою пошуку в рядку пошуку.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/explore-crowdin.png" class="kg-image" alt="explore-crowdin" width="600" height="400" loading="lazy"><figcaption>Сторінка «Explore Crowdin».</figcaption></figure><p>🎉 Вітаю! Ви щойно досягли кінця другої частини підручника, яка була зосереджена на основах Crowdin.</p><p>Тепер ми зануримося в те, як команди та організації можуть використовувати Crowdin для ефективного управління своїми проєктами.</p><!--kg-card-begin: html--><h2 id="crowdin-для-команд-та-організацій">🔹 Crowdin для команд та організацій</h2><!--kg-card-end: html--><p>Чудово! Тепер розглянемо, як Crowdin може допомогти, якщо ви працюєте з командою або якщо ви засновник чи менеджер організації, яка зацікавлена в локалізації продукту або платформи.</p><p>Ми розглянемо, як ви можете запрошувати членів команди, призначати посади та завдання й створювати звіти.</p><!--kg-card-begin: html--><h3 id="як-запросити-членів-команди">🔶 Як запросити членів команди</h3><!--kg-card-end: html--><p>Щоб надіслати запрошення до свого проєкту:</p><ul><li>перейдіть до свого проєкту;</li><li>перейдіть до вкладки <code>Members</code>;</li><li>натисніть на зелену кнопку <code>Invite</code>.</li></ul><p>💡 <strong>Важливо: </strong>для того ж результату також можна натиснути на сіру кнопку <code>Invite People</code> у верхньому лівому куті.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/members-tab-2-2.png" class="kg-image" alt="members-tab-2-2" width="600" height="400" loading="lazy"><figcaption>Вкладка «Members».</figcaption></figure><p>Перш ніж надіслати запрошення, вам потрібно ввести наступну інформацію:</p><ul><li>посаду;</li><li>електронну пошту або ім’я користувача Crowdin;</li><li>повідомлення.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/invite-members.png" class="kg-image" alt="invite-members" width="600" height="400" loading="lazy"><figcaption>Поділіться запрошенням.</figcaption></figure><p>Якщо ви натиснете на <code>Select role</code>, ви побачите це:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/select-role.png" class="kg-image" alt="select-role" width="600" height="400" loading="lazy"><figcaption>Виберіть посаду.</figcaption></figure><p>За замовчуванням вибрано посаду <code>Translator</code>.</p><p>Ви також побачите три поля, де можна вибрати, для яких мов ви хочете призначити посаду. Наприклад, ця людина може бути перекладачем для японської та перекладачем і редактором для іспанської.</p><p><strong><strong>💡 </strong>Важливо<strong>:</strong></strong> якщо ви залишите це поле порожнім, посада буде застосована до всіх мов, але ви також можете вибрати конкретні мови.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/select-role-copy.png" class="kg-image" alt="select-role-copy" width="600" height="400" loading="lazy"><figcaption>Виберіть конкретні мови.</figcaption></figure><p>Ми розглянемо посади трішки пізніше.</p><p>💡 <strong>Важливо<strong>:</strong></strong> посаду також можна змінити в розділі <code>Profile</code>.</p><p>Як тільки будете готові, натисніть на <code>Save</code>, і ви повернетесь до основних опцій. Натисніть на <code>Done</code>, щоб надіслати запрошення.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/invite-members.png" class="kg-image" alt="invite-members" width="600" height="400" loading="lazy"><figcaption>Надішліть запрошення.</figcaption></figure><h3 id="--43"><strong>Як надіслати посилання на запрошення</strong></h3><p>Ще один спосіб надіслати запрошення — за посиланням.</p><p>Просто натисніть на кнопку <code>Get Link</code> внизу, щоб скопіювати посилання та надіслати його людині, яку хочете запросити до свого проєкту.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/invite-members-link.png" class="kg-image" alt="invite-members-link" width="600" height="400" loading="lazy"><figcaption>Отримайте посилання на запрошення.</figcaption></figure><p>Зверху ви побачите повідомлення про підтвердження.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/link-copied-to-clipboard.png" class="kg-image" alt="link-copied-to-clipboard" width="600" height="400" loading="lazy"><figcaption>Повідомлення про підтвердження.</figcaption></figure><p>Це посилання можна вставити куди завгодно. Наприклад, в електронний лист.</p><h3 id="--44"><strong>Як керувати посиланнями на запрошення</strong></h3><p>Щоб керувати посиланнями на запрошення, натисніть на опцію <code>Manage Links</code>:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/manage-links.png" class="kg-image" alt="manage-links" width="600" height="400" loading="lazy"><figcaption>Кнопка «Manage Links».</figcaption></figure><p>Ви побачите список усіх згенерованих посилань на запрошення, коли вони були згенеровані та які посади були надані запрошеній особі.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/invitation-links.png" class="kg-image" alt="invitation-links" width="600" height="400" loading="lazy"><figcaption>Згенеровані посилання на запрошення.</figcaption></figure><p><strong><strong>💡 </strong>Важливо<strong>: </strong></strong>ви можете знову скопіювати їх, натиснувши на іконку посилання праворуч, або зробити їх неактивними, натиснувши на <code>Revoke link</code>.</p><p>Якщо ви натиснете на <code>Done</code>, то повернетеся до попереднього екрану, і зможете натиснути на <code>X</code> у верхньому куті, щоб закрити його.</p><!--kg-card-begin: html--><h3 id="посади">🔶 Посади</h3><!--kg-card-end: html--><p>Тепер поговоримо про різні посади, які можна призначити членам команди. Прочитаємо описи посад, надані в <a href="https://support.crowdin.com/modifying-project-participants-roles/">документації Crowdin</a>:</p><h3 id="owner-"><strong>Owner (власник)</strong></h3><blockquote>Людина, яка створила проєкт і має повний контроль над ним. Власник може запрошувати та керувати членами проєкту, створювати проєкти, завантажувати вихідні файли та файли перекладу до проєкту, налаштовувати інтеграції тощо.</blockquote><h3 id="manager-"><strong>Manager (менеджер)</strong></h3><blockquote>Має схожі права, як і власник проєкту, але не може керувати деякими ресурсами власника (наприклад, налаштовувати движки MT, налаштовувати користувацькі робочі процеси тощо) та видаляти проєкти.</blockquote><h3 id="language-coordinator-"><strong>Language Coordinator (координатор мови)</strong></h3><blockquote>Може керувати певними функціями проєкту лише в межах мов, до яких має доступ. Координатори мов можуть перекладати та затверджувати рядки, керувати членами команди та запитами на приєднання, генерувати звіти про проєкт, створювати завдання та попередньо перекладати вміст проєкту. На відміну від менеджерів, вони не мають доступу до інших налаштувань проєкту (наприклад, файлів проєкту, інтеграцій тощо).</blockquote><h3 id="developer-"><strong>Developer (розробник)</strong></h3><blockquote>Може завантажувати файли, редагувати текст для перекладу, підключати інтеграції та використовувати API. Не може керувати завданнями проєкту, членами команди та звітами.</blockquote><h3 id="proofreader-"><strong>Proofreader (редактор)</strong></h3><blockquote>Може перекладати та затверджувати рядки. Не має доступу до налаштувань проєкту.</blockquote><h3 id="translator-"><strong>Translator (перекладач)</strong></h3><blockquote>Може перекладати рядки та голосувати за переклади, додані іншими членами команди.</blockquote><h3 id="blocked-"><strong>Blocked (заблокований користувач)</strong></h3><blockquote>Не має доступу до проєкту.</blockquote><!--kg-card-begin: html--><h3 id="як-призначити-або-змінити-посаду">🔶 Як призначити або змінити посаду</h3><!--kg-card-end: html--><p>У вас є два варіанти, щоб призначити чи змінити посаду члена команди:</p><ul><li>ви можете вказати посаду у запрошенні;</li><li>ви можете вказати посаду на сторінці профілю цієї людини.</li></ul><h4 id="--45"><strong>Як встановити посаду у запрошенні</strong></h4><p>Ви можете вибрати посаду, коли надсилаєте запрошення новому члену команди.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/select-role.png" class="kg-image" alt="select-role" width="600" height="400" loading="lazy"><figcaption>Вкажіть посаду у запрошенні.</figcaption></figure><h4 id="--46"><strong>Як встановити посаду на сторінці профілю</strong></h4><p>Ви також можете перейти до вкладки <code>Permissions</code> на сторінці профілю цієї людини, щоб вибрати посади і мови, які ви хочете призначити.</p><p>Ось приклад з <a href="https://support.crowdin.com/modifying-project-participants-roles/#languages-permissions">документації Crowdin</a>:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/image-82.png" class="kg-image" alt="image-82" width="600" height="400" loading="lazy"><figcaption>Вкажіть посаду у вкладці «Permissions». Зображення з <a href="https://support.crowdin.com/modifying-project-participants-roles/#languages-permissions">документації Crowdin</a>.</figcaption></figure><p>Натисніть на кнопку <code>Save</code>, щоб зберегти зміни.</p><!--kg-card-begin: html--><h3 id="менеджери-проєкту">🔶 Менеджери проєкту</h3><!--kg-card-end: html--><p>Менеджери проєкту відіграють ключову роль для команди та проєкту. Вони можуть мати необмежений контроль над усім проєктом та допомагати координувати й призначати завдання іншим членам команди.</p><h3 id="--47"><strong>Як додати менеджера проєкту</strong></h3><p>Подивимося, як ви можете додати менеджера до свого проєкту. Ви можете призначити посаду менеджера, коли надсилаєте запрошення:</p><ul><li>перейдіть до свого проєкту;</li><li>перейдіть до вкладки <code>Members</code>;</li><li>натисніть на <code>Invite</code>.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/invite-button-4.png" class="kg-image" alt="invite-button-4" width="600" height="400" loading="lazy"><figcaption>Вкладка «Members».</figcaption></figure><p>Натисніть на <code>Translator</code>. Ви побачите всі можливі посади.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/select-role-manager-1.png" class="kg-image" alt="select-role-manager-1" width="600" height="400" loading="lazy"><figcaption>Виберіть посаду.</figcaption></figure><p>Виберіть <code>Manager</code>. Це надасть необмежений контроль над усім проєктом.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/manager-1.png" class="kg-image" alt="manager-1" width="600" height="400" loading="lazy"><figcaption>Посада «Manager».</figcaption></figure><p>Ще один спосіб додати менеджера — зі сторінки власного профілю:</p><ul><li>перейдіть до свого профілю;</li><li>перейдіть до вкладки <code>Managers</code>;</li><li>натисніть на <code>Add Manager</code>.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/managers-tab-profile-2.png" class="kg-image" alt="managers-tab-profile-2" width="600" height="400" loading="lazy"><figcaption>Кнопка «Add Manager».</figcaption></figure><p>Введіть ім’я або ім’я користувача менеджера, повідомлення, дозволи, які ви хочете надати, та проєкти, якими буде керувати цей менеджер.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/invite-manager-from-profile.png" class="kg-image" alt="invite-manager-from-profile" width="600" height="400" loading="lazy"><figcaption>Вікно «Invite Manager».</figcaption></figure><h3 id="--48"><strong>Редагування дозволів менеджера</strong></h3><p>На Crowdin також можна редагувати дозволи менеджера.</p><p>Для цього:</p><ol><li>Перейдіть до свого профілю.</li><li>Перейдіть до вкладки <code>Managers</code>. Ви побачите список менеджерів, доданих до проєкту.</li><li>Двічі натисніть на менеджера, дозволи якого хочете змінити.</li></ol><p>Ось приклад з <a href="https://support.crowdin.com/manager-permissions/#editing-manager-permissions">документації Сrowdin</a>:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/image-83.png" class="kg-image" alt="image-83" width="600" height="400" loading="lazy"><figcaption>Приклад вкладки «Managers». Зображення з <a href="https://support.crowdin.com/manager-permissions/#editing-manager-permissions">документації Сrowdin</a>.</figcaption></figure><p>4. Оновіть дозволи цього менеджера.</p><p>5. Натисніть на кнопку <code>Save</code>.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/edit-permissions.png" class="kg-image" alt="edit-permissions" width="600" height="400" loading="lazy"><figcaption>Зображення з <a href="https://support.crowdin.com/manager-permissions/#editing-manager-permissions">документації Сrowdin</a>.</figcaption></figure><h3 id="--49"><strong>Як видалити менеджера</strong></h3><p>Щоб видалити менеджера:</p><ul><li>перейдіть до свого профілю;</li><li>перейдіть до вкладки <code>Managers</code>;</li><li>виберіть менеджера, якого хочете видалити;</li><li>натисніть на <code>Remove</code>.</li></ul><h3 id="--50"><strong>Менеджер та редактор</strong></h3><p>Менеджери та редактори на Crowdin мають певні відмінності у своїх посадах і дозволах.</p><p>Команда Crowdin надала роз’яснення у <a href="https://support.crowdin.com/modifying-project-participants-roles/#qa">документації</a>:</p><blockquote><strong>Запитання:</strong> Я власник проєкту. Мені запрошувати менеджера чи редактора?<br><br><strong>Відповідь:</strong> Основна відмінність між менеджером та редактором полягає в наступному: крім затвердження перекладів, доданих перекладачами, менеджери також можуть запрошувати та видаляти членів команди, завантажувати вихідні файли та файли перекладу до проєкту, налаштовувати інтеграції тощо.<br><br>Якщо ви хочете мати члена команди, який матиме доступ до вищезазначених функцій, вам потрібно запрошувати менеджера. А якщо ви плануєте самостійно керувати проєктом, достатньо запросити редактора.</blockquote><!--kg-card-begin: html--><h3 id="завдання">🔶 Завдання</h3><!--kg-card-end: html--><p>Організація — ключ до успіху будь-якого проєкту, і Crowdin точно це знає. Саме тому вони ввели дуже корисні інструменти під назвою <code>Tasks</code>, щоб допомогти з організацією проєкту та координацією завдань серед членів команди.</p><p>За допомогою завдань ви можете призначати конкретні файли перекладачам та редакторам, встановлювати дати виконання, отримувати сповіщення, обговорювати завдання з іншими членами команди та навіть розділяти слова з одного файлу між різними членами команди.</p><p>Ви також можете відстежувати стан кожного завдання на візуальній дошці, де можна перетягувати завдання з одного стану в інший.</p><p>Розглянемо деталі.</p><h3 id="--51"><strong>Як створити нове завдання</strong></h3><p>Щоб створити нове завдання:</p><ul><li>перейдіть до свого проєкту;</li><li>натисніть на кнопку <code>Create Task</code>.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/tasks-tab-section-1.png" class="kg-image" alt="tasks-tab-section-1" width="600" height="400" loading="lazy"><figcaption>Завдання на Crowdin.</figcaption></figure><p>💡 <strong>Важливо<strong>:</strong></strong> завдання можна призначити лише до одного проєкту.</p><p>Після натискання на кнопку ви побачите форму, де можете ввести всі деталі нового завдання.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/new-task-1.png" class="kg-image" alt="new-task-1" width="600" height="400" loading="lazy"><figcaption>Створення нового завдання.</figcaption></figure><p>До деталей нового завдання належать:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/task-2.png" class="kg-image" alt="task-2" width="600" height="400" loading="lazy"><figcaption>Інформація про завдання (частина 1).</figcaption></figure><ul><li>назва;</li><li>опис;</li><li>тип (переклад чи редакція власними перекладачами або посередниками);</li><li>дедлайн (необов’язково);</li><li>рядки, призначені до завдання (всі рядки обраних файлів або тільки рядки, змінені протягом певного періоду).</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/task-3.png" class="kg-image" alt="task-3" width="600" height="400" loading="lazy"><figcaption>Інформація про завдання (частина 2).</figcaption></figure><ul><li>фільтр за мітками (мітки, які повинні мати рядки завдання);</li><li>виключити мітки (мітки, які не повинні мати рядки завдання);</li><li>ви можете опустити рядки, які вже належать до інших завдань, щоб уникнути повторень;</li><li>файли, які потрібно перекласти чи відредагувати;</li><li>цільові мови. Якщо завдання має більше однієї цільової мови, система створить завдання для кожної цільової мови.</li></ul><p>Щоб призначити членів команди до завдання для кожної цільової мови, натисніть на опцію <code>Assign</code> поруч з кожною мовою.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/assign-task-1.png" class="kg-image" alt="assign-task-1" width="600" height="400" loading="lazy"><figcaption>Кнопка «Assign».</figcaption></figure><p>Після натискання на <code>Assign</code> ви побачите такі опції:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/assign-members-1.png" class="kg-image" alt="assign-members-1" width="600" height="400" loading="lazy"><figcaption>Призначте членів команди.</figcaption></figure><ul><li>Виберіть користувачів, до яких хочете призначити завдання. Користувачів можна знайти за допомогою інструмента фільтрації;</li><li>якщо вам потрібно видалити користувача, просто натисніть на нього в списку справа. Ви можете очистити список, натиснувши на значок сміттєвого кошика.</li></ul><p>💡 <strong>Важливо<strong>:</strong></strong> ви також можете розділити файл, щоб призначити до нього декількох користувачів.</p><ul><li>Як тільки ви обрали всіх користувачів, натисніть на кнопку <code>Apply</code>.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/select-all-users.png" class="kg-image" alt="select-all-users" width="600" height="400" loading="lazy"><figcaption>Користувачі, обрані для завдання.</figcaption></figure><p>Ви побачите зображення профілю призначених членів команди у рядку відповідної мови.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/assigned-members-list-1.png" class="kg-image" alt="assigned-members-list-1" width="600" height="400" loading="lazy"><figcaption>Призначені члени команди.</figcaption></figure><p>Натисніть на <code>Create Task</code>, щоб створити нове завдання. Ви побачите інформаційну панель завдань з новим завданням для всіх мов, які ви обрали.</p><p>Я вибрала іспанську мову та призначила завдання собі:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/task-board-1.png" class="kg-image" alt="task-board-1" width="600" height="400" loading="lazy"><figcaption>Інформаційна панель «Tasks».</figcaption></figure><h3 id="--52"><strong>Інформаційна панель завдань</strong></h3><p>Прийшов час використати інформаційну панель завдань. Ця панель дуже корисна для перегляду всіх завдань проєкту та відстеження їхнього стану.</p><p>Ви одразу ж помітите, що завдання може мати три можливі стани:</p><ul><li>To Do;</li><li>In Progress;</li><li>Done.</li></ul><p><strong><strong>💡 </strong>Важливо<strong>:</strong></strong> менеджери проєкту можуть переміщати завдання з одного стану в інший, перетягуючи їх.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/task-board-1.png" class="kg-image" alt="task-board-1" width="600" height="400" loading="lazy"><figcaption>Інформаційна панель «Tasks».</figcaption></figure><p>Щоб побачити всі завдання конкретною цільовою мовою, просто натисніть на цю мову і ви побачите «картки» з відповідною інформацією.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/task-board-2-1.png" class="kg-image" alt="task-board-2-1" width="600" height="400" loading="lazy"><figcaption>Інформаційна панель «Tasks».</figcaption></figure><p><strong><strong>💡 </strong>Важливо<strong>:</strong></strong> якщо завдання призначено вам, ви побачите сіру зірочку біля його назви. Ви також можете шукати та фільтрувати завдання.</p><h3 id="--53"><strong>Як фільтрувати завдання</strong></h3><p>Ви можете переглянути завдання, призначені конкретному члену команди, за допомогою фільтрів:</p><ul><li>натисніть на <code>Filters</code>;</li><li>натисніть на <code>All users</code> (біля <code>Filter by</code>);</li><li>знайдіть ім’я користувача;</li><li>натисніть на ім’я користувача.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/filter-by-members-1.png" class="kg-image" alt="filter-by-members-1" width="600" height="400" loading="lazy"><figcaption>Фільтрування завдань.</figcaption></figure><p>💡 <strong>Важливо<strong>: </strong></strong>щоб очистити фільтр, натисніть на опцію <code>Clear filter</code> справа.</p><h3 id="--54"><strong>Деталі завдання</strong></h3><p>Деталі завдання — це базова інформація та структура завдання. Так ви можете побачити:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/Screenshot-2023-09-20-at-10.17.37-AM.png" class="kg-image" alt="Screenshot-2023-09-20-at-10.17.37-AM" width="600" height="400" loading="lazy"><figcaption>Завдання.</figcaption></figure><ul><li>чи завдання призначене вам (якщо так, є сіра зірочка);</li><li>номер завдання;</li><li>назву завдання;</li><li>дату створення;</li><li>чи завдання будуть перекладати/редагувати члени команди чи постачальники;</li><li>зображення профілів членів команд, до яких призначено завдання;</li><li>кількість слів;</li><li>кількість коментарів.</li></ul><p>Якщо натиснути на завдання, ви побачите детальнішу інформацію:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/detailed-task-view.png" class="kg-image" alt="detailed-task-view" width="600" height="400" loading="lazy"><figcaption>Деталі завдання.</figcaption></figure><h3 id="--55"><strong>Як додати коментарі до завдання</strong></h3><p>Прокрутіть вниз, щоб додати коментарі до завдання.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/detailed-task-view-2-copy-1.png" class="kg-image" alt="detailed-task-view-2-copy-1" width="600" height="400" loading="lazy"><figcaption>Додайте коментарі до завдання.</figcaption></figure><h3 id="--56"><strong>Як змінити стан завдання</strong></h3><p>З детальнішого перегляду завдання ви також зможете змінити стан завдання, просто натиснувши на відповідну кнопку:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/change-status-1.png" class="kg-image" alt="change-status-1" width="600" height="400" loading="lazy"><figcaption>Опції завдання.</figcaption></figure><p>Якщо ви зміните стан завдання за допомогою цих кнопок, ви також побачите зміни на основній панелі завдань, що буде еквівалентно перетягуванню в новий стан.</p><h3 id="--57"><strong>Як керувати завданнями</strong></h3><p>Якщо ви натиснете на завдання, щоб переглянути його деталі, а потім натиснете на три крапки у верхньому правому куті, щоб побачити більше опцій, ви зможете відредагувати, закрити та видалити завдання.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/edit-a-task-2.png" class="kg-image" alt="edit-a-task-2" width="600" height="400" loading="lazy"><figcaption>Більше опцій для керування завданнями.</figcaption></figure><h3 id="--58"><strong>Як редагувати завдання</strong></h3><p>Що ви побачите, якщо спробуєте відредагувати завдання:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/editing-a-task.png" class="kg-image" alt="editing-a-task" width="600" height="400" loading="lazy"><figcaption>Панель «Edit Task».</figcaption></figure><p>Це дуже схоже на те, що ми бачили, коли створювали завдання. Ви можете змінити призначені рядки, файли, дати і навіть скинути обсяг завдання та прогрес для призначених файлів.</p><h3 id="--59"><strong>Як закрити завдання</strong></h3><p>Щоб закрити завдання, натисніть на <code>Close</code>:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/edit-a-task-2.png" class="kg-image" alt="edit-a-task-2" width="600" height="400" loading="lazy"><figcaption>Більше опцій для керування завданнями.</figcaption></figure><h3 id="--60"><strong>Як переглянути всі закриті завдання</strong></h3><p>Щоб переглянути всі закриті завдання:</p><ul><li>перейдіть до свого проєкту;</li><li>перейдіть до вкладки <code>Tasks</code>;</li><li>виберіть <code>Closed</code> (біля <code>All</code>).</li></ul><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2023/09/closed-tasks.png" class="kg-image" alt="closed-tasks" width="600" height="400" loading="lazy"></figure><p>💡 <strong>Важливо<strong>:</strong></strong> <code>Done</code> та <code>Closed</code> трохи відрізняються. Завдання може мати стан <code>Done</code>, але не бути закритим. Якщо завдання має стан <code>Done</code>, ви побачите кнопку на картці для його закриття, як на зображенні нижче:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/close-task-when-done-1.png" class="kg-image" alt="close-task-when-done-1" width="600" height="400" loading="lazy"><figcaption>Кнопка «Close» для завдання, позначеного як завершене.</figcaption></figure><h3 id="--61"><strong>Як відкрити завдання заново</strong></h3><p>Якщо ви закрили завдання, а потім зрозуміли, що його потрібно відкрити заново, то:</p><ul><li>відкрийте деталі закритого завдання;</li><li>натисніть на три крапки справа, щоб переглянути додаткові опції;</li><li>виберіть <code>Reopen</code>.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/reopen-task.png" class="kg-image" alt="reopen-task" width="600" height="400" loading="lazy"><figcaption>Відкрийте завдання заново.</figcaption></figure><p>Тепер ви побачите відкрите завдання у стовпці <code>To do</code> на панелі завдань.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/todo-task-1.png" class="kg-image" alt="todo-task-1" width="600" height="400" loading="lazy"><figcaption>Завдання, відкрите заново.</figcaption></figure><h3 id="--62"><strong>Як видалити завдання</strong></h3><p>Щоб видалити завдання:</p><ul><li>відкрийте деталі завдання;</li><li>натисніть на три крапки;</li><li>виберіть <code>Delete</code>.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/delete-a-task.png" class="kg-image" alt="delete-a-task" width="600" height="400" loading="lazy"><figcaption>Видаліть завдання.</figcaption></figure><h3 id="--63"><strong>Як переглянути всі завдання, призначені мені</strong></h3><p>Якщо ви берете участь у проєкті, ви можете переглянути всі завдання, призначені вам, виконавши наступні кроки:</p><ul><li>перейдіть до свого профілю;</li><li>перейдіть до вкладки <code>To do</code>;</li><li>ви побачите всі завдання, призначені вам, і архівовані завдання.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/see-all-my-tasks-1.png" class="kg-image" alt="see-all-my-tasks-1" width="600" height="400" loading="lazy"><figcaption>Вкладка «To Do» на профілі.</figcaption></figure><p>💡<strong><strong> </strong>Важливо<strong>: </strong></strong>у верхній частині ви також знайдете поле пошуку для фільтрації завдань і опцію фільтрації завдань за проєктами.</p><p>Це основна інформація, яку ви побачите для кожного завдання:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/todo-tasks-profile.png" class="kg-image" alt="todo-tasks-profile" width="600" height="400" loading="lazy"><figcaption>Завдання у вкладці «To Do» на профілі.</figcaption></figure><ul><li>номер завдання;</li><li>стан завдання;</li><li>проєкт;</li><li>цільова мова;</li><li>кількість слів.</li></ul><p>Ви також побачите дві опції:</p><ul><li>відкрити редактор перекладу і почати працювати над завданням;</li><li>архівувати завдання.</li></ul><h3 id="--64"><strong>Важливі запитання щодо завдань</strong></h3><p><a href="https://support.crowdin.com/enterprise/tasks/#qa">У документації Crowdin</a> зазначено:</p><blockquote><strong>Запитання:</strong> Як оновлення вихідного файлу впливає на наявні завдання з перекладу та редагування?<br><br><strong>Відповідь:</strong> Після оновлення вихідного файлу список рядків, які містить завдання, буде оновлено наступним чином:<br><br>- рядки, видалені з вихідного файлу під час оновлення, будуть видалені із завдання;<br>- змінені рядки, позначені опцією «Keep Translations», з’являться в завданні зі зміненим текстом;<br>- нові додані рядки не вплинуть на завдання жодним чином.<br><br>Якщо вихідний файл буде відновлено до версії, що містить видалені рядки, вони знову з’являться в завданні.</blockquote><!--kg-card-begin: html--><h3 id="звіти">🔶 Звіти</h3><!--kg-card-end: html--><p>Звіти можуть бути дуже корисними для власника або менеджера проєкту, щоб розуміти поточний прогрес та активність команди.</p><p>Crowdin має функцію звітів, де можна перевірити стан свого проєкту. Ось звіт демопроєкту, з яким ми працювали:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/project-reports.png" class="kg-image" alt="project-reports" width="600" height="400" loading="lazy"><figcaption>Вкладка «Reports».</figcaption></figure><p>Щоб отримати звіт проєкту:</p><ul><li>перейдіть до свого проєкту;</li><li>перейдіть до вкладки <code>Reports</code>.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/Screenshot-2023-09-20-at-11.31.20-AM.png" class="kg-image" alt="Screenshot-2023-09-20-at-11.31.20-AM" width="600" height="400" loading="lazy"><figcaption>Звіт (частина 1).</figcaption></figure><p>За замовчуванням ви побачите стан проєкту, але за потреби можете переключитися на звіти про витрати.</p><p>Тут ви можете побачити деякі знімки екрана з типами даних, які можна аналізувати та візуалізувати за допомогою цих звітів:</p><ul><li>загальний розмір проєкту та кількість рядків для перекладу;</li><li>вихідна та цільова мови;</li><li>кількість членів проєкту;</li><li>кількість менеджерів;</li><li>кількість слів для перекладу;</li><li>кількість прихованих слів;</li><li>кількість повторюваних слів;</li><li>кількість перекладених слів;</li><li>кількість затверджених слів;</li><li>кількість нових членів команди;</li><li>кількість активних членів команди.</li></ul><p>Ви можете переглянути звіти з відповідним відсотковим збільшенням або зменшенням для обраного періоду часу.</p><p>Ви також знайдете діаграми активності перекладу з відповідними легендами.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/Screenshot-2023-09-20-at-11.34.02-AM.png" class="kg-image" alt="Screenshot-2023-09-20-at-11.34.02-AM" width="600" height="400" loading="lazy"><figcaption>Звіт (частина 2).</figcaption></figure><p>Ви знайдете діаграми активності редагування.</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2023/09/Screenshot-2023-09-20-at-11.34.11-AM.png" class="kg-image" alt="Screenshot-2023-09-20-at-11.34.11-AM" width="600" height="400" loading="lazy"></figure><p>А також діаграми активності вихідних рядків тощо.</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2023/09/Screenshot-2023-09-20-at-11.34.13-AM.png" class="kg-image" alt="Screenshot-2023-09-20-at-11.34.13-AM" width="600" height="400" loading="lazy"></figure><p>Ви також можете змінити одиницю виміру звіту, натиснувши на цю опцію:</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2023/09/report-unit.png" class="kg-image" alt="report-unit" width="600" height="400" loading="lazy"></figure><p>Ви можете вибрати:</p><ul><li>рядки;</li><li>слова;</li><li>символи без пробілів;</li><li>символи з пробілами.</li></ul><p>У <a href="https://support.crowdin.com/project-reports/?q=reports">документації Crowdin</a> ви можете знайти приклади діаграм активності перекладу, активності редагування та активності вихідних рядків:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/translation-activity-chart-1.png" class="kg-image" alt="translation-activity-chart-1" width="600" height="400" loading="lazy"><figcaption>Активність перекладу. Зображення з <a href="https://support.crowdin.com/project-reports/?q=reports">документації Crowdin</a>.</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/Screenshot-2023-09-20-at-11.41.30-AM.png" class="kg-image" alt="Screenshot-2023-09-20-at-11.41.30-AM" width="600" height="400" loading="lazy"><figcaption>Активність редагування. Зображення з <a href="https://support.crowdin.com/project-reports/?q=reports">документації Crowdin</a>.</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/Screenshot-2023-09-20-at-11.41.46-AM.png" class="kg-image" alt="Screenshot-2023-09-20-at-11.41.46-AM" width="600" height="400" loading="lazy"><figcaption>Активність вихідних рядків. Зображення з <a href="https://support.crowdin.com/project-reports/?q=reports">документації Crowdin</a>.</figcaption></figure><h3 id="--65"><strong>Звіт про найкращих членів команди</strong></h3><p>Команда — фундаментальна частина процесу локалізації. Наявність детального звіту про найвідданіших і найпродуктивніших членів команди завжди корисна.</p><p>Щоб створити звіт про найкращих членів команди:</p><ul><li>перейдіть до свого проєкту;</li><li>перейдіть до вкладки <code>Reports</code>;</li><li>натисніть на <code>Top Members</code>;</li><li>виберіть діапазон дат з календаря;</li><li>натисніть на <code>Generate</code>.</li></ul><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2023/09/top-members-report.png" class="kg-image" alt="top-members-report" width="600" height="400" loading="lazy"></figure><p>Ви побачите список найкращих членів команди з інформацією про:</p><ul><li>їхні цільові мови;</li><li>скільки рядків вони переклали;</li><li>цільові слова;</li><li>скільки рядків вони затвердили;</li><li>скільки голосів вони подали.</li></ul><p>Ви також можете експортувати звіт у форматах XLSX, CSV або JSON і відтворити або приховати конкретні стовпці.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/export-report-1.png" class="kg-image" alt="export-report-1" width="600" height="400" loading="lazy"><figcaption>Опції експорту.</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/show-or-hide-columns.png" class="kg-image" alt="show-or-hide-columns" width="600" height="400" loading="lazy"><figcaption>Відтворити або приховати стовпці.</figcaption></figure><!--kg-card-begin: html--><h3 id="бесіди-на-crowdin">🔶 Бесіди на Crowdin</h3><!--kg-card-end: html--><p>Спілкування є важливим для будь-якого успішного проєкту. Ви можете спілкуватись зі своєю командою безпосередньо на Crowdin за допомогою бесід.</p><p>За допомогою цієї функції ви можете спілкуватися з одним або декількома членами команди в приватному чаті. Кожна бесіда має тему, щоб ви могли легко їх знайти.</p><h3 id="--66"><strong>Як перейти до бесіди</strong></h3><p>Щоб перейти до бесіди:</p><p>Натисніть на відповідний значок у верхньому правому куті, поруч із зображенням профілю.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/conversation-button-1.png" class="kg-image" alt="conversation-button-1" width="600" height="400" loading="lazy"><figcaption>Кнопка «Conversations».</figcaption></figure><p>Перейдіть до <code>Create Conversation</code>.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/create-conversations-1.png" class="kg-image" alt="create-conversations-1" width="600" height="400" loading="lazy"><figcaption>Створення бесіди.</figcaption></figure><p>Ви можете знайти користувачів за їхнім іменем або іменем користувача, а також відфільтрувати користувачів за проєктом.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/filter-users.png" class="kg-image" alt="filter-users" width="600" height="400" loading="lazy"><figcaption>Фільтрація користувачів.</figcaption></figure><p>Ось приклад з <a href="https://support.crowdin.com/conversations/">документації Crowdin</a>:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/image-86.png" class="kg-image" alt="image-86" width="600" height="400" loading="lazy"><figcaption>Бесіда. Зображення з <a href="https://support.crowdin.com/conversations/">документації Crowdin</a>.</figcaption></figure><h3 id="--67"><strong>Як керувати бесідами та повідомленнями</strong></h3><p>Для бесід ви можете:</p><ul><li>змінювати тему для всіх користувачів у бесіді;</li><li>вимикати сповіщення, щоб не отримувати повідомлення;</li><li>додавати користувачів.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/image-87.png" class="kg-image" alt="image-87" width="600" height="400" loading="lazy"><figcaption>Приклад бесіди. Зображення з <a href="https://support.crowdin.com/conversations/">документації Crowdin</a>.</figcaption></figure><p>Для окремих повідомлень у бесіді ви можете:</p><ul><li>поділитися повідомленням у тій самій бесіді або в іншій;</li><li>позначити повідомлення як непрочитане;</li><li>редагувати свої повідомлення;</li><li>видаляти свої повідомлення;</li><li>скаржитися на спам.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/image-88.png" class="kg-image" alt="image-88" width="600" height="400" loading="lazy"><figcaption>Приклад керування повідомленнями. Зображення з <a href="https://support.crowdin.com/conversations/#messages">документації Crowdin</a>.</figcaption></figure><p>🎉 Чудово! Тепер ви знаєте найважливіші функції Crowdin для команд та організацій.</p><p>Розглянемо, як можна інтегрувати Crowdin з іншими сервісами та як встановити застосунки, щоб підвищити продуктивність.</p><!--kg-card-begin: html--><h2 id="інтеграції-та-інструменти-для-підвищення-продуктивності-на-crowdin">🔹 Інтеграції та інструменти для підвищення продуктивності на Crowdin</h2><!--kg-card-end: html--><p>Однією з ключових характеристик Crowdin є його здатність до інтеграцій. Ви можете приєднати свій проєкт до різних зовнішніх сервісів для імпорту та експорту файлів і перекладів за потреби.</p><h2 id="--68"><strong>Що таке інтеграція?</strong></h2><p>Інтеграція на Crowdin — це «зв’язок», який ви можете створити між своїм проєктом і зовнішнім сервісом для автоматичної синхронізації файлів між цими платформами.</p><p>У <a href="https://store.crowdin.com/">Crowdin Store</a> ви можете знайти понад 600 застосунків та інтеграцій, які можна додати до свого проєкту.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/Crowdin-store.png" class="kg-image" alt="Crowdin-store" width="600" height="400" loading="lazy"><figcaption>Crowdin Store.</figcaption></figure><p>Їх можна відфільтрувати за:</p><ul><li>колекціями;</li><li>категоріями;</li><li>партнерами;</li><li>перевірками QA.</li></ul><p>Щоб надати вам уявлення про типи застосунків та інтеграцій, які ви можете знайти, ось деякі з рекомендованих:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/featured-integrations.png" class="kg-image" alt="featured-integrations" width="600" height="400" loading="lazy"><figcaption>Рекомендовані застосунки та інтеграції.</figcaption></figure><p>Розглянемо деякі з них детальніше.</p><h3 id="-github"><strong>Інтеграція GitHub</strong></h3><p>Якщо ваш проєкт розміщений у репозиторії GitHub, <a href="https://store.crowdin.com/github">інтеграція з GitHub</a> може бути саме тим, що вам потрібно.</p><blockquote>Інтеграція Crowdin з GitHub синхронізує файли оригіналу і перекладу між вашим репозиторієм на GitHub та проєктом перекладу на Crowdin. Усі перекладені та затверджені файли автоматично надсилатимуться як запит на злиття до гілки l10n у репозиторії на GitHub.</blockquote><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/GitHub-integration.png" class="kg-image" alt="GitHub-integration" width="600" height="400" loading="lazy"><figcaption>Інтеграція GitHub.</figcaption></figure><p>Щоб дізнатися більше про інтеграцію, ви можете ознайомитися з<a href="https://www.youtube.com/watch?v=8baL6VWnnZg"> інструкцією</a> від Crowdin.</p><h3 id="github-crowdin-action"><strong>GitHub Crowdin Action</strong></h3><p>Якщо вам потрібно автоматично завантажувати та скачувати файли з репозиторію на GitHub до проєкту на Crowdin, ця дія може бути дуже корисною для вас.</p><p><a href="https://store.crowdin.com/github-action">GitHub Crowdin Action</a> може:</p><ul><li>завантажувати вихідні файли на Crowdin;</li><li>завантажувати переклади на Crowdin;</li><li>скачувати переклади з Crowdin;</li><li>створювати PR з перекладами.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/github-crowdin-action.png" class="kg-image" alt="github-crowdin-action" width="600" height="400" loading="lazy"><figcaption>GitHub Crowdin Action.</figcaption></figure><p>Щоб дізнатися більше про інтеграцію, перегляньте <a href="https://www.youtube.com/watch?v=5b7BMuCoKGg">інструкцію</a> від команди Crowdin.</p><h3 id="-google-drive"><strong>Інтеграція Google Drive</strong></h3><p>Google Drive дуже зручний для створення, розміщення та спільного використання документів. З інтеграцією Google Drive ви можете легко перекладати свої файли на Crowdin.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/google-drive-integration.png" class="kg-image" alt="google-drive-integration" width="600" height="400" loading="lazy"><figcaption>Інтеграція Google Drive.</figcaption></figure><p>Щоб дізнатися більше про інтеграцію, перегляньте <a href="https://www.youtube.com/watch?v=M_WbdDQmEP8">інструкцію</a> від команди Crowdin.</p><h3 id="--69"><strong>Асистент ШІ</strong></h3><p>Через популярність великих мовних моделей (LLM), штучний інтелект став дуже важливим інструментом для перекладу та локалізації.</p><p>Crowdin має дуже корисного <a href="https://store.crowdin.com/localization-ai">асистента ШІ</a>, якого ви можете встановити для допомоги вам та вашій команді. Він описується як:</p><blockquote>Чат-бот AI для перекладачів, побудований на API ChatGPT від OpenAI. Перша версія цього застосунка працює як копілот для перекладачів. (<a href="https://store.crowdin.com/localization-ai">джерело</a>)</blockquote><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/ai-assistant.png" class="kg-image" alt="ai-assistant" width="600" height="400" loading="lazy"><figcaption>Асистент ШІ.</figcaption></figure><p>Crowdin зазначає, що асистент ШІ має такі цікаві функції:</p><blockquote>Наш асистент ШІ має функцію інженерії запитів, що дозволяє перекладачам налаштувати запити перед початком проєкту. Таким чином вони можуть зручно змінювати контекст, підвищуючи точність і змістовність перекладів.</blockquote><p>Щоб дізнатися більше про інтеграцію, перегляньте <a href="https://www.youtube.com/watch?v=DSEu0iQanc4">інструкцію</a> від команди Crowdin.</p><h3 id="-visual-studio-code"><strong>Інтеграція Visual Studio Code</strong></h3><p>Якщо ви розробник, який працює з <a href="https://store.crowdin.com/visual-studio-code">Visual Studio Code</a>, то Crowdin потурбувався й про вас, оскільки команда розробила розширення для допомоги в перекладі вашого проєкту.</p><blockquote>Інтегруйте свої проєкти Visual Studio Code з Crowdin, щоб оптимізувати процес локалізації. <a href="https://marketplace.visualstudio.com/items?itemName=Crowdin.vscode-crowdin">Плагін IDE</a> дозволяє миттєво завантажити нові вихідні рядки до проєкту на Crowdin і скачати переклади. (<a href="https://store.crowdin.com/visual-studio-code">джерело</a>)</blockquote><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/visual-studio-code.png" class="kg-image" alt="visual-studio-code" width="600" height="400" loading="lazy"><figcaption>Інтеграція Visual Studio Code.</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/vs-code-extension.png" class="kg-image" alt="vs-code-extension" width="600" height="400" loading="lazy"><figcaption>Ринок розширень.</figcaption></figure><p>Ви можете дізнатися більше про розширення в <a href="https://marketplace.visualstudio.com/items?itemName=Crowdin.vscode-crowdin">офіційній документації</a> на ринку розширень Visual Studio Code.</p><h3 id="video-captions-translator"><strong>Video Captions Translator</strong></h3><p>Якщо вам або вашій організації потрібно перекладати відеосубтитри, Crowdin має інтеграцію і для цього. Вона називається <a href="https://store.crowdin.com/video-captions-translator">Video Captions Translator</a>.</p><blockquote>Професійні переклади для відеосубтитрів. Налаштуйте інтеграцію один раз, визначте свій процес локалізації та витрачайте менше часу на управління перекладами.</blockquote><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/video-captions-translator.png" class="kg-image" alt="video-captions-translator" width="600" height="400" loading="lazy"><figcaption>Video Captions Translator.</figcaption></figure><p>Щоб дізнатися більше про переклад субтитрів на YouTube з Crowdin, перегляньте <a href="https://www.youtube.com/watch?v=qq-lneH4ZCQ">інструкцію</a> від команди Crowdin.</p><h3 id="-google-sheets"><strong>Інтеграція Google Sheets</strong></h3><p>Якщо ви використовуєте <a href="https://store.crowdin.com/spreadsheet-crowdin">Google Sheets</a>, щоб керувати ключами локалізації, ви можете додати цю інтеграцію до свого проєкту для відтворення стовпців з відповідними полями на Crowdin, включно з:</p><ul><li>ключем;</li><li>вихідним текстом;</li><li>цільовими мовами (всі мови проєкту);</li><li>мітками;</li><li>контекстом;</li><li>максимальною довжиною перекладу.</li></ul><p>Зверніть увагу, що команда Crowdin повідомляє:</p><blockquote>Варто зазначити, що ця інтеграція синхронізує лише перший аркуш вашого документа Google Sheets.</blockquote><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/google-sheets.png" class="kg-image" alt="google-sheets" width="600" height="400" loading="lazy"><figcaption>Інтеграція Google Sheets.</figcaption></figure><p>Щоб дізнатися більше про інтеграцію з Google Sheets, перегляньте <a href="https://www.youtube.com/watch?v=7tOanqDiIJ8">інструкцію</a> від команди Crowdin.</p><h3 id="suggestions-diff-checker"><strong>Suggestions Diff Checker</strong></h3><p>Якщо ви коли-небудь шукали інструмент, який міг би допомогти вашим перекладачам і редакторам порівнювати переклади дуже легко за допомогою візуальних підказок, цей застосунок для вас.</p><p>Crowdin описує <a href="https://store.crowdin.com/diff-checker">Suggestions Diff Checker</a> як:</p><blockquote>Чудовий помічник для редакторів і перекладачів, який порівнює два переклади і показує різницю між ними.</blockquote><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/suggestions-diff-checker.png" class="kg-image" alt="suggestions-diff-checker" width="600" height="400" loading="lazy"><figcaption>Suggestions Diff Checker.</figcaption></figure><h3 id="proofreading-diff"><strong>Proofreading Diff</strong></h3><p>Редагування є дуже важливим завданням у процесі локалізації. Редактори можуть редагувати переклади та переконатися, що вони настільки точні, наскільки це можливо.</p><p>За допомогою застосунку <a href="https://store.crowdin.com/proofreading-diff">Proofreading Diff</a> ви можете:</p><blockquote>Відстежувати та аналізувати зміни, внесені під час процесу редагування. Цей інструмент може допомогти надати детальний відгук перекладачам про їхню роботу.</blockquote><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/proofreading-diff.png" class="kg-image" alt="proofreading-diff" width="600" height="400" loading="lazy"><figcaption>Proofreading Diff.</figcaption></figure><h3 id="video-preview"><strong>Video Preview</strong></h3><p>Переклад субтитрів без одночасного перегляду відео може бути досить складним, оскільки для точного перекладу важливо знати повний контекст.</p><p>Ось чому Crowdin створив застосунок для підвищення продуктивності перекладачів під назвою <a href="https://store.crowdin.com/preview-video">Video Preview</a>. Вони описують його як:</p><blockquote>Зручний інструмент, який може бути корисним для перекладу субтитрів. Він дозволяє вказати посилання на відео для кожного файлу з субтитрами та дозволяє перекладачам переглядати відео під час роботи над перекладом.</blockquote><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/video-preview.png" class="kg-image" alt="video-preview" width="600" height="400" loading="lazy"><figcaption>Video Preview.</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/image-96.png" class="kg-image" alt="image-96" width="600" height="400" loading="lazy"><figcaption>Video Preview в дії. Зображення з <a href="https://store.crowdin.com/preview-video">документації Crowdin</a>.</figcaption></figure><h3 id="glossary-editor"><strong>Glossary Editor</strong></h3><p>Це ще один корисний застосунок Crowdin для управління глосаріями.</p><p>Crowdin зазначає, що <a href="https://store.crowdin.com/glossary-edit-app">Glossary Editor</a>:</p><blockquote>Дозволяє додавати та змінювати терміни з глосаріїв безпосередньо в редакторі Crowdin.</blockquote><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/glossary-editor.png" class="kg-image" alt="glossary-editor" width="600" height="400" loading="lazy"><figcaption>Glossary Editor.</figcaption></figure><h3 id="project-duplicator"><strong>Project Duplicator</strong></h3><p>Вам коли-небудь хотілося використати проєкт як шаблон для іншого проєкту та заощадити час на початковому налаштуванні?</p><p>Якщо так, то <a href="https://store.crowdin.com/create-project-app">Project Duplicator</a> — саме те, що вам потрібно:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/project-duplicator.png" class="kg-image" alt="project-duplicator" width="600" height="400" loading="lazy"><figcaption>Project Duplicator.</figcaption></figure><p>За допомогою Project Duplicator ви можете копіювати такі налаштування:</p><ul><li>вихідна мова;</li><li>перевірки якості;</li><li>вихідні рядки;</li><li>переклади;</li><li>пам’ять перекладів;</li><li>сповіщення;</li><li>мапування мов.</li></ul><h3 id="-unity"><strong>Інтеграція Unity</strong></h3><p>Якщо ви розробник ігор і працюєте з Unity, ця інтеграція саме для вас.</p><p>За допомогою <a href="https://store.crowdin.com/unity">Unity Integration</a> ви можете:</p><blockquote>Перекладати матеріал у своїх таблицях і скачувати переклади для Unity.</blockquote><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/unity.png" class="kg-image" alt="unity" width="600" height="400" loading="lazy"><figcaption>Інтеграція Unity.</figcaption></figure><p>Ось офіційний знімок екрана плагіна Crowdin для Unity:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/image-101.png" class="kg-image" alt="image-101" width="600" height="400" loading="lazy"><figcaption>Зображення з <a href="https://store.crowdin.com/unity">документації Crowdin</a>.</figcaption></figure><h3 id="is-crowdin-slow-for-everyone-or-just-me"><strong>Is Crowdin slow for everyone or just me?</strong></h3><p>Так, це офіційна назва інструменту для підвищення продуктивності перекладачів на Crowdin! 🙂 Це віджет для вимірювання вашого інтернет-з’єднання.</p><p>Crowdin <a href="https://store.crowdin.com/internet-speed">зазначає</a>, що він може бути корисним, якщо вам потрібно:</p><blockquote>Миттєве визначення, чи повільна робота спричинена вашим інтернет-з’єднанням, чи це проблема продуктивності Crowdin.</blockquote><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/is-crowdin-slow.png" class="kg-image" alt="is-crowdin-slow" width="600" height="400" loading="lazy"><figcaption>Is Crowdin slow for everyone or just me?</figcaption></figure><p>Ось офіційний знімок екрана віджету:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/image-97.png" class="kg-image" alt="image-97" width="600" height="400" loading="lazy"><figcaption>Зображення з <a href="https://store.crowdin.com/internet-speed">документації Crowdin</a>.</figcaption></figure><h3 id="units-converter"><strong>Units Converter</strong></h3><p>Ви дізналися, що локалізація ширша за переклад. Одиниці є чудовим прикладом цього.</p><p>Коли ви локалізуєте продукт, який використовує одиниці довжини, площі, маси, об’єму, температури, швидкості тощо, вам знадобиться інструмент для швидкого перетворення.</p><p>Crowdin зазначає, що:</p><blockquote>Цей застосунок особливо зручний при локалізації для культур, які використовують різні системи вимірювання.</blockquote><p>Застосунок <a href="https://store.crowdin.com/units_converter">Units Converter</a> допоможе заощадити багато часу, оскільки ви можете мати його у своєму редакторі перекладу та швидко конвертувати одиниці, не зупиняючи процес локалізації, щоб перейти до іншого інструмента.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/units-converter.png" class="kg-image" alt="units-converter" width="600" height="400" loading="lazy"><figcaption>Units Converter.</figcaption></figure><p>Ось офіційний знімок екрана застосунку:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/image-98.png" class="kg-image" alt="image-98" width="600" height="400" loading="lazy"><figcaption>Застосунок Units Converter. Зображення з <a href="https://store.crowdin.com/units_converter">документації Crowdin</a>.</figcaption></figure><h3 id="screenshots-uploader"><strong>Screenshots Uploader</strong></h3><p>Візуальний контекст є важливим для написання якісних перекладів.</p><p>Застосунок <a href="https://store.crowdin.com/screenshots-uploader">Screenshots Uploader</a>:</p><blockquote>Полегшує отримання візуального контексту для вашої команди.</blockquote><p>Ви можете:</p><ul><li>дозволити перекладачам завантажувати знімки екрана;</li><li>вставляти знімки екрана з історії буфера обміну, не зберігаючи їх на своєму пристрої;</li><li>редагувати знімки екрана перед завантаженням за допомогою корисних інструментів, серед яких обрізання, збільшення тощо.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/screenshots-uploader.png" class="kg-image" alt="screenshots-uploader" width="600" height="400" loading="lazy"><figcaption>Screenshots Uploader.</figcaption></figure><h3 id="directory-notifications"><strong>Directory Notifications</strong></h3><p>Застосунок <a href="https://store.crowdin.com/directory-notification">Directory Notifications</a> корисний для власників та менеджерів проєктів, оскільки Crowdin буде:</p><blockquote>Надсилати сповіщення електронною поштою щоразу, коли каталог файлів у вашому проєкті Crowdin буде перекладений або відредагований.</blockquote><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/directory-notifications.png" class="kg-image" alt="directory-notifications" width="600" height="400" loading="lazy"><figcaption>Directory Notifications.</figcaption></figure><p>Ось офіційний знімок екрана застосунку:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/image-100.png" class="kg-image" alt="image-100" width="600" height="400" loading="lazy"><figcaption>Зображення з <a href="https://store.crowdin.com/directory-notification">документації Crowdin</a>.</figcaption></figure><h3 id="emoji-input-for-editor"><strong>Emoji Input for Editor</strong></h3><p>Емоджі чудові, правда ж? Всі ми згодні з цим. 😁</p><p>На щастя, Crowdin має <a href="https://store.crowdin.com/emoji">Emoji Input for Editor</a>. Його описують як:</p><blockquote>Застосунок зі списком емоджі для редактора на Crowdin для легкого доступу з функцією розширеного пошуку.</blockquote><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/emoji-input.png" class="kg-image" alt="emoji-input" width="600" height="400" loading="lazy"><figcaption>Emoji Input for Editor.</figcaption></figure><p>Ось офіційний знімок екрана застосунку:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/image-99.png" class="kg-image" alt="image-99" width="600" height="400" loading="lazy"><figcaption>Зображення з <a href="https://store.crowdin.com/emoji">документації Crowdin</a>.</figcaption></figure><h3 id="emoji-mismatch"><strong>Emoji Mismatch</strong></h3><p>А тепер розглянемо корисні автоматизовані перевірки якості (QA), доступні для облікових записів Crowdin Enterprise.</p><p>Перший — це <a href="https://store.crowdin.com/emoji-mismatch-custom">Emoji Mismatch</a>, який може допомогти нам знайти:</p><blockquote>Пропущені, зайві або невідповідні емоджі у перекладі.</blockquote><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/Emoji-Mismatch.png" class="kg-image" alt="Emoji-Mismatch" width="600" height="400" loading="lazy"><figcaption>Emoji Mismatch.</figcaption></figure><p>Зверніть увагу, що цей інструмент працює з Crowdin Enterprise.</p><h3 id="space-after-punctuation"><strong>Space After Punctuation</strong></h3><p>Це дуже корисний інструмент перевірки якості, який ви можете додати до свого проєкту.</p><p>Crowdin зазначає, що <a href="https://store.crowdin.com/space-after-punctuation-custom">Space After Punctuation</a>:</p><blockquote>Перевіряє, чи переклад містить пробіли після розділових знаків.</blockquote><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/space-after-punctuation.png" class="kg-image" alt="space-after-punctuation" width="600" height="400" loading="lazy"><figcaption>Space After Punctuation.</figcaption></figure><p>Зверніть увагу, що цей інструмент працює з Crowdin Enterprise.</p><h3 id="url-localization"><strong>URL Localization</strong></h3><p>Це інструмент перевірки якості, який ви також можете встановити для свого проєкту. За допомогою <a href="https://store.crowdin.com/url-localization-custom">URL localization</a> ви можете перевірити:</p><blockquote>Помилки в посиланнях у перекладі відповідно до конфігурації перевірки якості.</blockquote><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/url-localization.png" class="kg-image" alt="url-localization" width="600" height="400" loading="lazy"><figcaption>URL Localization.</figcaption></figure><p>Зверніть увагу, що цей інструмент працює з Crowdin Enterprise.</p><h3 id="duplicated-words"><strong>Duplicated Words</strong></h3><p>Це чудовий інструмент для редагування. Crowdin зазначає, що <a href="https://store.crowdin.com/duplicated-words-custom">Duplicated Words</a>:</p><blockquote>Видаляє друге повторюване слово в перекладі.</blockquote><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/duplicated-words.png" class="kg-image" alt="duplicated-words" width="600" height="400" loading="lazy"><figcaption>Duplicated words.</figcaption></figure><p>Зверніть увагу, що цей інструмент працює з Crowdin Enterprise.</p><h3 id="time-format-consistency"><strong>Time Format Consistency</strong></h3><p>Під час локалізації продукту також дуже важливо дотримуватись формату часу.</p><p>Crowdin <a href="https://store.crowdin.com/time-format-consistency">зазначає</a>, що:</p><blockquote>Цей інструмент перевіряє, чи узгоджені формати часу в оригіналі та перекладі. Він перевіряє формати часу у 24-годинному форматі (HH:MM).</blockquote><blockquote>Перевірка якості дає позитивний результат, якщо число та формат часу узгоджені між оригіналом й перекладом, і негативний результат, якщо є невідповідність.</blockquote><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/time-format-consistency.png" class="kg-image" alt="time-format-consistency" width="600" height="400" loading="lazy"><figcaption>Time Format Consistency.</figcaption></figure><p>Зверніть увагу, що цей інструмент працює з Crowdin Enterprise.</p><h3 id="camelcase-consistency-check"><strong>camelCase Consistency Check</strong></h3><p>Ця перевірка якості допомагає переконатися, що назви продуктів, брендів або інші назви, які повинні бути написані у верблюдячомуРегістрі, зберігають той самий формат у перекладі.</p><p>Crowdin <a href="https://store.crowdin.com/camelcase-check">зазначає</a>, що:</p><blockquote>Цей інструмент перевіряє, чи всі слова у верблюдячомуРегістрі з оригіналу точно зберігаються у перекладі.</blockquote><blockquote>Якщо слово у верблюдячомуРегістрі з оригіналу не знайдено у перекладі, то перевірка провалюється і повідомляє про це перекладача.</blockquote><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/camelcase-consistency-check.png" class="kg-image" alt="camelcase-consistency-check" width="600" height="400" loading="lazy"><figcaption>camelCase Consistency Check.</figcaption></figure><h3 id="--70"><strong>Ще більше застосунків та інтеграцій</strong></h3><p>Ми розглянули багато корисних застосунків та інтеграцій для локалізації. Вони можуть оптимізувати продуктивність вашої команди та допомогти з високоякісними перекладами.</p><p>Але це лише початок. Crowdin пропонує понад 600 застосунків та інтеграцій для вашого проєкту. Повний список можна знайти у <a href="https://store.crowdin.com/categories/all">Crowdin Store</a>.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/crowdin-store-2.png" class="kg-image" alt="crowdin-store-2" width="600" height="400" loading="lazy"><figcaption>Crowdin Store.</figcaption></figure><p>Якщо ви натиснете на них, ви знайдете більше інформації про те, що вони роблять, як вони це роблять, і, можливо, навіть знайдете вихідний код, який реалізує функціональність.</p><p>Ви також можете сортувати їх за релевантністю, назвою або датою.</p><p>Інструменти, потрібні для покращення продуктивності та надання високоякісних перекладів вашим користувачам, лише за один клік від вас.</p><!--kg-card-begin: html--><h2 id="як-перекласти-вебсайт-на-crowdin">🔹 Як перекласти вебсайт на Crowdin</h2><!--kg-card-end: html--><p>Чудова робота! Ми дійшли до дуже важливої частини посібника: як перекласти вебсайт на Crowdin.</p><h3 id="-crowdin-5"><strong>Як перекласти вебсайт на Crowdin</strong></h3><p>Існує три основні підходи для перекладу вебсайту на Crowdin:</p><ul><li>інтеграції;</li><li>JS Proxy Translator;</li><li>Crowdin In-context.</li></ul><p>Оскільки для веброзробки існує багато технологій, фреймворків та бібліотек, а процес інтернаціоналізації дуже технологічно специфічний, рекомендовано проаналізувати всі доступні опції та знайти ту, яка найкраще підходить для вашого конкретного випадку.</p><h3 id="--71"><strong>Інтеграції</strong></h3><p>Світ веброзробки надзвичайно різноманітний. Ми можемо створювати та розміщувати вебсайти на різних сервісах і розробляти їх за допомогою різних інструментів.</p><p>Щоб підтримувати цю різноманітність інструментів і сервісів, Crowdin розробив багато інтеграцій з зовнішніми платформами для імпорту тексту та надсилання перекладів до системи керування контентом (CMS) на ваш вибір.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/translate-website-1.png" class="kg-image" alt="translate-website-1" width="600" height="400" loading="lazy"><figcaption>Перекладайте вебсайт на Crowdin.</figcaption></figure><p>Наприклад, ви можете перекладати вебсайти з WordPress, Webflow, Joomla та інших схожих інструментів.</p><p><a href="https://crowdin.com/blog/2020/12/17/website-translation-with-crowdin">Crowdin</a> зазначає:</p><blockquote>З Crowdin ви не обмежені жодними конкретними сервісами для створення та розміщення вебсайтів.</blockquote><blockquote>Ми маємо не тільки 15 застосунків, включно з <a href="https://store.crowdin.com/wix-proxy-translator">Wix</a>, <a href="https://store.crowdin.com/ghost-org-proxy-translator">Ghost</a>, <a href="https://store.crowdin.com/squarespace-proxy-translator">Squarespace</a> та <a href="https://store.crowdin.com/webflow-proxy-translator">Webflow</a>, які забезпечують найкращий спосіб перекладу вебсайтів, але й окрему технологію <a href="https://store.crowdin.com/js-proxy-translator">JS Proxy</a>, яка допоможе з локалізацією будь-якого іншого вебсайту.</blockquote><p>Зокрема, ці технології:</p><ul><li>сканують вебсторінки;</li><li>виявляють матеріал, який можна перекласти (рядки);</li><li>витягують його у форматі, який можна локалізувати;</li><li>синхронізують переклади з оригіналом.</li></ul><p>Вам потрібно лише додати фрагмент JavaScript до свого коду, і ви будете готові почати перекладати.</p><p>Ось деякі застосунки, які ви можете встановити, щоб розпочати перекладати свій вебсайт на різних зовнішніх сервісах:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/apps-for-translation.png" class="kg-image" alt="apps-for-translation" width="600" height="400" loading="lazy"><figcaption>Список застосунків, які ви можете встановити, щоб <a href="https://crowdin.com/blog/2020/12/17/website-translation-with-crowdin">перекласти свій вебсайт</a>.</figcaption></figure><p>Якщо ваш репозиторій розміщено на GitHub або ви використовуєте GitHub Pages, ви також можете скористатися <a href="https://store.crowdin.com/github">інтеграцією GitHub</a> та <a href="https://store.crowdin.com/github-action">GitHub Crowdin Action</a> для автоматичної синхронізації файлів вашого вебсайту та перекладів.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/github-integrations.png" class="kg-image" alt="github-integrations" width="600" height="400" loading="lazy"><figcaption>Інтеграції GitHub.</figcaption></figure><h3 id="js-proxy-translator"><strong>JS Proxy Translator</strong></h3><p>Інтеграції дуже корисні, але Crowdin також має опцію, яка може допомогти з локалізацією будь-якого вебсайту, незалежно від сервісу, де він розміщений.</p><p>Цей підхід до локалізації вебсайтів на Crowdin називається <a href="https://store.crowdin.com/js-proxy-translator">JS Proxy Translator</a>.</p><p>Crowdin зазначає, що за допомогою цього проксі ви можете:</p><ul><li>синхронізувати оригінал та переклад;</li><li>локалізувати свій вебсайт з мінімальними зусиллями;</li><li>витягнути вихідний текст без будь-якого програмування;</li><li>перекласти метазаголовки та описи для SEO;</li><li>спланувати синхронізацію перекладів.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/js-proxy.png" class="kg-image" alt="js-proxy" width="600" height="400" loading="lazy"><figcaption>JS Proxy Translator.</figcaption></figure><p>Ось два офіційні знімки екрана, надані командою Crowdin, що показують кроки, необхідні для налаштування JS Proxy Translator.</p><p>Перший крок — імпортувати матеріал вебсайту. Вам потрібно лише ввести посилання на свій вебсайт та вказати, як ви хочете синхронізувати вихідні файли: вручну чи щоденно імпортувати їх автоматично.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/image-104.png" class="kg-image" alt="image-104" width="600" height="400" loading="lazy"><figcaption>JS Proxy Translator (частина 1). Зображення з <a href="https://store.crowdin.com/js-proxy-translator">документації Crowdin</a>.</figcaption></figure><p>Після того, як оригінал буде перекладено, ви можете опублікувати переклади на своєму вебсайті.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/image-105.png" class="kg-image" alt="image-105" width="600" height="400" loading="lazy"><figcaption>JS Proxy Translator (частина 2). Зображення з <a href="https://store.crowdin.com/js-proxy-translator">документації Crowdin</a>.</figcaption></figure><p>Команда Crowdin <a href="https://store.crowdin.com/js-proxy-translator">зазначає</a>, що:</p><blockquote>Перед тим, як синхронізувати вебсайт для перекладу, потрібно опублікувати весь його матеріал.</blockquote><p>Щоб дізнатися більше про те, як перекладати вебсайт за допомогою JS Proxy на Crowdin, перегляньте <a href="https://www.youtube.com/watch?v=q_0byyBDRGI">інструкцію</a> від команди Crowdin.</p><h3 id="in-context-for-web"><strong>In-Context for Web</strong></h3><p>Третій підхід до локалізації вебсайтів на Crowdin — переклад тексту безпосередньо на вебсайті або вебзастосунку за допомогою Crowdin In-Context.</p><p>Команда Crowdin <a href="https://store.crowdin.com/in-context">зазначає</a>, що:</p><blockquote>Інструмент Crowdin In-Context дозволяє перекладати матеріал безпосередньо у реальному вебзастосунку. Таким чином забезпечується найкраща якість перекладу.<br><br>Локалізація In-Context пов’язана з фактичним проєктом, створеним на Crowdin, у якому зберігаються файли для перекладу.<br><br>Цей інструмент робить так, що будь-який текст у вебзастосунку можна редагувати. Більше того, процес перекладу можна спостерігати в реальному часі. Таким чином можна перекладати навіть динамічну частину застосунку та рядки, які містять заповнювачі.</blockquote><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/crowdin-in-context.png" class="kg-image" alt="crowdin-in-context" width="600" height="400" loading="lazy"><figcaption>Crowdin In-Context.</figcaption></figure><p>Ви можете побачити його в дії <a href="https://demo.crowdin.com">тут</a>:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/demo-website.png" class="kg-image" alt="demo-website" width="600" height="400" loading="lazy"><figcaption>Демо Crowdin In-Context.</figcaption></figure><p>Якщо ви увійдете у свій обліковий запис Crowdin, ви побачите це:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/demo-website-2.png" class="kg-image" alt="demo-website-2" width="600" height="400" loading="lazy"><figcaption>Демо Crowdin In-Context.</figcaption></figure><p>Ви зможете натиснути на всі рядки на вебсайті, щоб перекласти їх, а коли збережете переклади, вони будуть синхронізовані з проєктом на Crowdin.</p><p><strong><strong>💡 </strong>Важливо<strong>:</strong></strong> щоб дізнатись більше про Crowdin In-Context, перегляньте <a href="https://www.youtube.com/watch?v=ktfw7UsW3qw">інструкцію</a> від команди Crowdin.</p><p>Це три різні підходи для перекладу вебсайту на Crowdin. Ви можете зробити величезну різницю для своєї команди, зробивши правильний вибір.</p><p>Тепер ви знаєте більше про найважливіші функції Crowdin, тому заглибимось у переклад freeCodeCamp як реальний приклад глобального проєкту локалізації, який підтримується чудовою спільнотою волонтерів.</p><!--kg-card-begin: html--><h2 id="переклад-freecodecamp">🔹 Переклад freeCodeCamp</h2><!--kg-card-end: html--><p>🎉 Вітаємо з досягненням цієї частини посібника! Це доводить, що ви дуже зацікавлені в освоєнні цих навичок.</p><p>Ви вже знаєте, як перекладати свій проєкт на Crowdin, тому подивимося, як дивовижна спільнота freeCodeCamp перекладає матеріал багатьма мовами світу.</p><p>Ми розглянемо це з точки зору потенційного волонтера, наголошуючи на тому, як перекладати наш матеріал на Crowdin.</p><h3 id="-freecodecamp"><strong>Правила участі в freeCodeCamp</strong></h3><p>З чого варто почати, якщо ви волонтер, який зацікавлений в перекладі?</p><p>Для початку прочитайте наші <a href="https://contribute.freecodecamp.org/how-to-translate-files/">настанови щодо внеску</a>. Це набір статей, до яких ви завжди можете звернутися, якщо у вас є будь-які запитання щодо того, як приєднатися або почати перекладати/редагувати.</p><p>Тут ви знайдете:</p><ul><li>огляд Crowdin;</li><li>з чого почати;</li><li>як вибрати проєкт і файл;</li><li>як перекладати проєкти, доступні на Crowdin;</li><li>як редагувати переклади;</li><li>найкращі практики перекладу та багато іншого!</li></ul><p>У <a href="https://contribute.freecodecamp.org/#/how-to-translate-files">цій статті</a> ви знайдете інформацію про те, як підготувати себе до участі.</p><p>Ми рекомендуємо:</p><ul><li>прочитати <a href="https://www.freecodecamp.org/ukrainian/news/yak-dopomohty-z-perekladom-freecodecamp-na-ridnu-movu/">це оголошення</a>, написане Квінсі Ларсоном, засновником freeCodeCamp;</li><li>приєднатися до <a href="https://forum.freecodecamp.org/c/contributors/3">форуму спільноти</a>;</li><li>приєднатися до <a href="https://discord.com/invite/PRyKn3Vbay">нашого чату в Discord</a>.</li></ul><p>У нашій <a href="https://contribute.freecodecamp.org/how-to-translate-files/">документації</a> також зазначено, що робота з невеликою командою може бути дуже корисною для підтримки мотивації:</p><blockquote>Завдяки Crowdin та іншим інструментам перекладати легко, але це однаково передбачає багато роботи.<br><br>Ми хочемо, щоб ви насолоджувалися внеском, який робите, але не вигорали та не втрачали інтерес.<br><br>Невелика група з 4-5 осіб — це хороші умови для початку. Згодом ви зможете залучити до команди ще більше друзів.</blockquote><p>Зараз до нашого проєкту на Crowdin додано 30+ найпоширеніших мов світу.</p><p>Деякі з них вже доступні на вебсайті freeCodeCamp. Вам просто потрібно вибрати їх зі спадного меню, щоб автоматично побачити нову мову.</p><p>Якщо ви не бачите свою мову в списку, документація також зазначає, що:</p><blockquote>Якщо ви хочете, щоб ми зарахували нову мову, радимо залучити до цього своїх друзів.<br><br>Якщо у вас є невелика група людей (принаймні 4-5), зацікавлених і відданих справі, ми можемо зв’язатись через дзвінок. Ми пояснимо всі деталі та ознайомимо з деякими інструментами й процесами.</blockquote><p>Після того, як ви закінчите читати цю частину, ви можете почати робити свій внесок.</p><p>Спочатку розглянемо різні посади, доступні для волонтерів freeCodeCamp.</p><h3 id="-freecodecamp-1"><strong>Посади в процесі локалізації freeCodeCamp</strong></h3><p>Ви можете допомогти з локалізацією freeCodeCamp на посаді перекладача або редактора.</p><p>Перекладачі допомагають перекладати файли навчальної програми, документацію та елементи інтерфейсу користувача freeCodeCamp (серед яких кнопки та мітки).</p><p>Редактори стежать за тим, щоб переклади були послідовними, уніфікованими за тоном і не містили поширених помилок.</p><h3 id="--72"><strong>Мовні керівники</strong></h3><p>Наші мовні керівники з радістю зустрінуть вас:</p><ul><li><a href="https://www.freecodecamp.org/news/author/farhanhasin/">Фархан Хасін Чоудхурі</a> (<a href="https://twitter.com/frhnhsin">@frhnhsin</a>) очолює бенгальську спільноту;</li><li><a href="https://www.freecodecamp.org/chinese/news/author/miyaliu/">Мія Лю</a> (<a href="https://twitter.com/miyaliu666">@miyaliu666</a>) очолює китайську спільноту;</li><li><a href="https://www.freecodecamp.org/italian/news/author/dario/">Даріо Ді Чілло</a> (<a href="https://twitter.com/_dariodc">@_DarioDC</a>) очолює італійську спільноту;</li><li><a href="https://www.freecodecamp.org/japanese/news/author/yoko/">Йоко Мацуда</a> (<a href="https://twitter.com/_sidemt">@_sidemt</a>) очолює японську спільноту;</li><li><a href="https://www.freecodecamp.org/korean/news/author/alison-yoon/">Алісон Юн</a> (<a href="https://twitter.com/aliyooncreative">@aliyooncreative</a>) очолює корейську спільноту;</li><li><a href="https://www.freecodecamp.org/portuguese/news/author/daniel/">Даніель Роса</a> (<a href="https://twitter.com/Daniel__Rosa">@Daniel__Rosa</a>) очолює португальську спільноту;</li><li><a href="https://www.freecodecamp.org/portuguese/news/author/nielda/">Ніелда Карла Гонсалвес де Мело</a> (<a href="https://twitter.com/NieldaKarla">@NieldaKarla</a>) очолює португальський канал на YouTube;</li><li><a href="https://www.freecodecamp.org/espanol/news/author/rafael/">Рафаель Ернандес</a> (<a href="https://twitter.com/rafaeldavish">@RafaelDavisH</a>) очолює іспанську спільноту та загальний процес локалізації;</li><li><a href="https://www.freecodecamp.org/espanol/news/author/estefaniacn">Естефанія Кассінгена Навоне</a> (<a href="https://twitter.com/EstefaniaCassN">@EstefaniaCassN</a>) очолює іспанський канал на YouTube;</li><li><a href="https://www.freecodecamp.org/news/author/larymak/">Гілларі Ньякунді</a> (<a href="https://twitter.com/larymak1">@larymak1</a>) очолює спільноту суахілі;</li><li><a href="https://www.freecodecamp.org/ukrainian/news/author/anastasiia/">Анастасія Буєвич</a> (<a href="https://twitter.com/anisiangel?s=21&amp;t=3yJxu9lXXPDyxB6WYhRsWg">@anisiangel</a>) очолює українську спільноту;</li><li><a href="https://www.freecodecamp.org/news/author/zaira/">Зайра Хіра</a> (<a href="https://twitter.com/hira_zaira">@hira_zaira</a>) очолює спільноту урду.</li></ul><h3 id="freecodecamp-crowdin"><strong>freeCodeCamp на Crowdin</strong></h3><p>Як я вже згадувала, для перекладу ми використовуємо платформу Crowdin. Це платформа для керування локалізацією, де окремі особи, команди та організації можуть ефективно локалізувати свій матеріал.</p><p>Щоб перейти до проєктів freeCodeCamp на Crowdin:</p><p>Перейдіть до <a href="https://translate.freecodecamp.org/">translate.freecodecamp.org</a> і ви побачите інформаційну панель з проєктами, над якими ми зараз працюємо:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/freecodecamp.png" class="kg-image" alt="freecodecamp" width="600" height="400" loading="lazy"><figcaption>freeCodeCamp.org на Crowdin.</figcaption></figure><p>У нас є три основні проєкти:</p><ul><li><a href="https://translate.freecodecamp.org/curriculum">Coding Curriculum</a></li><li><a href="https://translate.freecodecamp.org/learn-ui">Learn User Interface</a></li><li><a href="https://translate.freecodecamp.org/contributing-docs">Contributing Documentation</a></li></ul><p>У нас є й інші проєкти на Crowdin, серед яких News UI, Other Courses та Subtitles (Chinese).</p><h3 id="--73"><strong>Як вибрати проєкт та мову</strong></h3><p>Опинившись на нашій платформі для перекладу, вам потрібно буде вибрати проєкт. Скажімо, ви обрали переклад навчальної програми.</p><p>Вам просто потрібно натиснути на проєкт:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/freecodecamp-dashboard-crowdin.png" class="kg-image" alt="freecodecamp-dashboard-crowdin" width="600" height="400" loading="lazy"><figcaption>Натисніть на проєкт, з яким хочете допомогти.</figcaption></figure><p>Після цього ви потрапите до списку мов, доступних для перекладу.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/project-in-crowdin.png" class="kg-image" alt="project-in-crowdin" width="600" height="400" loading="lazy"><figcaption>Список доступних мов для проєкту «Coding Curriculum».</figcaption></figure><p>Для кожної мови ви побачите:</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2023/09/language.png" class="kg-image" alt="language" width="600" height="400" loading="lazy"></figure><ul><li>назву;</li><li>код;</li><li>рядок з двома можливими кольорами: блакитний колір означає прогрес перекладу, а зелений колір означає прогрес редагування;</li><li>ви також можете побачити їхні відповідні відсотки праворуч;</li><li>останнє число праворуч означає кількість слів, які потрібно перекласти.</li></ul><p>Праворуч ви знайдете інформаційну панель, яка містить:</p><ul><li>короткий опис проєкту;</li><li>вихідну мову (англійська);</li><li>кількість волонтерів;</li><li>кількість слів вихідною мовою;</li><li>дату створення проєкту та останню активність.</li></ul><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/project-in-crowdin.png" class="kg-image" alt="project-in-crowdin" width="600" height="400" loading="lazy"><figcaption>Перегляньте інформацію праворуч (сіра панель).</figcaption></figure><p>Час вибрати мову.</p><p>Якщо ви натиснете на мову, ви потрапите до структури проєкту з усіма файлами та папками, доступними для перекладу.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/spanish-modern-files-crowdin.png" class="kg-image" alt="spanish-modern-files-crowdin" width="600" height="400" loading="lazy"><figcaption>Структура проєкту «Coding Curriculum» для іспанської мови.</figcaption></figure><h4 id="--74"><strong>Як вибрати файл</strong></h4><p>Щоб перейти до редактора перекладу та почати перекладати, просто натисніть на назву файлу, який потребує перекладу.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/selecting-a-file.png" class="kg-image" alt="selecting-a-file" width="600" height="400" loading="lazy"><figcaption>Виберіть файл, який потрібно перекласти. Файл потребує перекладу, якщо рядок не повністю блакитний чи зелений.</figcaption></figure><p>Зверніть увагу, що ми зазвичай надаємо пріоритет перекладу перших трьох сертифікацій.</p><p>💡 <strong>Важливо<strong>:</strong></strong> якщо ви не увійшли до свого облікового запису Crowdin або досі не створили його, вам буде запропоновано зробити це, коли натиснете на файл.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/creating-an-account.png" class="kg-image" alt="creating-an-account" width="600" height="400" loading="lazy"><figcaption>Екран, де ви можете увійти до платформи перекладу freeCodeCamp. Ви також можете зареєструватися, щоб створити обліковий запис Crowdin.</figcaption></figure><p>Якщо ви реєструєтеся для нового облікового запису, вам потрібно буде ввести свою електронну пошту, вибрати ім’я користувача та пароль. Ви також отримаєте електронний лист від Crowdin, щоб підтвердити електронну адресу.</p><h3 id="--75"><strong>Редактор перекладу</strong></h3><p>Вітаємо! Тепер у вас є обліковий запис Crowdin, і ви можете почати перекладати вибраний файл.</p><p>Скажімо, ви натиснули на файл <code><strong><strong>build-a-drum-machine.md</strong></strong></code> і хочете перекласти його іспанською.</p><p>Ви побачите схожий знімок екрана:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/the-translator-ui.png" class="kg-image" alt="the-translator-ui" width="600" height="400" loading="lazy"><figcaption>Редактор перекладу. Це те, що ви побачите, коли натиснете на файл і увійдете до свого облікового запису Crowdin.</figcaption></figure><p>Якщо ви хочете дізнатися більше про роботу редактора, натисніть на <code>Next</code>, щоб побачити більше порад щодо інтерфейсу користувача. А якщо ви хочете закрити цю коротку інструкцію, просто натисніть на <code>X</code> у верхній частині.</p><p>Ось сім кроків короткої інструкції від Crowdin на випадок, якщо ви захочете зберегти їх:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/tutorial-step-2.png" class="kg-image" alt="tutorial-step-2" width="600" height="400" loading="lazy"><figcaption>Співпрацюйте в режимі реального часу.</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/tutorial-step-3.png" class="kg-image" alt="tutorial-step-3" width="600" height="400" loading="lazy"><figcaption>Використовуйте контекст, щоб створювати відповідні переклади.</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/tutorial-step-4.png" class="kg-image" alt="tutorial-step-4" width="600" height="400" loading="lazy"><figcaption>Переглядайте файли.</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/tutorial-step-5.png" class="kg-image" alt="tutorial-step-5" width="600" height="400" loading="lazy"><figcaption>Перекладайте з будь-якого пристрою.</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/tutorial-step-6.png" class="kg-image" alt="tutorial-step-6" width="600" height="400" loading="lazy"><figcaption>Переключайтеся на режим «Side-by-side», щоб швидше перевіряти переклади.</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/tutorial-step-7.png" class="kg-image" alt="tutorial-step-7" width="600" height="400" loading="lazy"><figcaption>Це все, друзі! Це сьомий і останній крок інструкції.</figcaption></figure><p>Після останнього кроку натисніть на <code>Close</code>, і ви опинитеся в редакторі перекладу.</p><p>Це місце, де відбувається магія. Ви можете почати перекладати, зберігати свої переклади, використовувати запропоновані переклади та адаптувати їх, а також голосувати за запропоновані переклади або проти них.</p><p>Щоб перекласти рядок, просто натисніть на нього або збережіть свій поточний переклад, щоб перейти до наступного рядка.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/translations-editor.png" class="kg-image" alt="translations-editor" width="600" height="400" loading="lazy"><figcaption>Редактор перекладу.</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/translations-editor-copy.png" class="kg-image" alt="translations-editor-copy" width="600" height="400" loading="lazy"><figcaption>Ось тут можна писати та зберігати свій переклад..</figcaption></figure><p>💡 <strong>Важливо<strong>: </strong></strong>ви також можете писати коментарі та позначати їх як проблеми, щоб повідомити про це команду freeCodeCamp та інших волонтерів.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/comments-sample.png" class="kg-image" alt="comments-sample" width="600" height="400" loading="lazy"><figcaption>Для окремих рядків можна писати коментарі та позначати їх як проблеми.</figcaption></figure><h3 id="--76"><strong>Як перекладати інтерфейс навчальної програми</strong></h3><p>Ми також маємо конкретні рекомендації для перекладу інтерфейсу навчальної програми.</p><p>У нашій <a href="https://contribute.freecodecamp.org/#/how-to-translate-files?id=translate-the-learn-interface">документації</a> зазначається:</p><blockquote>Наш інтерфейс <code>/learn</code> спирається на файли JSON, завантажені в плагін i18n для створення перекладеного тексту. Ця робота розділена між Crowdin і GitHub. </blockquote><p>Ми перекладаємо файли <code>intro.json</code> та <code>translations.json</code> на Crowdin. Якщо ви плануєте перекладати рядки з цих файлів, будь ласка, майте на увазі, що інформація про контекст, надана Crowdin, може бути дуже корисною.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/image-68.png" class="kg-image" alt="image-68" width="600" height="400" loading="lazy"><figcaption>Приклад контексту, наданого Crowdin (<a href="https://contribute.freecodecamp.org/#/how-to-translate-files?id=on-crowdin">джерело</a>).</figcaption></figure><p>Є певні файли, які ми не можемо завантажити на Crowdin (серед них <code>links.json</code>, <code>meta-tags.json</code>, <code>motivation.json</code> та <code>trending.json</code>). Ці файли зазвичай підтримуються мовними керівниками, але якщо ви хочете допомогти з ними, будь ласка, зверніться до <a href="https://contribute.freecodecamp.org/language-lead-handbook/">цієї статті</a>.</p><h3 id="--77"><strong>Як перекладати документацію</strong></h3><p>Документація є ще одним важливим ресурсом для freeCodeCamp, оскільки так ми можемо ділитися важливою інформацією, кроками та рекомендаціями з потенційними волонтерами.</p><p>Ми маємо певні рекомендації щодо перекладу нашої документації. Їх можна знайти у <a href="https://contribute.freecodecamp.org/how-to-translate-files/#translate-documentation">цій статті</a>, де розповідається про те, як перекладати внутрішні посилання в перекладеній документації.</p><h3 id="--78"><strong>Найкращі практики</strong></h3><p>Для будь-якого проєкту важливо дотримуватись найкращих практик. Ось деякі з <a href="https://contribute.freecodecamp.org/how-to-translate-files/#translation-best-practices">найкращих практик</a>, яких варто дотримуватися під час перекладу freeCodeCamp:</p><ul><li>не перекладайте вміст тегів <code>&lt;code&gt;</code>. Ці теги позначають текст, який знаходиться в коді та повинен бути англійською мовою;</li><li>не додавайте додаткового вмісту. Якщо вам здається, що завдання потребує змін в тексті або додаткової інформації, запропонуйте це через GitHub, що змінить англійський файл;</li><li>не змінюйте порядок вмісту.</li></ul><h3 id="--79"><strong>Як стати редактором</strong></h3><p>Якщо ви допомагатимете freeCodeCamp з локалізацією, ви також <a href="https://contribute.freecodecamp.org/how-to-proofread-files/#becoming-a-proofreader">можете стати редактором</a>.</p><p>Ми зазвичай надаємо доступ до редагування, якщо ви вже деякий час допомагали з локалізацією freeCodeCamp.</p><p>Якщо ви хочете стати редактором, будь ласка, зверніться до нас у <a href="https://discord.gg/PRyKn3Vbay">чаті</a>.</p><p>💡 <strong>Важливо<strong>: </strong></strong>редактори можуть затверджувати власні переклади. Однак ми радимо, щоб це робив хтось інший, щоб переконатися, що відсутні помилки.</p><h3 id="--80"><strong>Як редагувати переклади</strong></h3><p>Коли ви станете редактором, ви матимете спеціальні дозволи в редакторі перекладу. Ви зможете переглядати наявні переклади, редагувати і затверджувати їх.</p><p>Під час прийняття рішення ви повинні враховувати оцінки спільноти, визначені голосами «за» та «проти».</p><p>Коли ви затвердили рядок, то автоматизований процес, який ми налаштували за допомогою <a href="https://contribute.freecodecamp.org/how-to-proofread-files/#proofread-translations">інтеграції GitHub</a> на Crowdin, додасть його до нашої платформи:</p><blockquote>Затвердження рядка в режимі редагування позначить його як завершений, і цей рядок буде завантажений під час наступного завантаження з Crowdin на GitHub.</blockquote><h3 id="-discord"><strong>Чат для перекладачів на Discord</strong></h3><p>Якщо у вас є якісь запитання або ви хочете допомогти з перекладом, ви можете приєднатися до нашого <a href="https://discord.com/invite/PRyKn3Vbay">чату для перекладачів на Discord</a>.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2023/09/discord-chat-room.png" class="kg-image" alt="discord-chat-room" width="600" height="400" loading="lazy"><figcaption>Наш чат на Discord.</figcaption></figure><p>Після створення облікового запису та приєднання до серверу ви побачите привітальне повідомлення і канал з локалізації <code>#start-here</code>.</p><p>Чудова робота! Тепер ви готові почати перекладати та зробити власний внесок у локалізацію freeCodeCamp.</p><h2 id="--81"><strong>Висновок</strong></h2><p>Вітання! Ми розглянули багато тем, пов’язаних із локалізацією, і тепер ви знаєте більше про те, як локалізувати матеріали та платформи, щоб зацікавити користувачів у всьому світі.</p><p>Деякі ключові висновки:</p><ul><li>у глобалізованому світі, де інформація доступна всього в декілька натискань, локалізація продуктів, послуг і платформ є важливою, якщо ваша мета — зацікавити користувачів у всьому світі. Адаптація до різних культур відкриє двері для вашої команди, організації та користувачів у всьому світі;</li><li>Crowdin — це потужна платформа для управління локалізацією, зосереджена на наданні вам та вашій команді інструментів, необхідних для локалізації продуктів і платформ, які постійно розвиваються;</li><li>локалізація freeCodeCamp є прикладом глобальної спільноти, об’єднаної спільною метою: забезпечити безоплатний доступ до освіти у всьому світі без мовних бар’єрів. Ви також можете приєднатися.</li></ul><p>Сподіваюся, вам сподобався цей посібник про основи локалізації. Тепер ви готові почати локалізувати свою платформу. Зараз саме час почати. Локалізація може бути саме тим, що вам потрібно для досягнення глобальної спільноти користувачів.</p> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Типи зображень: розширення .jpeg, .svg та .png ]]>
                </title>
                <description>
                    <![CDATA[ Під час роботи зі зображеннями важливо розуміти різні типи файлів. Який формат найкраще підходить для певної програми? У цьому посібнику ми пояснимо найпоширеніші типи зображень і в яких випадках їх потрібно використовувати. Зауважте, що це коротка нетехнічна стаття. Якщо ви хочете дізнатися більше про покращення продуктивності, див. посібники з оптимізації ]]>
                </description>
                <link>https://www.freecodecamp.org/ukrainian/news/typy-zobrazhen-rozshyrennya-jpeg-svg-ta-png/</link>
                <guid isPermaLink="false">669675c211086e03fcfcdb69</guid>
                
                    <category>
                        <![CDATA[ стиснення зображень ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Anastasiia Buievych ]]>
                </dc:creator>
                <pubDate>Tue, 16 Jul 2024 18:35:26 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/ukrainian/news/content/images/2024/07/timon-klauser-3MAmj1ZKSZA-unsplash.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p data-test-label="translation-intro">
        <strong>Оригінальна публікація:</strong> <a href="https://www.freecodecamp.org/news/image-file-types-picture-format-extensions-jpeg-gif-png-svg-tiff/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">Image File Types – The .jpeg, .svg, and .png Picture Format Extensions Explained</a>
      </p><p>Під час роботи зі зображеннями важливо розуміти різні типи файлів. Який формат найкраще підходить для певної програми?</p><p>У цьому посібнику ми пояснимо найпоширеніші типи зображень і в яких випадках їх потрібно використовувати.</p><p>Зауважте, що це коротка нетехнічна стаття. Якщо ви хочете дізнатися більше про покращення продуктивності, див. <a href="https://www.freecodecamp.org/news/tag/image-optimization/">посібники з оптимізації зображень вебсайту</a> (англійською мовою).</p><p>Спочатку швидко розглянемо, як працює стиснення зображень.</p><h2 id="-"><strong>Безвтратне та втратне стиснення: яка між ними різниця?</strong></h2><p>Безвтратне стиснення — це клас алгоритмів стиснення даних, які дозволяють ідеально відновити початкові дані зі стиснених даних.</p><p>Існує лише обмежена можливість стиснення файлу, перед тим як ви почнете викидати <em>частину</em> інформації, яку містить цей файл.</p><p>Тут з’являється втратне стиснення. «Втратне», оскільки воно втрачає частину інформації.</p><p>Втратне стиснення дозволяє відновити тільки приблизні дані початкових даних (хоча зазвичай зі значно покращеними рівнями стиснення).</p><p>Нижче ви будете бачити терміни «безвтратний» і «втратний», коли ми описуватимемо різні формати зображень.</p><h2 id="-jpeg-jpg-jpeg-"><strong>Що таке формат JPEG? (розширення .jpg та .jpeg)</strong></h2><p>JPEG — найпоширеніший тип файлу для зображень. Він найкраще підходить для фотографій та інших зображень з багатьма кольорами.</p><p>До речі, JPEG означає «Joint Photographic Experts Group» (об’єднана група експертів у галузі фотографії) — команду, яка розробила цей стандарт.</p><p>Файли JPEG менші за інші типи файлів, тому їх легко завантажувати та обмінюватися ними.</p><h3 id="-jpeg-"><strong>Чи можуть JPEG бути прозорими або мати прозорий фон?</strong></h3><p>Ні. На відміну від GIF, SVG та PNG, JPEG не можуть мати прозорого фону. Для цього його потрібно перетворити в інший формат файлу.</p><h3 id="-jpeg-jpg-"><strong>.jpeg та .jpg — одне і те ж?</strong></h3><p>Так. Єдина різниця в тому, що традиційно розширення файлів складаються з трьох символів. <code>.jpg</code> — це скорочена форма <code>.jpeg</code>.</p><h2 id="-png-png-png-"><strong>Що таке PNG? Формат PNG (розширення .png)</strong></h2><p>PNG — це формат безвтратного стиснення для цифрових зображень. PNG був створений як удосконалена заміна GIF. Він став найпоширенішим форматом безвтратного стиснення зображень у мережі.</p><p>PNG — це тип файлу, який найкраще використовувати для зображень з прозорістю (наприклад, для логотипів). Файли PNG зазвичай більші за JPEG, тому вони не ідеальні для великих зображень.</p><p>PNG можуть мати прозорий фон.</p><h2 id="-gif-gif-gif-"><strong>Що таке GIF? Формат GIF (розширення .gif)</strong></h2><p>Формат GIF — це ще один тип зображення, який часто використовується в інтернеті. Файли GIF зазвичай менші за інші типи зображень, що робить їх ідеальними для використання в мережі.</p><p>GIF можна використовувати для статичних зображень. Проте частіше їх асоціюють з анімаціями — серією зображень, які автоматично відтворюються. Наприклад, ось GIF суспільного надбання:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2022/04/Globespin.gif" class="kg-image" alt="Globespin" width="600" height="400" loading="lazy"><figcaption>Гіфка суспільного надбання з Землею, яка обертається</figcaption></figure><p>Це всього лише серія зображень, які відтворюються без перестанку.</p><p>Зверніть увагу, що GIF також можуть мати прозорий фон.</p><h3 id="-gif"><strong>Як вимовляти GIF?</strong></h3><p>Засновник формату GIF — Стів Вілхіте — сказав, що він каже «джіф» як у назві арахісової пасти «Jif».</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2022/04/6398248857_42ff8de345_h-1.jpeg" class="kg-image" alt="6398248857_42ff8de345_h-1" width="600" height="400" loading="lazy"><figcaption>Арахісова паста Jif. Creative Commons, автор: Brian Cantoni.</figcaption></figure><p>Проте майже всі англомовні розробники, яких я знаю, кажуть «гіф», і я вважаю, що це буде найпопулярнішою вимовою й надалі.</p><figure class="kg-card kg-embed-card kg-card-hascaption"><iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="" title="X Post" src="https://platform.twitter.com/embed/Tweet.html?creatorScreenName=ossia&amp;dnt=false&amp;embedId=twitter-widget-0&amp;features=eyJ0ZndfdGltZWxpbmVfbGlzdCI6eyJidWNrZXQiOltdLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X2ZvbGxvd2VyX2NvdW50X3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9iYWNrZW5kIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19yZWZzcmNfc2Vzc2lvbiI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfZm9zbnJfc29mdF9pbnRlcnZlbnRpb25zX2VuYWJsZWQiOnsiYnVja2V0Ijoib24iLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X21peGVkX21lZGlhXzE1ODk3Ijp7ImJ1Y2tldCI6InRyZWF0bWVudCIsInZlcnNpb24iOm51bGx9LCJ0ZndfZXhwZXJpbWVudHNfY29va2llX2V4cGlyYXRpb24iOnsiYnVja2V0IjoxMjA5NjAwLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X3Nob3dfYmlyZHdhdGNoX3Bpdm90c19lbmFibGVkIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19kdXBsaWNhdGVfc2NyaWJlc190b19zZXR0aW5ncyI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdXNlX3Byb2ZpbGVfaW1hZ2Vfc2hhcGVfZW5hYmxlZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdmlkZW9faGxzX2R5bmFtaWNfbWFuaWZlc3RzXzE1MDgyIjp7ImJ1Y2tldCI6InRydWVfYml0cmF0ZSIsInZlcnNpb24iOm51bGx9LCJ0ZndfbGVnYWN5X3RpbWVsaW5lX3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9mcm9udGVuZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9fQ%3D%3D&amp;frame=false&amp;hideCard=false&amp;hideThread=false&amp;id=1011823951167750144&amp;lang=en&amp;origin=https%3A%2F%2Fwww.freecodecamp.org%2Fnews%2Fimage-file-types-picture-format-extensions-jpeg-gif-png-svg-tiff%2F&amp;sessionId=5d7f71ed694dc1d338a32299bc25b1de48ec727c&amp;siteScreenName=freecodecamp&amp;theme=light&amp;widgetsVersion=2615f7e52b7e0%3A1702314776716&amp;width=550px" data-tweet-id="1011823951167750144" style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size-adjust: inherit; font-kerning: inherit; font-variant-alternates: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-position: inherit; font-variant-emoji: inherit; font-feature-settings: inherit; font-optical-sizing: inherit; font-variation-settings: inherit; font-size: 22px; vertical-align: middle; position: static; visibility: visible; width: 551px; height: 339px; display: block; flex-grow: 1;" loading="lazy"></iframe><figcaption>Опитування шоу «The Tonight Show», де 73,7% з 5 767 респондентів відповіли, що вимовляють GIF як «гіф».</figcaption></figure><h2 id="-tiff-tiff-tif-"><strong>Що таке TIFF? Формат TIFF (розширення .tif)</strong></h2><p>TIFF — це тип файлу, який найкраще використовувати для високоякісних зображень, які потребують редагування. Файли TIFF великі, тому вони не підходять для обміну в інтернеті.</p><p>Використовуйте TIFF, якщо якість важливіша за розмір файлу. На практиці, особливо при роботі зі зображеннями в інтернеті, найкращий варіант — це PNG.</p><h2 id="-svg-svg-svg-"><strong>Що таке SVG? Формат SVG (розширення .svg)</strong></h2><p>SVG — це Scalable Vector Graphic (масштабована векторна графіка). Це означає, що графіка може масштабуватися до будь-якого розміру без втрати якості.</p><p>На відміну від усіх інших форматів, які ми вже обговорили, файли SVG є векторними (JPEG, PNG, GIF та TIFF є растровими файлами).</p><p>Це означає, що файли SVG можна масштабувати до будь-якого розміру без втрати якості, а растрові файли втрачатимуть якість.</p><p>Файли SVG можна редагувати за допомогою програмного забезпечення для векторного редагування (або просто вручну оновлювати координати та кольори графіки). Їх можна редагувати лише за допомогою програмного забезпечення для растрового редагування.</p><p>Ось приклад файлу SVG з <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started">Mozilla Developer Network</a>. Так виглядає SVG у формі коду XML:</p><pre><code class="language-xml">&lt;svg version="1.1"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg"&gt;

  &lt;rect width="100%" height="100%" fill="red" /&gt;

  &lt;circle cx="150" cy="100" r="80" fill="green" /&gt;

  &lt;text x="150" y="125" font-size="60" text-anchor="middle" fill="white"&gt;SVG&lt;/text&gt;

&lt;/svg&gt;</code></pre><p>Цей простий код відтворює таке зображення:</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2022/04/example-svg-file.png" class="kg-image" alt="example-svg-file" width="600" height="400" loading="lazy"><figcaption>Червоний прямокутник із зеленою крапкою та білими літерами SVG.</figcaption></figure><p>Зазвичай файли SVG менші за файли PNG, оскільки містять лише дані, необхідні для відтворення зображення, а файли PNG містять дані для всього зображення.</p><p>Файли SVG також можна анімувати за допомогою інструменту під назвою SMIL. Тобто вони можуть служити як просторові файли GIF. А якщо ви дійсно відважні, то можете програмувати SVG.</p><h2 id="jpeg-vs-png-"><strong>JPEG vs PNG: що краще для мережі?</strong></h2><p>У майбутньому мережа може виглядати по-іншому, оскільки ми вводимо все більше оптоволоконних кабелів, а високошвидкісний інтернет через супутник стає більш поширеним.</p><p>Наразі я рекомендую використовувати JPEG для більшості зображень.</p><p>Якщо у вас є логотип компанії або дуже важлива фотографія, де важлива якість, найкращий варіант — PNG.</p><p>Для логотипів я рекомендую використовувати SVG, оскільки це розширення безмежно масштабується і має дуже компактний розмір.</p><h2 id="--1"><strong>Сподіваюся, ви багато чого дізналися про типи зображень.</strong></h2><p>І сподіваюся, це було корисно. Якщо ви хочете дізнатися більше про програмування і технології, спробуйте <a href="https://www.freecodecamp.org/ukrainian/learn/">основну навчальну програму freeCodeCamp</a>. Вона безоплатна.</p> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Властивості CSS: пояснення max-width, min-width, max-height та min-height з прикладами ]]>
                </title>
                <description>
                    <![CDATA[ Якщо ви створюєте вебсайт, важливо зробити його адаптивним. Деколи важко зробити так, щоб вебсайт мав хороший вигляд на екранах різного розміру. Вам доведеться керувати шириною або висотою елементів, а також вказувати різні розміри за допомогою медіазапитів, що не завжди просто. Хоча відносні одиниці (наприклад, відсотки) можуть бути корисними в деяких ]]>
                </description>
                <link>https://www.freecodecamp.org/ukrainian/news/vlastyvosti-css-poyasnennya-max-width-min-width-max-height-ta-min-height-z-prykladamy/</link>
                <guid isPermaLink="false">66857a3fcfd96d04031a3b63</guid>
                
                    <category>
                        <![CDATA[ CSS ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Anastasiia Buievych ]]>
                </dc:creator>
                <pubDate>Sat, 06 Jul 2024 03:20:00 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/ukrainian/news/content/images/2024/07/pexels-scott-webb-1544944.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p data-test-label="translation-intro">
        <strong>Оригінальна публікація:</strong> <a href="https://www.freecodecamp.org/news/css-properties-examples/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">CSS Properties – Max-width, Min-width, Max-height, and Min-height Explained with Examples</a>
      </p><p>Якщо ви створюєте вебсайт, важливо зробити його адаптивним.</p><p>Деколи важко зробити так, щоб вебсайт мав хороший вигляд на екранах різного розміру. Вам доведеться керувати шириною або висотою елементів, а також вказувати різні розміри за допомогою медіазапитів, що не завжди просто.</p><p>Хоча відносні одиниці (наприклад, відсотки) можуть бути корисними в деяких випадках, вони можуть призвести до проблем.</p><p>Але не хвилюйтесь: такі властивості, як max-width та min-width, прийдуть вам на допомогу. Ці властивості дозволяють уникнути використання медіазапитів для деяких адаптивних завдань.</p><p>У цій статті ви дізнаєтеся, що таке max-width, min-width, max-height і min-height та як їх використовувати.</p><h2 id="-max-width"><strong>Властивість max-width</strong></h2><p>Властивість max-width дозволяє вказати максимальну ширину елемента. Це означає, що елемент може збільшуватися в ширину до досягнення певної <a href="https://www.freecodecamp.org/ukrainian/news/vlastyvosti-css-poyasnennya-max-width-min-width-max-height-ta-min-height-z-prykladamy/www.freecodecamp.org/ukrainian/news/odynytsi-css-em-rem-vh-vw-ta-inshi/">абсолютної або відносної одиниці</a>, після чого його ширина має фіксуватися.</p><p>Ось про що я говорю:</p><p>Припустимо, що ми встановили ширину елемента на <strong>80%</strong> ширини вікна перегляду. Якщо ширина вікна перегляду становить <strong>375px</strong>, то елемент матиме ширину <strong>300px</strong>, що є доволі хорошим показником.</p><p>(80/100) * 375 = 300px</p><p>Але якщо у нас ширше вікно перегляду, наприклад, <strong>1300px</strong>, тоді наш елемент матиме ширину <strong>1040px</strong>.</p><p>(80/100) * 1300 = 1040px</p><p>Саме тут допоможе властивість max-width. Якщо ви використовуєте відносні одиниці (наприклад, відсотки), то встановлена властивість max-width дозволить елементу продовжувати збільшуватися в ширину, поки він не досягне вказаного значення.</p><p>Ось приклад:</p><figure class="kg-card kg-embed-card"><iframe id="cp_embed_mdmeEOV" src="https://codepen.io/D_kingnelson/embed/preview/mdmeEOV?default-tabs=css%2Cresult&amp;height=300&amp;host=https%3A%2F%2Fcodepen.io&amp;slug-hash=mdmeEOV" title="max-width-example" scrolling="no" frameborder="0" height="300" allowtransparency="true" class="cp_embed_iframe" loading="lazy" style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size-adjust: inherit; font-kerning: inherit; font-variant-alternates: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-position: inherit; font-variant-emoji: inherit; font-feature-settings: inherit; font-optical-sizing: inherit; font-variation-settings: inherit; font-size: 22px; vertical-align: middle; width: 720px; overflow: hidden;"></iframe></figure><p>Зверніть увагу, що розмір картки ніколи не перевищує <strong>350px</strong>. Так працює max-width. Це дозволяє картці рости на менших екранах.</p><p>Якщо ширина менша за 350px, вона займає 80% від поточного розміру екрана. Але як тільки ширина досягає 350px, вона фіксується і не перевищує встановлену ширину.</p><p>Ось так виглядає код:</p><pre><code>//Картка не може бути більшою за 350px

.card{
  margin:0 auto;
  padding:1.5em;
  width:80%;
  max-width:350px;
  height:50%;
  background: #FFFFFF;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  border-radius:4px;
  overflow:hidden;
}
</code></pre><h2 id="-min-width"><strong>Властивість min-width</strong></h2><p>На відміну від властивості max-width, властивість min-width вказує мінімальну ширину. Вона визначає найменшу можливу ширину для елемента.</p><p>У деяких випадках потрібно, щоб елемент мав гнучку ширину, тому її задають у відносній одиниці (наприклад, у відсотках). Але коли екран зменшується, ширина елемента також зменшується.</p><p>Тут допоможе min-width: ви можете встановити мінімальну ширину, щоб картка не була меншою за вказане значення.</p><figure class="kg-card kg-embed-card"><iframe id="cp_embed_zYwdzxW" src="https://codepen.io/D_kingnelson/embed/preview/zYwdzxW?default-tabs=css%2Cresult&amp;height=300&amp;host=https%3A%2F%2Fcodepen.io&amp;slug-hash=zYwdzxW" title="min-width-example" scrolling="no" frameborder="0" height="300" allowtransparency="true" class="cp_embed_iframe" loading="lazy" style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size-adjust: inherit; font-kerning: inherit; font-variant-alternates: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-position: inherit; font-variant-emoji: inherit; font-feature-settings: inherit; font-optical-sizing: inherit; font-variation-settings: inherit; font-size: 22px; vertical-align: middle; width: 720px; overflow: hidden;"></iframe></figure><pre><code>//Картка не може бути меншою за 250px

.card{
  margin:0 auto;
  padding:1.5em;
  width:80%;
  max-width:350px;
  //тут налаштовуємо властивість min-width
  min-width : 250px;
  height:50%;
  background: #FFFFFF;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  border-radius:4px;
  overflow:hidden;
}
</code></pre><h2 id="-max-height"><strong>Властивість max-height</strong></h2><p>Властивість max-height працює так само, як і max-width, але впливає на висоту, а не ширину.</p><p>Ось приклад:</p><figure class="kg-card kg-embed-card"><iframe id="cp_embed_gOWxRrb" src="https://codepen.io/D_kingnelson/embed/preview/gOWxRrb?default-tabs=css%2Cresult&amp;height=300&amp;host=https%3A%2F%2Fcodepen.io&amp;slug-hash=gOWxRrb" title="max-height-example" scrolling="no" frameborder="0" height="300" allowtransparency="true" class="cp_embed_iframe" loading="lazy" style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size-adjust: inherit; font-kerning: inherit; font-variant-alternates: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-position: inherit; font-variant-emoji: inherit; font-feature-settings: inherit; font-optical-sizing: inherit; font-variation-settings: inherit; font-size: 22px; vertical-align: middle; width: 720px; overflow: hidden;"></iframe></figure><pre><code>//Встановлює висоту елемента до вказаної одиниці, ефективно зупиняючи його збільшення у висоті

.card{
  margin:0 auto;
  padding:1.5em;
  width:80%;
  max-width:350px;
  height:70%;
  //тут налаштовуємо властивість max-height
  max-height: 400px;
  background: #FFFFFF;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  border-radius:4px;
  overflow:hidden;
}
</code></pre><h2 id="-min-height"><strong>Властивість min-height</strong></h2><p>На відміну від max-height, властивість min-height задає мінімальну висоту для елемента.</p><p>Це трапляється, коли вікно перегляду зменшується, а висота елемента не може бути меншою певної висоти.</p><figure class="kg-card kg-embed-card"><iframe id="cp_embed_yLboXVz" src="https://codepen.io/D_kingnelson/embed/preview/yLboXVz?default-tabs=css%2Cresult&amp;height=300&amp;host=https%3A%2F%2Fcodepen.io&amp;slug-hash=yLboXVz" title="min-height" scrolling="no" frameborder="0" height="300" allowtransparency="true" class="cp_embed_iframe" loading="lazy" style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size-adjust: inherit; font-kerning: inherit; font-variant-alternates: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-position: inherit; font-variant-emoji: inherit; font-feature-settings: inherit; font-optical-sizing: inherit; font-variation-settings: inherit; font-size: 22px; vertical-align: middle; width: 720px; overflow: hidden;"></iframe></figure><pre><code>.element{
    height:40vh;
    min-height:200px;
}
</code></pre><h2 id="-"><strong>Висновок</strong></h2><p>Адаптивність є важливим фактором у веброзробці. Відстежувати вигляд елементів на екранах різних розмірів може бути складно, але властивості max-width, min-width, max-height і min-height допомагають з цим.</p><p>Ці властивості дозволяють регулювати розмір елементів без необхідності використання медіазапитів.</p> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Одиниці CSS: em, rem, vh, vw та інші ]]>
                </title>
                <description>
                    <![CDATA[ Багато властивостей у CSS (наприклад, width, margin, padding та font-size) використовують довжину, а CSS має багато різних способів для її вираження. Довжина в CSS — це число та одиниця без пробілу. Наприклад, 5px, 0.9em і так далі. Існує два загальних типи одиниць, які використовують для довжини і розміру в CSS: ]]>
                </description>
                <link>https://www.freecodecamp.org/ukrainian/news/odynytsi-css-em-rem-vh-vw-ta-inshi/</link>
                <guid isPermaLink="false">66858243cfd96d04031a3c2d</guid>
                
                    <category>
                        <![CDATA[ CSS ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Anastasiia Buievych ]]>
                </dc:creator>
                <pubDate>Thu, 04 Jul 2024 07:47:21 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/ukrainian/news/content/images/2024/07/5f9c9cd8740569d1a4ca347f.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p data-test-label="translation-intro">
        <strong>Оригінальна публікація:</strong> <a href="https://www.freecodecamp.org/news/css-unit-guide/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">CSS Unit Guide: CSS em, rem, vh, vw, and more, Explained</a>
      </p><p>Багато властивостей у CSS (наприклад, <code>width</code>, <code>margin</code>, <code>padding</code> та <code>font-size</code>) використовують довжину, а CSS має багато різних способів для її вираження.</p><p>Довжина в CSS — це число та одиниця без пробілу. Наприклад, <code>5px</code>, <code>0.9em</code> і так далі.</p><p>Існує два загальних типи одиниць, які використовують для довжини і розміру в CSS: абсолютні та відносні.</p><h2 id="-"><strong>Абсолютні одиниці довжини</strong></h2><p>Абсолютні одиниці довжини базуються на фактичній фізичній одиниці та зазвичай однакового розміру на всіх пристроях. Однак залежно від розміру та якості вашого екрана або налаштувань у вашому браузері чи ОС можуть бути деякі винятки.</p><p>Ось декілька поширених абсолютних одиниць довжини в CSS:</p><h3 id="px"><strong><code>px</code></strong></h3><p>Пікселі, або <code>px</code>, є одними з найпоширеніших одиниць довжини в CSS.</p><p>У CSS 1 піксель <a href="https://drafts.csswg.org/css-values/#reference-pixel">офіційно визначено</a> як 1/96 дюйма. Усі інші абсолютні одиниці довжини базуються на цьому визначенні пікселя.</p><p>Але коли цей стандарт був сформульований, більшість моніторів мали роздільну здатність 1024 x 768 та DPI (кількість точок на дюйм) 96.</p><p>Екрани на сучасних пристроях мають набагато вищу роздільну здатність і DPI, тому лінія довжиною 96 пікселів може не вимірювати точно 1 дюйм, залежно від пристрою.</p><p>Незважаючи на те, що розміри в пікселях можуть змінюватися на різних пристроях, загалом вважається, що для екранів краще використовувати пікселі.</p><p>Якщо ви знаєте, що ваша сторінка буде надрукована на високоякісному принтері, тоді можна розглянути можливість використання іншої одиниці: наприклад, <code>cm</code> або <code>mm</code>.</p><p><a href="https://www.smashingmagazine.com/2021/07/css-absolute-units/">У цій статті</a> ви можете дізнатися більше про історію пікселів та чому CSS-дюйм не завжди відповідає фізичному дюйму (англійською мовою).</p><h3 id="cm"><strong><code>cm</code></strong></h3><p>Сантиметри.</p><p>У CSS <code>1cm</code> приблизно дорівнює 37,8 пікселя або близько 25,2/64 дюйма.</p><h3 id="mm"><strong><code>mm</code></strong></h3><p>Міліметри.</p><p>У CSS <code>1mm</code> приблизно дорівнює 3,78 пікселя або 1/10 сантиметра.</p><h3 id="in"><strong><code>in</code></strong></h3><p>Дюйми.</p><p>У CSS <code>1in</code> приблизно дорівнює 96 пікселів або близько 2,54 см.</p><h3 id="pt"><strong><code>pt</code></strong></h3><p>Пункти.</p><p>У CSS <code>1pt</code> приблизно дорівнює 1,3333 пікселя або 1/72 дюйма.</p><h3 id="pc"><strong><code>pc</code></strong></h3><p>Піки.</p><p>У CSS <code>1pc</code> приблизно дорівнює 16 пікселів або 1/6 дюйма.</p><h2 id="--1"><strong>Відносні одиниці довжини</strong></h2><p>Відносні одиниці довжини залежать від розміру або налаштувань іншого елемента. Наприклад, відносний розмір шрифту елемента може розраховуватися з використанням розміру шрифту батьківського елемента.</p><p>Ось декілька поширених відносних одиниць довжини:</p><h3 id="em"><strong><code>em</code></strong></h3><p>Одиниця <code>em</code> у CSS отримала свою назву від типографічної одиниці. У типографії термін em спочатку стосувався ширини великої літери M у використовуваному шрифті та розмірі.</p><p>Коли використовується із властивістю <code>font-size</code>, <code>em</code> успадковує розмір шрифту від батьківського елемента:</p><pre><code class="language-css">.container {
  font-size: 16px;
}

.container p {
  font-size: 1em;
}

.container h2 {
  font-size: 3em;
}

.container h3 {
  font-size: 2em;
}
</code></pre><p>У цьому прикладі розмір шрифту елемента <code>p</code> становить <code>16px</code> (16 * 1). Тим часом розмір шрифту <code>h2</code> становить <code>48px</code> (16 * 3), а для <code>h3</code> — <code>32px</code> (16 * 2).</p><p>Якщо <code>em</code> використовується з іншою властивістю (наприклад, <code>width</code>), то <code>em</code> розраховується з використанням розміру цільового елемента.</p><h3 id="rem"><strong><code>rem</code></strong></h3><p>Ця відносна одиниця не залежить від розміру або налаштувань батьківського елемента, а базується на корені документа. Для вебсайтів коренем документа є елемент <code>html</code>.</p><pre><code class="language-css">p {
  font-size: 1.25rem;
}
</code></pre><p>У більшості браузерів розмір шрифту за замовчуванням становить 16, тому розмір шрифту елементів <code>html</code> становить <code>16px</code>. Отже, у цьому випадку елемент <code>p</code> дорівнює <code>20px</code> (16 * 1,25).</p><p>Але якщо користувач змінить розмір шрифту за замовчуванням у своєму браузері, то розмір шрифту елемента <code>p</code> буде масштабуватися відповідно.</p><h3 id="--2"><strong><code>%</code></strong></h3><p>Відсотки, або розмір відносно розміру батьківського елемента:</p><pre><code class="language-css">div {
  width: 400px;
}

div p {
  width: 75%;
}</code></pre><p>Оскільки ширина батьківського елемента становить <code>400px</code>, то шириною внутрішнього абзацу буде <code>300px</code> (400 * 0,75).</p><h3 id="vw"><strong><code>vw</code></strong></h3><p><code>1vw</code> — це 1% ширини вікна перегляду.</p><p>Наприклад:</p><pre><code class="language-css">body {
  width: 100vw;
}
</code></pre><p>Оскільки елемент <code>body</code> має значення <code>100vw</code>, або 100% ширини вікна перегляду, він займатиме всю доступну ширину. Отже, якщо ви зміните розмір вашого браузера на 690 пікселів у ширину, то <code>body</code> займе всі 690 пікселів у ширину.</p><h3 id="vh"><strong><code>vh</code></strong></h3><p><code>1vh</code> — це 1% висоти вікна перегляду.</p><p>Наприклад:</p><pre><code class="language-css">div {
  height: 50vh;
}
</code></pre><p>Елемент <code>div</code> займе 50% висоти вікна перегляду. Отже, якщо висота вікна браузера становить 900 пікселів, висота <code>div</code> дорівнюватиме 450 пікселів.</p><h3 id="ex"><strong><code>ex</code></strong></h3><p>Одиниця <code>ex</code> у CSS отримала свою назву від x-height у типографії, або «висоти літери x у шрифті». У багатьох шрифтах символ малої літери x зазвичай становить приблизно половину висоти найбільшого символу.</p><p>У CSS <code>1ex</code> — це x-height шрифту або половина <code>1em</code>.</p><p>Але оскільки розмір малої літери x може значно відрізнятися залежно від шрифту, одиниця <code>ex</code> використовується рідко.</p><h3 id="ch"><strong><code>ch</code></strong></h3><p>Одиниця <code>ch</code> у CSS визначається як ширина символу 0 (нуль, або U+0030) шрифту.</p><p>Хоча одиниця <code>ch</code> працює як точне вимірювання для моноширинних/фіксованих шрифтів (наприклад, Courier), вона може бути непередбачуваною з пропорційними шрифтами (наприклад, Arial).</p><p>Наприклад, якщо ви використали шрифт Courier і встановили ширину елемента на <code>60ch</code>, то ширина цього елемента дорівнюватиме рівно 60 символам.</p><p>Але якщо ви використали шрифт Arial і встановили ширину елемента на <code>60ch</code>, то неможливо сказати, якою буде ширина елемента: символи можуть переповнювати контейнер або не досягати його меж.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2022/02/ch-unit-monospaced-and-proportional-fonts.png" class="kg-image" alt="Зображення, яке показує 20ch як точне вимірювання у Courier, але неточне в Helvetica та Georgia." width="600" height="400" loading="lazy"><figcaption><a href="https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/">Джерело</a></figcaption></figure><p>Щоб дізнатись більше про одиницю <code>ch</code> та розглянути пару прикладів, див. <a href="https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/">цю статтю</a> (англійською мовою).</p><h3 id="vmin-vmax"><strong><code>vmin</code> та <code>vmax</code></strong></h3><p>Одиниці <code>vmin</code> та <code>vmax</code> базуються на значеннях <code>vw</code> та <code>vh</code>.</p><p><code>1vmin</code> — це 1% найменшого виміру вікна перегляду, а <code>1vmax</code> — це 1% найбільшого виміру вікна перегляду.</p><p>Наприклад, уявіть вікно браузера, ширина якого 1200 пікселів, а висота — 600 пікселів. У цьому випадку <code>1vmin</code> дорівнює <code>6px</code> (1% від <code>vh</code>, що менше для розміру 600 пікселів). Тим часом <code>1vmax</code> дорівнює <code>12px</code> (1% від <code>vh</code>, що більше для розміру 1200 пікселів).</p> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Інструкція break в Python: як завершити цикл for у Python ]]>
                </title>
                <description>
                    <![CDATA[ У Python можна використовувати цикли, щоб повторно виконувати логіку коду до виконання певної умови. Python надає вбудовані керуючі інструкції, які дозволяють змінювати поведінку циклу. До деяких з них належать continue, break, pass та else. У цій статті ви дізнаєтесь, як завершити поточний цикл або змінити інструкцію за допомогою інструкції break. ]]>
                </description>
                <link>https://www.freecodecamp.org/ukrainian/news/instruktsiya-break-v-python-yak-zavershyty-tsykl-for-u-python/</link>
                <guid isPermaLink="false">667e7fe269ce140433c2ff7a</guid>
                
                    <category>
                        <![CDATA[ python ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Anastasiia Buievych ]]>
                </dc:creator>
                <pubDate>Wed, 03 Jul 2024 03:28:00 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/ukrainian/news/content/images/2024/07/1e00a0a8acc5c22dea9a4910bffecbb1.jpeg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p data-test-label="translation-intro">
        <strong>Оригінальна публікація:</strong> <a href="https://www.freecodecamp.org/news/python-break-statement-tutorial/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">Python Break Statement – How to Break Out of a For Loop in Python</a>
      </p><p>У Python можна використовувати цикли, щоб повторно виконувати логіку коду до виконання певної умови.</p><p>Python надає вбудовані керуючі інструкції, які дозволяють змінювати поведінку циклу. До деяких з них належать <code>continue</code>, <code>break</code>, <code>pass</code> та <code>else</code>.</p><p>У цій статті ви дізнаєтесь, як завершити поточний цикл або змінити інструкцію за допомогою інструкції <code>break</code>.</p><h2 id="-break-for-python"><strong>Як використовувати інструкцію <code>break</code> в циклі <code>for</code> у Python</strong></h2><p>Розглянемо список Python нижче:</p><pre><code class="language-python">імена = ["Оксана", "Андрій", "Мирослава", "Богдан"]
</code></pre><p>Цикл <code>for</code> можна використати, щоб ітерувати над списком <code>імена</code> та надрукувати його елементи:</p><pre><code class="language-python">імена = ["Оксана", "Андрій", "Мирослава", "Богдан"]

for i in імена:
    print(i)
# Оксана
# Андрій
# Мирослава
# Богдан
</code></pre><p>Але що робити, якщо ви хочете зупинити цикл, коли знайдете певне ім’я користувача? Це можна зробити за допомогою інструкції <code>break</code>.</p><p>Ось приклад:</p><pre><code class="language-python">імена = ["Оксана", "Андрій", "Мирослава", "Богдан"]

for i in імена:
    print(i)
    if i == "Андрій":
        break
# Оксана
# Андрій
</code></pre><p>У коді вище ми створили інструкцію <code>if</code>, яка перевіряє, чи поточним значенням <code>i</code> є <code>"Андрій"</code>: <code>if i == "Андрій"</code>.</p><p>У тілі інструкції <code>if</code> ми використали інструкцію <code>break</code>. Таким чином цикл зупиниться, коли знайде елемент у списку зі значенням <code>"Андрій"</code>.</p><p>Тому замість того, щоб вивести весь список (<code>"Оксана", "Андрій", "Мирослава", "Богдан"</code>), було виведено лише <code>"Оксана"</code> та <code>"Андрій"</code>, оскільки цикл зупинився одразу після знаходження <code>"Андрій"</code>.</p><h2 id="-break-while-python"><strong>Як використовувати інструкцію <code>break</code> в циклі <code>while</code> у Python</strong></h2><p>Цикл <code>while</code> можна завершити за допомогою інструкції <code>break</code>:</p><pre><code class="language-python">імена = ["Оксана", "Андрій", "Мирослава", "Богдан"]

i = 0
while i &lt; len(імена):
    print(імена[i])
    if імена[i] == "Андрій":
        break
    i += 1
</code></pre><p>Так само як і в прикладі з циклом <code>for</code>, ми створили список <code>імена</code> з чотирьох елементів: <code>["Оксана", "Андрій", "Мирослава", "Богдан"]</code>.</p><p>Використовуючи інструкцію <code>if</code> у циклі <code>while</code>, ми перевіряли, коли поточний цикл був на індексі зі значенням <code>"Андрій"</code>. Коли це відбувалося, цикл завершувався.</p><p>Знову ж таки, було виведено <code>"Оксана"</code> та <code>"Андрій"</code>, оскільки цикл зупинився, коли знайшов <code>"Андрій"</code>.</p><h2 id="-"><strong>Висновок</strong></h2><p>У цій статті ви дізналися, як використовувати інструкцію <code>break</code> у Python. Її також можна використовувати, щоб завершити поточний цикл, коли умова виконана.</p><p>З наведених прикладів ви дізналися, як використовувати інструкцію <code>break</code>, щоб завершити цикли <code>for</code> та <code>while</code> у Python.</p><p>Щасливого програмування!</p> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Метод round(): як округлити число з плаваючою комою в Pandas ]]>
                </title>
                <description>
                    <![CDATA[ Бібліотеку Pandas можна використовувати в Python, щоб маніпулювати та аналізувати дані. У більшості випадків її використовують для маніпулювання та аналізу табличних даних. У цій статті ви дізнаєтеся, як використовувати метод round() від Pandas для округлення значення з плаваючою комою до певної кількості десяткових знаків. Ми почнемо з розгляду синтаксису методу, ]]>
                </description>
                <link>https://www.freecodecamp.org/ukrainian/news/metod-round-yak-okruhlyty-chyslo-z-plavayuchoyu-komoyu-v-pandas/</link>
                <guid isPermaLink="false">667e674869ce140433c2fe8f</guid>
                
                    <category>
                        <![CDATA[ python ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Anastasiia Buievych ]]>
                </dc:creator>
                <pubDate>Mon, 01 Jul 2024 03:16:00 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/ukrainian/news/content/images/2024/06/round-float-in-pandas.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p data-test-label="translation-intro">
        <strong>Оригінальна публікація:</strong> <a href="https://www.freecodecamp.org/news/how-to-round-a-float-in-pandas/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">Pandas round() Method – How To Round a Float in Pandas</a>
      </p><p>Бібліотеку Pandas можна використовувати в Python, щоб маніпулювати та аналізувати дані. У більшості випадків її використовують для маніпулювання та аналізу табличних даних.</p><p>У цій статті ви дізнаєтеся, як використовувати метод <code>round()</code> від Pandas для округлення значення з плаваючою комою до певної кількості десяткових знаків.</p><p>Ми почнемо з розгляду синтаксису методу, а потім розглянемо декілька практичних прикладів коду.</p><h2 id="-round-pandas"><strong>Приклад методу <code>round()</code> від Pandas</strong></h2><p>Ось так виглядає синтаксис методу <code>round()</code>:</p><pre><code class="language-txt">DataFrame.round(decimals)</code></pre><p>Параметр <strong>decimals</strong> представляє кількість десяткових знаків, до яких потрібно округлити число.</p><p>Кількість десяткових знаків, які потрібно повернути, передається як параметр. Виклик <code>round(2)</code> поверне число, округлене до двох десяткових знаків.</p><p>Ось приклад:</p><pre><code class="language-python">import pandas as pd

data = {'вартість':[20.5550, 21.03535, 19.67373, 18.233233]}
  
df = pd.DataFrame(data)

df['округлена_вартість'] = df['вартість'].round(2)
print(df)</code></pre><p>У наведеному вище коді у нас є список чисел, які потрапляють у стовпець <code>вартість</code>. У стовпці були такі значення: [20.5550, 21.03535, 19.67373, 18.233233].</p><p>Використовуючи метод <code>round()</code>, ми округлили значення до 2 десяткових знаків: <code>df['вартість'].round(2)</code>.</p><p>Повернені значення були збережені у стовпці під назвою <code>округлена_вартість</code>.</p><p>Ось вихідні дані коду:</p><!--kg-card-begin: html--><table>
  <tbody><tr>
    <th></th>
    <th scope="col">Вартість</th>
    <th scope="col">Округлена_вартість</th>
  </tr>

  <tr>
    <td>0</td>
    <td>20.555000</td>
    <td>20.56</td>
  </tr>

  <tr>
    <td>1</td>
    <td>21.035350</td>
    <td>21.04</td>
  </tr>
  
  <tr>
    <td>2</td>
    <td>19.673730</td>
    <td>19.67</td>
  </tr>
    
  <tr>
    <td>3</td>
    <td>18.233233</td>
    <td>18.23</td>
  </tr>
</tbody></table><!--kg-card-end: html--><p>З наведеної вище таблиці можна побачити, що значення у стовпці <code>вартість</code> були округлені до 2 десяткових знаків у стовпці <code>округлена_вартість</code>.</p><h2 id="-"><strong>Висновок</strong></h2><p>У цій статті ми дізналися про округлення значень з плаваючою комою за допомогою Pandas, використовуючи метод <code>round()</code>.</p><p>Ми почали з розгляду синтаксису методу <code>round()</code>, а потім побачили приклад використання методу для округлення значень з плаваючою комою до заданої кількості десяткових знаків.</p><p>Щасливого програмування!</p> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Найбільше число в Python: який максимальний розмір цілого числа? ]]>
                </title>
                <description>
                    <![CDATA[ Максимальний розмір цілого числа в Python можна перевірити за допомогою властивості maxsize модуля sys. У цій статті ви дізнаєтеся про максимальний розмір цілого числа в Python. Також ви побачите різницю між Python 2 і Python 3. Вас не має турбувати максимальне значення цілого числа. У поточній версії Python тип даних ]]>
                </description>
                <link>https://www.freecodecamp.org/ukrainian/news/naybilshe-chyslo-v-python-yakyy-maksymalnyy-rozmir-tsiloho-chysla/</link>
                <guid isPermaLink="false">667e758a69ce140433c2ff1b</guid>
                
                    <category>
                        <![CDATA[ python ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Anastasiia Buievych ]]>
                </dc:creator>
                <pubDate>Fri, 28 Jun 2024 08:56:58 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/ukrainian/news/content/images/2024/06/thomas-t-OPpCbAAKWv8-unsplash.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p data-test-label="translation-intro">
        <strong>Оригінальна публікація:</strong> <a href="https://www.freecodecamp.org/news/maximum-integer-size-in-python/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">Int Max in Python – Maximum Integer Size</a>
      </p><p>Максимальний розмір цілого числа в Python можна перевірити за допомогою властивості <code>maxsize</code> модуля <code>sys</code>.</p><p>У цій статті ви дізнаєтеся про максимальний розмір цілого числа в Python. Також ви побачите різницю між Python 2 і Python 3.</p><p>Вас не має турбувати максимальне значення цілого числа. У поточній версії Python тип даних <code>int</code> надає можливість зберігати дуже великі цілочисельні значення.</p><h2 id="-python"><strong>Який максимальний розмір цілого числа в</strong> <strong>Python?</strong></h2><p>У Python 2 ви можете перевірити максимальний розмір цілого числа за допомогою властивості <code>maxint</code> модуля <code>sys</code>.</p><p>Ось приклад:</p><pre><code class="language-python">import sys

print(sys.maxint)
# 9223372036854775807</code></pre><p>У Python 2 є вбудований тип даних <code>long</code>, який зберігає цілочисельні значення більші, ніж може обробити <code>int</code>.</p><p>Те ж саме можна зробити в Python 3 за допомогою <code>maxsize</code>:</p><pre><code class="language-python">import sys

print(sys.maxsize)
# 9223372036854775807</code></pre><p>Зверніть увагу, що значення в коді вище не є максимальною місткістю типу даних <code>int</code> у поточній версії Python.</p><p>Якщо ви помножите це число (9223372036854775807) на дуже велике число в Python 2, буде повернено <code>long</code>.</p><p>З іншого боку, Python 3 може обробити цю операцію:</p><pre><code class="language-python">import sys

print(sys.maxsize * 7809356576809509573609874689576897365487536545894358723468)
# 72028601076372765770200707816364342373431783018070841859646251155447849538676</code></pre><p>Ви можете виконувати операції з великими цілочисельними значеннями в Python, не турбуючись про досягнення максимального значення.</p><p>Єдине обмеження для використання цих великих значень — це доступна пам’ять у системах, де вони використовуються.</p><h2 id="-"><strong>Висновок</strong></h2><p>У цій статті ви дізналися про максимальний розмір цілого числа в Python. Ви також побачили деякі приклади коду, які показали максимальний розмір цілого числа в Python 2 і Python 3.</p><p>З сучасним Python вам не потрібно турбуватися про досягнення максимального розміру цілого числа. Просто переконайтеся, що у вас достатньо пам’яті для обробки обчислень з дуже великими цілочисельними операціями, і все буде добре.</p><p>Щасливого програмування!</p> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Різниця між псевдокласами та псевдоелементами в CSS ]]>
                </title>
                <description>
                    <![CDATA[ Псевдокласи та псевдоелементи в CSS — це два типи ключових слів, які можна поєднувати з селекторами. Їх використовують, щоб визначити стан елемента або конкретні частини елемента. У цій статті ми дізнаємось про різницю між ними, а також їхню історію та найкращі практики використання. Синтаксис  * одинарна двокрапка : стосується ]]>
                </description>
                <link>https://www.freecodecamp.org/ukrainian/news/riznytsya-mizh-psevdoklasamy-ta-psevdoelementamy-v-css/</link>
                <guid isPermaLink="false">667d15b269ce140433c2fd4c</guid>
                
                    <category>
                        <![CDATA[ CSS ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Anastasiia Buievych ]]>
                </dc:creator>
                <pubDate>Thu, 27 Jun 2024 09:42:28 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/ukrainian/news/content/images/2024/06/pseudo-1.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p data-test-label="translation-intro">
        <strong>Оригінальна публікація:</strong> <a href="https://www.freecodecamp.org/news/the-difference-between-pseudo-classes-and-elements-in-css/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">The Difference Between Pseudo-Classes and Pseudo-Elements in CSS</a>
      </p><p>Псевдокласи та псевдоелементи в CSS — це два типи ключових слів, які можна поєднувати з селекторами. Їх використовують, щоб визначити стан елемента або конкретні частини елемента.</p><p>У цій статті ми дізнаємось про різницю між ними, а також їхню історію та найкращі практики використання.</p><h6 id="-"><strong>Синтаксис</strong></h6><ul><li>одинарна двокрапка <code>:</code> стосується псевдокласів</li><li>подвійна двокрапка <code>::</code> стосується псевдоелементів</li></ul><h2 id="--1"><strong>Псевдокласи та псевдоелементи</strong></h2><p>«<a href="https://goroh.pp.ua/Етимологія/псевдо-">Псевдо</a>» означає «несправжній, неправильний, фальшивий». Префікс <code>псевдо-</code> використовують, щоб позначити класи або елементи, які не є «реальними», тобто є не елементами DOM (Document Object Model), а віртуальними елементами, створеними для стилізації.</p><p>Щоб краще визначити різницю, давайте детальніше обговоримо відмінності між псевдокласами та псевдоелементами.</p><h3 id="-css"><strong>Що таке псевдокласи в CSS?</strong></h3><p>Псевдокласи (<code>:</code>) в основному використовують, щоб стилізувати елементи у різних станах. Стан позначає умову або поведінку користувача (наприклад, hover, active, focus або disabled). Стан зазвичай включає взаємодію з користувачем.</p><p>Наприклад, ми можемо задати всім посиланням колір тексту <code>lavender</code>, коли користувач наводить курсор на посилання.</p><pre><code class="language-css">a:hover {
  color: lavender;
}
</code></pre><p>У Chrome DevTools ви знайдете інші приклади станів. Тут ви також можете тестувати та налагоджувати застосовані стилі на основі стану (і відповідного псевдокласу), перемикаючи їх.</p><figure class="kg-card kg-image-card kg-width-wide"><img src="https://www.freecodecamp.org/news/content/images/2023/04/Screenshot-2023-04-20-at-10.13.42-AM.png" class="kg-image" alt="Screenshot-2023-04-20-at-10.13.42-AM" width="600" height="400" loading="lazy"></figure><p>Існує понад <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#alphabetical_index">50 типів псевдокласів</a>, тому я дуже рекомендую переглянути їх.</p><p>Протестуйте код нижче, уважно розгляньте псевдокласи та спробуйте додати новий.</p><figure class="kg-card kg-embed-card"><iframe id="cp_embed_xxyRWYm" src="https://codepen.io/nataliepina/embed/preview/xxyRWYm?default-tabs=css%2Cresult&amp;height=300&amp;host=https%3A%2F%2Fcodepen.io&amp;slug-hash=xxyRWYm" title="Button States with Psuedo-Classes" scrolling="no" frameborder="0" height="300" allowtransparency="true" class="cp_embed_iframe" loading="lazy" style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size-adjust: inherit; font-kerning: inherit; font-variant-alternates: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-position: inherit; font-variant-emoji: inherit; font-feature-settings: inherit; font-optical-sizing: inherit; font-variation-settings: inherit; font-size: 22px; vertical-align: middle; width: 720px; overflow: hidden;"></iframe></figure><h4 id="--2"><strong>Функціональні псевдокласи</strong></h4><p>Інший тип псевдокласів — це функціональні псевдокласи. Вони приймають параметр у вигляді <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Selector_list#selector_list">списку селекторів</a>, щоб відповідати елементам.</p><p>На відміну від інших типів псевдокласів, які орієнтовані на статичні стани (наприклад, hover), ці псевдокласи можуть динамічно цілитись на події та взаємодії з користувачем.</p><figure class="kg-card kg-code-card"><pre><code class="language-css">:is()
/* Псевдоклас, який відповідає будь-якому елементу, що відповідає будь-якому з селекторів у наданому списку. */

:not()
/* Псевдоклас заперечення, який представляє будь-який елемент, що не відповідає його аргументу. */

:where()
/* Псевдоклас налаштування специфічності, який відповідає будь-якому елементу, що відповідає будь-якому з селекторів у списку без додавання ваги специфічності. */

:has()
/* Псевдоклас відносності, який представляє елемент, якщо будь-який з відносних селекторів відповідає при закріпленні до прикріпленого елемента. */</code></pre><figcaption><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#functional_pseudo-classes">джерело</a></figcaption></figure><h3 id="-css-1"><strong>Що таке псевдоелементи в CSS?</strong></h3><p>Псевдоелементи (<code>::</code>) використовують, щоб стилізувати певні частини елемента. Їх можуть використовувати, щоб націлитись на першу літеру чи перший рядок або щоб додати вміст перед чи після елемента.</p><p>Варто ознайомитися з цим <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements#alphabetical_index">індексом псевдоелементів</a>, щоб дізнатися більше про доступні ключові слова.</p><p>Наприклад, щоб перша літера абзацу була великою, можна використати псевдоелемент <code>first-letter</code>:</p><pre><code class="language-css">p::first-letter {
  font-size: 9em;
}</code></pre><p>Ще один поширений приклад псевдоелемента — це використання <code>::before</code> або <code>::after</code>, щоб додати вміст перед або після цільового елемента.</p><p>Протестуйте код нижче, щоб побачити, як можна використовувати <code>::before</code> та <code>::after</code>, щоб створити рядки перед або після текстового елемента.</p><figure class="kg-card kg-embed-card"><iframe id="cp_embed_qBJqpgq" src="https://codepen.io/nataliepina/embed/preview/qBJqpgq?default-tabs=css%2Cresult&amp;height=300&amp;host=https%3A%2F%2Fcodepen.io&amp;slug-hash=qBJqpgq" title="Psuedo-elements  - ::before &amp; ::after" scrolling="no" frameborder="0" height="300" allowtransparency="true" class="cp_embed_iframe" loading="lazy" style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant-caps: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size-adjust: inherit; font-kerning: inherit; font-variant-alternates: inherit; font-variant-ligatures: inherit; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-position: inherit; font-variant-emoji: inherit; font-feature-settings: inherit; font-optical-sizing: inherit; font-variation-settings: inherit; font-size: 22px; vertical-align: middle; width: 720px; overflow: hidden;"></iframe></figure><h2 id="-css-2"><strong>Різниця між <code>:</code> та <code>::</code> в CSS</strong></h2><p>Запам’ятайте, що між одинарною та подвійною двокрапкою ключова різниця. Найголовніше, що <code>:</code> стосується псевдокласів, а <code>::</code> стосується псевдоелементів.</p><h3 id="--3"><strong>Історія <code>::</code></strong></h3><p>Історично існувала лише одинарна двокрапка <code>:</code>, яка визначала і псевдокласи, і псевдоелементи. Нотація <code>::</code> була введена в CSS3, щоб розрізняти їх.</p><p>Псевдоелементи та псевдокласи — це пов’язані поняття, які забезпечують різні способи стилізації елемента. Як наслідок, невелика відмінність у синтаксисі між ними є логічною.</p><p>Нерекомендовано використовувати лише одинарну двокрапку для обох випадків, оскільки це застаріло. Браузери досі приймають <code>:</code> для обох випадків для зворотної сумісності. Оскільки ви можете стикнутися з обома синтаксисами, розуміння історичного контексту є корисним.</p><h2 id="--4"><strong>Найкращі практики використання <code>:</code> та <code>::</code></strong></h2><p>Найкраща практика при виборі синтаксису двокрапки — дотримуватись поточних стандартів CSS3. Дотримання цих стандартів покращить підтримуваність коду, тому у своїй кодовій базі корисно зберігати та впроваджувати правила щодо цього.</p><p>Це також допоможе захистити CSS у майбутньому. Як ми обговорювали, браузери наразі приймають одинарний синтаксис для обох, але так може бути не завжди. Використовуючи подвійний синтаксис для псевдоелементів, ви можете допомогти запобігти помилкам у майбутньому, оскільки CSS продовжує змінюватися та розвиватися.</p><p>Розрізнення синтаксису між ними покращує читабельність. Це прояснює, на що ви цілитесь, і корисно при роботі зі складними селекторами, які включають декілька псевдоелементів і псевдокласів.</p><h2 id="--5"><strong>Висновок</strong></h2><p>Для написання підтримуваного CSS важливо розуміти різницю між псевдокласом і псевдоелементом. Псевдокласи використовують, щоб націлитись на стан, а псевдоелементи — щоб націлитись на конкретні частини елемента.</p><p>Сподіваюся, ця стаття допомогла зрозуміти різницю між псевдокласами та псевдоелементами, а також їхню історію та найкращі практики використання.</p><p>Щасливої стилізації!</p><p>Якщо хочете дізнатись більше про CSS, можете знайти мене у <a href="https://twitter.com/ui_natalie">твіттері</a>.</p> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Думай як програміст: уроки розв’язання проблем ]]>
                </title>
                <description>
                    <![CDATA[ Автор: Річард Рейс Якщо ви зацікавлені в програмуванні, то, можливо, вже бачили цю цитату: > «Кожен повинен навчитися програмувати, тому що це вчить мислити», — Стів Джобс Ви, мабуть, також замислювалися, що саме означає «мислити, як програміст»? І як  це робити?? Суть полягає в ефективнішому способі розв’язання проблем. Мета ]]>
                </description>
                <link>https://www.freecodecamp.org/ukrainian/news/dumay-yak-prohramist-uroky-rozv-yazannya-problem/</link>
                <guid isPermaLink="false">66794b63d8f5d103efff98ac</guid>
                
                    <category>
                        <![CDATA[ програмування ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Anastasiia Buievych ]]>
                </dc:creator>
                <pubDate>Wed, 26 Jun 2024 08:06:43 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/ukrainian/news/content/images/2024/06/1-HTRqXgr7CVtRBsyTxurQew.jpeg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p data-test-label="translation-intro">
        <strong>Оригінальна публікація:</strong> <a href="https://www.freecodecamp.org/news/how-to-think-like-a-programmer-lessons-in-problem-solving-d1d8bf1de7d2/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">How to think like a programmer — lessons in problem solving</a>
      </p><p>Автор: Річард Рейс</p><p>Якщо ви зацікавлені в програмуванні, то, можливо, вже бачили цю цитату:</p><blockquote>«Кожен повинен навчитися програмувати, тому що це вчить мислити», — Стів Джобс</blockquote><p>Ви, мабуть, також замислювалися, що саме означає «мислити, як програміст»? І <em>як</em> це робити??</p><p>Суть полягає в <strong>ефективнішому способі розв’язання проблем</strong>.</p><p>Мета цієї статті — навчити вас цього способу.</p><p>Наприкінці ви точно знатимете, які кроки потрібно зробити, щоб краще розв’язувати проблеми.</p><h4 id="-"><strong>Чому це важливо?</strong></h4><p>Розв’язання проблем — це метанавичка.</p><p>У нас всіх є проблеми: в когось більші, в когось менші. Деколи ми справляємось з ними дуже… непродумано.</p><p>Якщо у вас немає системи, то ви, ймовірно, «розв’язуєте» проблеми наступним чином (я також так робив, коли починав програмувати):</p><ol><li>знаходите розв’язок;</li><li>якщо він не працює, знаходите інший розв’язок;</li><li>якщо він теж не працює, повторюєте крок №2, доки не пощастить.</li></ol><p>Дивіться, іноді може пощастити. Але це найгірший спосіб розв’язання проблем! І це просто величезна трата часу.</p><p>Найкращий спосіб включає а) наявність системи та б) <strong>її використання</strong>.</p><blockquote>«Майже всі роботодавці в першу чергу надають перевагу навичкам розв’язання проблем.</blockquote><blockquote>Навички розв’язання проблем майже одностайно вважаються найважливішою характеристикою, яку шукають роботодавці... Навіть важливішою, ніж знання мов програмування, налагодження та проєктування систем.</blockquote><blockquote>Обчислювальне мислення та здатність розбивати великі, складні проблеми так само цінні (якщо не більше), як базові технічні навички, необхідні для роботи», — Hacker Rank (<a href="https://www.hackerrank.com/research/developer-skills/2018/">звіт про навички розробників за 2018 рік</a>)</blockquote><h4 id="--1"><strong>Дотримуйтесь системи</strong></h4><p>Щоб знайти правильну систему, я скористався порадою з книги Тіма Ферріса «<a href="https://www.amazon.com/dp/0547884591/?tag=richardreeze-20">Шеф-кухар за 4 години</a>».</p><p>Це привело мене до інтерв’ю з двома справді дивовижними людьми: <a href="https://www.linkedin.com/in/cjordanball/">С. Джорданом Баллом</a> (займає 1-ше або 2-ге місце серед 65 000+ користувачів на <a href="https://coderbyte.com">Coderbyte</a>) і <a href="http://vantonspraul.com/">В. Антоном Спраулом</a> (автор книги «<a href="https://www.amazon.com/dp/1593274246/?tag=richardreeze-20">Думай як програміст: вступ до творчого розв’язання проблем</a>»).</p><p>Я поставив їм однакові запитання, і знаєте що? Їхні відповіді були досить схожими!</p><p>Зовсім скоро ви також дізнаєтесь про них.</p><p>Примітка: це не означає, що вони все робили однаково. Усі ми різні. Ви також відрізняєтесь. Але якщо ви почнете з принципів, з якими ми всі згодні, ваші досягнення будуть швидшими.</p><blockquote>«Найбільша помилка, яку роблять початківці, — вони фокусуються на вивченні синтаксису замість того, як розв’язувати проблеми», — В. Антон Спраул</blockquote><p>Отже, що робити, коли стикнулись з новою проблемою?</p><p>Ось покрокова інструкція:</p><h4 id="1-"><strong>1. Зрозумійте проблему</strong></h4><p>Точно зрозумійте, що від вас вимагається. Більшість важких проблем важкі через те, що їх не розуміють (саме тому це перший крок).</p><p>Як зрозуміти, що ви зрозуміли проблему? Ви можете пояснити її простими словами.</p><p>Пам’ятаєте, як застрягли на якійсь проблемі, почали її пояснювати і миттєво побачили прогалини в логіці, яких не помічали раніше?</p><p>Більшості програмістів знайоме це відчуття.</p><p>Ось чому варто записати свою проблему, намалювати діаграму або розповісти про неї іншій людині (або предмету… Дехто використовує <a href="https://uk.wikipedia.org/wiki/Метод_каченяти">метод каченяти</a>).</p><blockquote>«Якщо ви не можете пояснити щось простими словами, ви цього не розумієте», — Річард Фейнман</blockquote><h4 id="2-"><strong>2. Складіть план</strong></h4><p>Не кидайтеся одразу розв’язувати проблему без плану (і сподіватись, що зможете впоратись). Складіть план розв’язку!</p><p>Вам ніщо не допоможе, якщо ви не можете записати точні кроки.</p><p>У програмуванні це означає не починати одразу писати код. Дайте своєму мозку час проаналізувати проблему та обробити інформацію.</p><p>Щоб скласти хороший план, дайте відповідь на це запитання:</p><p>«Маючи вхідні дані X, які кроки необхідно виконати, щоб отримати вихідні дані Y?»</p><p>Примітка: програмісти мають чудовий інструмент, який допоможе з цим… Коментарі!</p><h4 id="3-"><strong>3. Поділіть проблему</strong></h4><p>Зверніть увагу. Це найважливіший крок.</p><p>Не намагайтеся розв’язати одну велику проблему. Ви будете плакати.</p><p>Натомість розбийте її на менші проблеми. Ці проблемки набагато простіше розв’язати.</p><p>Потім розв’яжіть ці проблемки по черзі. Почніть з найпростішої. «Найпростіша» означає, що ви знаєте відповідь (або близькі до неї).</p><p>Розв’язок наступних «найпростіших» проблемок не залежить від інших.</p><p>Як тільки розв’яжете всі проблемки, з’єднайте точки.</p><p>Об’єднавши розв’язки всіх проблемок, ви знайдете розв’язок початкової проблеми. Мої вітання!</p><p>Ця техніка — основа розв’язання проблем. Запам’ятайте її (якщо потрібно, прочитайте цей крок ще раз).</p><blockquote>«Якби я міг навчити кожного програміста-початківця одній навичці розв’язання проблем, це була б «техніка зменшення проблеми».</blockquote><blockquote>Припустимо, ви програміст-початківець, і вам доручили написати програму, яка читає десять чисел і визначає, яке з них є третім за величиною. Для зовсім початківця це може бути складне завдання, навіть якщо воно вимагає лише базового синтаксису.</blockquote><blockquote>Якщо ви застрягли, потрібно зменшити проблему до чогось простішого. Замість того, щоб знаходити третє за величиною число, як щодо того, щоб знайти найбільше загалом? Все одно складно? А якщо знайти найбільше з трьох чисел? Або більше з двох?</blockquote><blockquote>Зменшуйте проблему до того моменту, коли знаєте, як її розв’язати, і напишіть розв’язок. Потім трохи розширте проблему та відповідно перепишіть розв’язок, і продовжуйте, поки не повернетеся до початкового завдання», — В. Антон Спраул</blockquote><h4 id="4-"><strong>4. Застрягли?</strong></h4><p>Ви вже, мабуть, думаєте: «Ей, Річарде... Це все класно, але що робити, якщо я застряг(-ла) і навіть не можу розв’язати проблемку??»</p><p>По-перше, глибоко вдихніть. По-друге, це справедливо.</p><p>Але не переживайте, друзі. Так буває!</p><p>Різниця в тому, що хороші програмісти цікавляться помилками, а не дратуються через них.</p><p>Ось що можна спробувати, якщо натрапите на труднощі:</p><ul><li>Виконайте налагодження: уважно перегляньте свій розв’язок, намагаючись знайти помилку. Програмісти називають це <em>налагодженням</em> (власне, це все, що робить налагоджувач).</li></ul><blockquote>«Мистецтво налагодження полягає в тому, щоб зрозуміти, що ви насправді наказали робити програмі, а не те, що думали», — Ендрю Сінгер</blockquote><ul><li>Проведіть переоцінку: зробіть крок назад. Подивіться на проблему з іншого боку. Чи є щось, що можна абстрагувати до більш загального підходу?</li></ul><blockquote>«Іноді ми настільки заглиблюємося в деталі проблеми, що не помічаємо загальних принципів, які розв’язують проблему на більш загальному рівні. [...]</blockquote><blockquote>Класичний приклад цього, звісно, це сума довгого списку послідовних цілих чисел, 1 + 2 + 3 + ... + n, яку дуже молодий Гаусс швидко розпізнав як просто n(n+1)/2, тим самим уникаючи необхідності виконувати додавання», — <a href="https://www.linkedin.com/in/cjordanball/">С. Джордан Балл</a></blockquote><p>Примітка: ще один спосіб провести переоцінку — почати спочатку. Видаліть усе і почніть на свіжу голову. Я серйозно. Ви будете здивовані, наскільки це ефективно.</p><ul><li>Займіться дослідженням: ах, старий добрий Google. Ви правильно прочитали. Незалежно від того, яка у вас проблема, хтось, ймовірно, вже її розв’язав. Знайдіть цю людину/розв’язок. Робіть це навіть якщо ви вже розв’язали проблему! (Ви можете багато чому навчитися з розв’язків інших людей).</li></ul><p>Застереження: не шукайте розв’язки великої проблеми. Шукайте лише розв’язки проблемок. Чому? Якщо ви не будете боротися (навіть трохи), ви нічого не навчитеся. А якщо ви нічого не навчитеся, ви даремно витратите час.</p><h4 id="--2"><strong>Практикуйтесь</strong></h4><p>Не очікуйте, що будете професіоналом за один тиждень. Якщо ви хочете добре розв’язувати проблеми, розв’язуйте багато проблем!</p><p>Практика. Практика. Практика. Пройде зовсім небагато часу, і ви почнете розуміти, що «цю проблему можна легко розв’язати за допомогою &lt;вставте сюди якесь поняття&gt;».</p><p>Як практикуватися? Варіантів повно!</p><p>Шахи, математичні задачі, судоку, го, монополія, відеоігри, CryptoKitties, бла... бла... бла....</p><p>Насправді загальна риса серед успішних людей — їхня звичка практикувати розв’язок мікропроблем. Наприклад, Пітер Тіль грає в шахи, а Ілон Маск грає у відеоігри.</p><blockquote>«Байрон Рівз сказав: «Якщо ви хочете побачити, як може виглядати бізнес-лідерство через три-п’ять років, подивіться, що відбувається в онлайн-іграх.»</blockquote><blockquote>Перенесемося до сьогодення. Ілон [Маск], Рейд [Гоффман], Марк Цукерберг та багато інших кажуть, що ігри стали основою їхнього успіху у побудові своїх компаній», — Мері Мікер (<a href="https://www.recode.net/2017/5/31/15693686/mary-meeker-kleiner-perkins-kpcb-slides-internet-trends-code-2017">звіт про інтернет-тенденції за 2017 рік</a>)</blockquote><p>Чи означає це, що вам потрібно просто грати у відеоігри? Зовсім ні.</p><p>Але яка мета відеоігор? Правильно, розв’язок проблем!</p><p>Тому потрібно знайти спосіб практики. Щось, що дозволяє розв’язувати багато мікропроблем (бажано, щоб вам це подобалося).</p><p>Наприклад, мені подобаються завдання з програмування. Кожного дня я намагаюся виконати хоча б одне завдання (зазвичай на <a href="https://coderbyte.com">Coderbyte</a>).</p><p>Як я вже сказав, усі проблеми мають схожі шаблони.</p><h4 id="--3"><strong>Висновок</strong></h4><p>Це все, друзі!</p><p>Тепер ви краще розумієте, що означає «мислити, як програміст».</p><p>Ви також знаєте, що розв’язок проблем — це неймовірна навичка, яку варто розвивати (метанавичка).</p><p>А якщо цього недостатньо, то ви також знаєте, як практикувати навички розв’язку проблем!</p><p><em>Фух</em>... Досить круто, правда?</p><p>Зрештою, я бажаю вам стикатися з багатьма проблемами.</p><p>Ви правильно прочитали. Принаймні тепер ви знаєте, як їх розв’язувати! (і пам’ятайте, що з кожним розв’язком ви стаєте кращими).</p><blockquote>«Як тільки ви думаєте, що успішно пройшли одну перешкоду, з’являється інша. Але саме це робить життя цікавим. [...]</blockquote><blockquote>Життя — це процес подолання перешкод; це укріплені рубежі, через які ми повинні прорватися.</blockquote><blockquote>Кожен раз ви чогось навчаєтесь.</blockquote><blockquote>Кожен раз ви розвиваєте силу, мудрість і перспективу.</blockquote><blockquote>Кожен раз відступає частина конкуренції, допоки залишитесь лише ви: найкраща версія себе», — Раян Голідей («<a href="https://www.amazon.com/dp/1591846358/?tag=richardreeze-20">Перешкода як шлях</a>»)</blockquote><p>А тепер до розв’язку проблем!</p><p>Бажаю удачі?</p><p><strong>Окрема подяка</strong> <a href="https://www.linkedin.com/in/cjordanball/">С. Джордану Баллу</a> та <a href="http://vantonspraul.com/">В. Антону Спраулу</a>. Усі корисні поради — від них.</p><p>Дякую, що прочитали! Якщо вам сподобалося, спробуйте, скільки разів ви зможете натиснути на кнопку миші за 5 секунд. Це чудове кардіо для пальців ТА допоможе іншим побачити цю історію.</p> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Як перевірити, чи в словнику на Python існує ключ ]]>
                </title>
                <description>
                    <![CDATA[ Python — одна з найпопулярніших мов програмування сьогодення. Її використовують в багатьох галузях, а найчастіше в науці про дані, машинному навчанні та веброзробці. Під час програмування на Python ви часто використовуватимете різні структури даних, одною з яких є словник. Словник — це колекція пар ключ-значення, яка дозволяє зберігати та знаходити ]]>
                </description>
                <link>https://www.freecodecamp.org/ukrainian/news/yak-pereviryty-chy-v-slovnyku-na-python-isnuye-klyuch/</link>
                <guid isPermaLink="false">666c0a4f3220e30408fab522</guid>
                
                    <category>
                        <![CDATA[ python ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Anastasiia Buievych ]]>
                </dc:creator>
                <pubDate>Fri, 14 Jun 2024 10:12:56 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/ukrainian/news/content/images/2024/06/CoverImage-1.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p data-test-label="translation-intro">
        <strong>Оригінальна публікація:</strong> <a href="https://www.freecodecamp.org/news/how-to-check-if-a-key-exists-in-a-dictionary-in-python/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">How to Check if a Key Exists in a Dictionary in Python – Python Dict Has Key</a>
      </p><p>Python — одна з найпопулярніших мов програмування сьогодення. Її використовують в багатьох галузях, а найчастіше в науці про дані, машинному навчанні та веброзробці.</p><p>Під час програмування на Python ви часто використовуватимете різні структури даних, одною з яких є словник.</p><p>Словник — це колекція пар ключ-значення, яка дозволяє зберігати та знаходити дані.</p><p>При роботі зі словниками часто потрібно перевірити, чи існує ключ. Це особливо корисно, якщо ви працюєте з великими наборами даних або вам потрібно отримати значення на основі ключа.</p><p>У цій публікації ми розглянемо різні способи, якими можна перевірити наявність ключа в словнику в Python. Розпочнемо!</p><h2 id="-1-in"><strong>Спосіб 1: оператор <code>in</code></strong></h2><p>Щоб перевірити наявність ключа в словнику, можна використати оператор <code>in</code>. Це один з найпряміших способів. Він поверне <code>True</code>, якщо ключ існує, або <code>False</code>, якщо ні.</p><p>Ось приклад його використання:</p><pre><code class="language-python">мій_словник = {'ключ1': 'значення1', 'ключ2': 'значення2', 'ключ3': 'значення3'}

if 'ключ1' in мій_словник:
    print("У словнику є ключ.")
else:
    print("У словнику немає ключа.")
</code></pre><p>У прикладі вище ми перевіряємо, чи <code>ключ1</code> існує в <code>мій_словник</code>. Якщо так, то буде відтворено повідомлення про підтвердження. Якщо ні, то буде надруковано повідомлення про відсутність ключа.</p><h2 id="-2-dict-get-"><strong>Спосіб 2: метод <code>dict.get()</code></strong></h2><p>Метод <code>dict.get()</code> поверне значення, повʼязане із заданим ключем, якщо він існує, або <code>None</code>, якщо ключ не знайдено.</p><pre><code class="language-thon">мій_словник = {'ключ1': 'значення1', 'ключ2': 'значення2', 'ключ3': 'значення3'}

if мій_словник.get('ключ1') is not None:
    print("У словнику є ключ.")
else:
    print("У словнику немає ключа.")
</code></pre><p>У прикладі вище ми використали метод <code>dict.get()</code>, щоб отримати значення, повʼязане з <code>ключ1</code>. Якщо заданий ключ наявний, то <code>мій_словник.get('ключ1') is not None</code> оцінюється як <code>True</code>, отже заданий ключ наявний.</p><h2 id="-3-"><strong>Спосіб 3: обробка винятків</strong></h2><p>Обробка винятків дозволяє спочатку спробувати та отримати значення ключа, а потім, якщо виникне виняток <code>KeyError</code>, обробить його.</p><pre><code class="language-python">мій_словник = {'ключ1': 'значення1', 'ключ2': 'значення2', 'ключ3': 'значення3'}

try:
    value = мій_словник['ключ1']
    print("У словнику є ключ.")
except KeyError:
    print("У словнику немає ключа.")
</code></pre><p>Код вище дозволяє отримати значення, повʼязане з <code>ключ1</code>. Якщо він існує, код в межах <code>try</code> виконується та друкується повідомлення. А якщо виникає виняток <code>KeyError</code>, значить ключа не існує та виконується код в межах <code>except</code>.</p><h3 id="-"><strong>Додатково</strong></h3><ul><li><strong>Наявність ключа vs значення</strong><br>Методи, які ми розглянули вище, перевіряють лише наявність ключа. Якщо потрібно перевірити наявність значення, потрібно ітерувати над значеннями за допомогою метода, наприклад, <code>dictname.values()</code>.</li><li><strong>Ефективність</strong><br>Різні методи надають різну ефективність, що залежить від розміру словника. Загалом оператор <code>in</code> підходить для малих і середніх словників, а <code>dict.get()</code> та обробка винятків — для великих.</li><li><strong>Поєднання методів</strong><br>Під час роботи з методами словника Python добре те, що їх можна поєднувати. Наприклад, можна використати оператор <code>in</code>, щоб перевірити наявність словника, та <code>dict.get()</code>, щоб отримати його значення.</li><li><strong>Використання<strong> <code>dict.setdefault()</code></strong></strong><br>Це дозволить перевірити, чи існує ключ, та поверне значення, якщо ключ наявний. Якщо ключ відсутній, ви можете встановити значення за замовчуванням під час його додавання до словника.</li></ul><p>Щоб комфортно працювати зі словниками в Python, достатньо зрозуміти додаткову інформацію вище та практикуватись над використанням цих методів.</p> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Що означає $ в Python? Значення оператора та приклади форматування рядків ]]>
                </title>
                <description>
                    <![CDATA[ Оператори — це спеціальні символи в програмуванні, за допомогою яких виконують різні операції на змінних (операндах). Python має різні оператори, до яких належать арифметичні оператори, оператори присвоєння, логічні оператори, булеві оператори, оператори порівняння та багато інших. Під час вивчення операторів у Python ви не зустрічатимете знак долара ($), але його ]]>
                </description>
                <link>https://www.freecodecamp.org/ukrainian/news/shcho-oznachaye-u-python-znachennya-operatora-ta-pryklady-formatuvannya-ryadkiv/</link>
                <guid isPermaLink="false">66694fcd3220e30408fab382</guid>
                
                    <category>
                        <![CDATA[ python ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Anastasiia Buievych ]]>
                </dc:creator>
                <pubDate>Wed, 12 Jun 2024 12:56:08 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/ukrainian/news/content/images/2024/06/what-does-the-dollar-sign-mean-in-python.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p data-test-label="translation-intro">
        <strong>Оригінальна публікація:</strong> <a href="https://www.freecodecamp.org/news/what-does-the-dollar-sign-mean-in-python/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">What Does $ Mean in Python? Operator Meaning + String Formatting Examples</a>
      </p><p>Оператори — це спеціальні символи в програмуванні, за допомогою яких виконують різні операції на змінних (операндах).</p><p>Python має різні оператори, до яких належать арифметичні оператори, оператори присвоєння, логічні оператори, булеві оператори, оператори порівняння та багато інших.</p><p>Під час вивчення операторів у Python ви не зустрічатимете знак долара ($), але його можна використовувати для форматування рядків за допомогою класу шаблону рядків.</p><p>У цій публікації ви дізнаєтесь, як форматувати рядки в Python за допомогою таких методів:</p><ul><li>клас шаблону рядків;</li><li>оператор <code>%</code>;</li><li>метод <code>format()</code>;</li><li>f-рядки.</li></ul><h2 id="-python-"><strong>Як відформатувати рядки в Python за допомогою класу шаблону рядків</strong></h2><p>Клас шаблону рядків дозволяє замінити або вставити значення змінної в межах рядків.</p><p>Щоб використати клас шаблону, спочатку його потрібно імпортувати з модуля <code>string</code>. Тобто:</p><pre><code class="language-python">from string import Template</code></pre><p>Ось як використати його для форматування рядків:</p><pre><code class="language-python">from string import Template

шаблон_рядка = Template("Мене звати $ім’я! Я створюю контент на $мова")

вивід = шаблон_рядка.substitute(ім’я="Іхечікара", мова="Python")

print(вивід) # Мене звати Іхечікара! Я створюю контент на Python</code></pre><p>У прикладі вище ми створили змінну під назвою <code>шаблон_рядка</code>, щоб зберегти рядок <code>"Мене звати $ім’я. Я створюю контент на $мова"</code>.</p><p>До класу шаблону було передано рядок як параметр: <code>Template("Мене звати $ім’я! Я створюю контент на $мова")</code>.</p><p>Як бачите, деякі символи в межах рядка мають оператор <code>$</code> перед собою: <code>$ім’я</code> та <code>$мова</code>. Це заповнювачі, до яких можна призначити значення.</p><p>У наступному рядку ми замінили значення цих заповнювачів: <code>шаблон_рядка.substitute(ім’я="Іхечікара", мова="Python")</code>.</p><p>У виводі заповнювачі буде замінено цими значеннями.</p><p>З <code>"Мене звати $ім’я! Я створюю контент на $мова"</code> на <code>"Мене звати Іхечікара! Я створюю контент на Python"</code>.</p><h2 id="-python--1"><strong>Як відформатувати рядки в Python за допомогою оператора <code>%</code></strong></h2><p>Оператор <code>%</code> має різні заповнювачі, які використовують для форматування рядків. Весь список можна переглянути <a href="https://docs.python.org/uk/3/library/stdtypes.html#printf-style-string-formatting">тут</a>.</p><p>Ось приклад, де використано заповнювачі <code>%s</code> та <code>%d</code>:</p><pre><code class="language-python">ім’я = "Степан"
число = 80
print("%s любить число %d" %(ім’я, число)) # Степан любить число 80</code></pre><p>У прикладі вище ми створили дві змінні: <code>ім’я</code> та <code>число</code>.</p><p>Щоб передати ці змінні до рядка, ми використали заповнювачі <code>%s</code> (щоб замінити рядок <code>ім’я</code>) та <code>%d</code> (щоб замінити ціле <code>число</code>). Тобто:</p><pre><code class="language-python">"%s любить число %d"</code></pre><p>Щоб переконатись, що змінні розташовані на правильному місці, ми надали назви змінних в круглих дужках: <code>%(ім’я, число)</code>.</p><p>Об’єднавши це все, ми отримаємо:</p><pre><code class="language-python">"%s любить число %d" %(ім’я, число)</code></pre><p><br>Таким чином заповнювач <code>%s</code> шукатиме будь-який рядок, збережений в круглих дужках, та замінить його. Заповнювач <code>%d</code> робитиме те саме для цілочисельного значення.</p><h2 id="-python-format-"><strong>Як відформатувати рядки в Python за допомогою методу <code>format()</code></strong></h2><p>Метод <code>format()</code> дуже схожий до оператора <code>%</code>.</p><p>Замість того, щоб використовувати заповнювачі, використайте фігурні дужки <code>{}</code>, щоб замінити параметри методу <code>format()</code>.</p><p>Ось приклад::</p><pre><code class="language-python">ім’я = "Степан"
число = 80
print("{} любить число {}".format(ім’я, число)) # Степан любить число 80</code></pre><p>Фігурні дужки в прикладі вище буде замінено на параметри методу <code>format()</code>: <code>format(ім’я, число)</code>.</p><p>З <code>"{} любить число {}</code> на <code>"Степан любить число 80"</code>.</p><h2 id="-python-f-"><strong>Як відформатувати рядки в Python за допомогою f-рядків</strong></h2><p>Метод з f-рядками також використовує фігурні дужки. У попередньому розділі, щоб скористатись методом <code>format()</code>, потрібно було використати точкову нотацію.</p><p>Назви змінних за допомогою f-рядків можна передати напряму до фігурних дужок:</p><pre><code class="language-python">ім’я = "Степан"
число = 80
print(f"{ім’я} любить число {число}") # Степан любить число 80</code></pre><p>Щоб використати f-рядки, просто додайте <code>f</code> перед початковими лапками рядка. Це дозволить передати змінні одразу до рядка.</p><p>В межах рядка можна навіть виконати арифметичні операції:</p><pre><code class="language-python">число1 = 20
число2 = 80
print(f"{число1} + {число2} = {число1 + число2}") # 20 + 80 = 100</code></pre><h2 id="-"><strong>Висновок</strong></h2><p>У цій публікації ми обговорили різні методи форматування рядків у Python.</p><p>Ми розпочали з класу шаблонів рядків, для якого використовують оператор <code>$</code>.</p><p>Потім ми розглянули, як працюють інші методи: оператор <code>%</code>, метод <code>format()</code> та f-рядки.</p><p>Щасливого програмування! Я також пишу про Python на <a href="https://ihechikara.com/">своєму блозі</a>.</p> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Що таке гласморфізм? Як створити скляну картку в Figma ]]>
                </title>
                <description>
                    <![CDATA[ Гласморфізм набирає все більше популярності. Саме завдяки йому дизайн виглядає сучасним та елегантним. У цій публікації ми дізнаємось, що таке гласморфізм, наскільки він доступний та як розробити просту скляну картку. Що таке гласморфізм? Гласморфізм — це стиль, де, як і вказує сама назва, використовуються властивості скла для покращення дизайну. Він ]]>
                </description>
                <link>https://www.freecodecamp.org/ukrainian/news/shcho-take-hlasmorfizm-yak-stvoryty-sklyanu-kartku-v-figma/</link>
                <guid isPermaLink="false">663c835ee65db403e5fe4d92</guid>
                
                    <category>
                        <![CDATA[ дизайн ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Anastasiia Buievych ]]>
                </dc:creator>
                <pubDate>Thu, 09 May 2024 10:28:39 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/ukrainian/news/content/images/2024/05/Glass-Card.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p data-test-label="translation-intro">
        <strong>Оригінальна публікація:</strong> <a href="https://www.freecodecamp.org/news/glassmorphism-how-to-create-a-glass-card-in-figma/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">What is Glassmorphism? How to Create a Glass Card in Figma</a>
      </p><p>Гласморфізм набирає все більше популярності. Саме завдяки йому дизайн виглядає сучасним та елегантним.</p><p>У цій публікації ми дізнаємось, що таке гласморфізм, наскільки він доступний та як розробити просту скляну картку.</p><h2 id="-"><strong>Що таке гласморфізм<strong>?</strong></strong></h2><p>Гласморфізм — це стиль, де, як і вказує сама назва, використовуються властивості скла для покращення дизайну. Він надає прозорий або напівпрозорий вигляд елементам.<br><br>Елементи гласморфізму добре виглядають на яскравих, кольорових фонових зображеннях, які підкреслюють ефект скла. Гласморфізм допомагає додати візуальну ієрархію до дизайну та зосередити увагу на контенті, який потрібно виділити.</p><h2 id="--1"><strong><strong>‌‌</strong>Доступність гласморфізму</strong></h2><p>Гласморфізм — не найкращий вибір, якщо ви розробляєте дизайн для людей з порушеннями зору. Вам доведеться дуже обережно підбирати кольори та шрифти, щоб забезпечити правильне інтерпретування дизайну читачами екрана та іншими пристроями.</p><p>До того ж гласморфізм може спричинити сповільнення роботи сайту і збільшити споживання батареї пристрою.</p><p>Проте, якщо ви зможете розв’язати ці проблеми, дизайн з використанням скла справді виглядатиме дуже круто.</p><p>Ось декілька порад, які допоможуть покращити доступність дизайну з використанням скла:</p><ol><li>Використовуйте ефект прозорості або розмиття в міру. Такий ефект виглядає найкраще, якщо використовується лише на двох або трьох елементах.</li><li>Встановіть чітку ієрархію. Правильний інтервал між картками в макеті дизайну та виокремлення правильних елементів допоможуть з розв’язанням проблем доступності. Пам’ятайте, що візуальна ієрархія допомагає користувачам отримати правильні візуальні вказівки.</li><li>Виберіть правильний фон. Переконайтеся, що фон не млявий чи нудний. Яскраві кольори фону допоможуть підкреслити ефект. Звичайно, це також забезпечить естетичний вигляд.</li><li>Використовуйте більші шрифти, щоб зробити дизайн з використанням скла більш доступним. Також вибирайте шрифти, які контрастують зі скляним фоном.</li></ol><h2 id="--2"><strong>Приклади гласморфізму</strong></h2><p>Щоб ви краще зрозуміли, як виглядає дизайн з використанням гласморфізму, ось декілька прикладів, де застосовано цю техніку:</p><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2022/04/2022-04-01--19--1.png" class="kg-image" alt="2022-04-01--19--1" width="600" height="400" loading="lazy"><figcaption>Автор: Sahid Aldi Susilo</figcaption></figure><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2022/04/2022-04-01--20--1.png" class="kg-image" alt="2022-04-01--20--1" width="600" height="400" loading="lazy"><figcaption>Автор: Stefan Brown‌</figcaption></figure><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2022/04/2022-04-01--22--1.png" class="kg-image" alt="2022-04-01--22--1" width="600" height="400" loading="lazy"><figcaption>Автор: Pratheek Purohit</figcaption></figure><p>Розглянемо, як можна відтворити щось схоже до останнього прикладу.</p><h2 id="-figma"><strong>Як створити скляну картку в <strong>Figma</strong></strong></h2><p>Скляні картки — це звичайні картки, створені з використанням гласморфізму. Це можуть бути кредитні картки, картки профілю тощо.</p><p>Дотримуйтесь наведених нижче кроків, щоб створити скляну кредитну картку в Figma.</p><h3 id="-1-"><strong>Крок 1: встановіть кольоровий фон</strong></h3><p>Важливо використати яскравий фон, оскільки він допомагає підкреслити дизайн з використанням скла та зробити його помітнішим. Ви можете скористатися плагіном <a href="https://www.figma.com/community/plugin/744909029427810418/uigradients">uiGradients</a>, щоб власноруч вибрати градієнт, як я зробила нижче.</p><figure class="kg-card kg-image-card kg-width-wide"><img src="https://www.freecodecamp.org/news/content/images/2022/04/2022-04-01-1.png" class="kg-image" alt="2022-04-01-1" width="600" height="400" loading="lazy"></figure><h3 id="-2-"><strong>Крок 2: намалюйте фігуру</strong></h3><p>Ми будемо імітувати форму фізичної кредитної картки, яка виглядає як прямокутник. </p><p>Намалюйте прямокутник розміром 640×400 та встановіть радіуси кутів на 40pt.</p><figure class="kg-card kg-image-card kg-width-wide"><img src="https://www.freecodecamp.org/news/content/images/2022/04/2022-04-01--1--1.png" class="kg-image" alt="2022-04-01--1--1" width="600" height="400" loading="lazy"></figure><h3 id="-3-"><strong>Крок 3: заповніть фігуру</strong></h3><p>Далі потрібно заповнити фігуру напівпрозорими кольорами, наприклад, білим. Обидва кольори градієнта мають бути білими, але їхня прозорість має бути різною.</p><figure class="kg-card kg-image-card kg-width-wide"><img src="https://www.freecodecamp.org/news/content/images/2022/04/2022-04-01--2--1.png" class="kg-image" alt="2022-04-01--2--1" width="600" height="400" loading="lazy"></figure><figure class="kg-card kg-image-card kg-width-wide"><img src="https://www.freecodecamp.org/news/content/images/2022/04/2022-04-01--3--2.png" class="kg-image" alt="2022-04-01--3--2" width="600" height="400" loading="lazy"></figure><h3 id="-4-"><strong>Крок 4: застосуйте розмиття фону</strong></h3><p>Встановіть значення <code>blur</code> на 40 або будь-яке інше значення, залежно від того, наскільки ви хочете його розмитим.</p><figure class="kg-card kg-image-card kg-width-wide"><img src="https://www.freecodecamp.org/news/content/images/2022/04/2022-04-01--4--1.png" class="kg-image" alt="2022-04-01--4--1" width="600" height="400" loading="lazy"></figure><figure class="kg-card kg-image-card kg-width-wide"><img src="https://www.freecodecamp.org/news/content/images/2022/04/2022-04-01--5--1.png" class="kg-image" alt="2022-04-01--5--1" width="600" height="400" loading="lazy"></figure><h3 id="-5-"><strong><strong>‌‌</strong>Крок 5: додайте обведення, щоб створити кордони</strong></h3><p>Додавання кордонів покращує вигляд картки. Це допомагає забезпечити більший контраст внаслідок товстіших і помітніших кордонів.</p><figure class="kg-card kg-image-card kg-width-wide"><img src="https://www.freecodecamp.org/news/content/images/2022/04/2022-04-01--6--1.png" class="kg-image" alt="2022-04-01--6--1" width="600" height="400" loading="lazy"></figure><h3 id="-6-"><strong><strong>‌</strong>Крок<strong> 6</strong>: застосуйте ефект тіні</strong></h3><p>Використання ефекту тіні допомагає зміцнити візуальну ієрархію.</p><p>Встановіть значення <code>blur</code> на 24 та <code>spread</code> на -1.</p><figure class="kg-card kg-image-card kg-width-wide"><img src="https://www.freecodecamp.org/news/content/images/2022/04/2022-04-01--7--1.png" class="kg-image" alt="2022-04-01--7--1" width="600" height="400" loading="lazy"></figure><h3 id="-7-"><strong><strong>‌</strong>Крок 7: додайте вміст</strong></h3><p>Тепер ви можете додавати вміст до картки (наприклад, текст, логотип тощо). Щоб отримати логотип Visa та чіп EMV, використайте плагін <a href="https://www.figma.com/community/plugin/735098390272716381/iconify">Iconify</a>, що заощадить вам багато часу.</p><p>Заповніть вміст білим кольором, зменште прозорість та встановіть режим злиття шару на <strong><strong>Overlay</strong></strong>.</p><figure class="kg-card kg-image-card kg-width-wide"><img src="https://www.freecodecamp.org/news/content/images/2022/04/2022-04-01--12-.png" class="kg-image" alt="2022-04-01--12-" width="600" height="400" loading="lazy"></figure><p>Ефект морозу покращує дизайн. Щоб застосувати цей ефект, просто використайте <a href="https://www.figma.com/community/plugin/752558325552095625/noise">плагін Noise</a>, щоб заповнити зображення шумом.</p><p>Якщо плагін вже встановлено, перейдіть до плагінів і натисніть на Noise. Якщо ні, перейдіть на <a href="https://www.figma.com/community/plugins" rel="noreferrer">https://www.figma.com/community/plugins</a>, щоб встановити плагін.</p><p>Як тільки ви встановили і вибрали плагін, встановіть режим злиття шару на <strong><strong>Overlay</strong></strong> і зменште прозорість.</p><figure class="kg-card kg-image-card kg-width-wide"><img src="https://www.freecodecamp.org/news/content/images/2022/04/2022-04-01--13--1.png" class="kg-image" alt="2022-04-01--13--1" width="600" height="400" loading="lazy"></figure><p>Картка матиме такий вигляд після застосування плагіну Noise:</p><figure class="kg-card kg-image-card kg-width-wide"><img src="https://www.freecodecamp.org/news/content/images/2022/04/2022-04-01--14--1.png" class="kg-image" alt="2022-04-01--14--1" width="600" height="400" loading="lazy"></figure><p>Тепер встановіть режим злиття шару на <strong><strong>Overlay</strong></strong>.</p><figure class="kg-card kg-image-card kg-width-wide"><img src="https://www.freecodecamp.org/news/content/images/2022/04/2022-04-01--15--1.png" class="kg-image" alt="2022-04-01--15--1" width="600" height="400" loading="lazy"></figure><p>Зменште прозорість картки. Поекспериментуйте з прозорістю, допоки не отримаєте бажаного ефекту.</p><p>Щоб зменшити прозорість, натисніть на будь-яку цифру на клавіатурі: 2 для 20%, 3 для 30%, 4 для 40% і так далі.</p><figure class="kg-card kg-image-card kg-width-wide"><img src="https://www.freecodecamp.org/news/content/images/2022/04/2022-04-01--17--4.png" class="kg-image" alt="2022-04-01--17--4" width="600" height="400" loading="lazy"></figure><p>На цьому картка готова.</p><h2 id="--3"><strong>Висновок</strong></h2><p>Додавати гласморфізм до дизайну досить легко. Оскільки гласморфізм стає все більш популярним, в майбутньому можуть знадобитись знання, як створити такий дизайн.</p> ]]>
                </content:encoded>
            </item>
        
    </channel>
</rss>
