state_of_css_2020.yml

locale: ua-UA
translations:
  ###########################################################################
  # Introduction
  ###########################################################################

  - key: introduction.css2020
    t: |

      <span class="first-letter">З</span>абудьте все, що ви знаєте про CSS. Або, принаймні, приготуйтеся переглянути свої уявлення про CSS. Якщо ви, як і я, пишете CSS вже більше десяти років, то в 2020 році CSS вже зовсім не той, яким ми звикли його бачити.

      Замість контрольних точок ми тепер можемо використовувати CSS-гріди, щоб створювати динамічні, чуйні розкладки, які адаптуються до будь-якого розміру вьюпорту і при цьому написавши менше коду. Замість використання глобальних таблиць стилів, тепер за допомогою паттерна CSS-in-JS ми можемо писати стилі прямо в коді компонентів і створювати різні дизайн-теми.

      Але найбільше вразило, як Tailwind CSS увірвався на сцену з CSS-підходом utility-first, і змусив нас переосмислити традиційну догму про семантичні назви класів.

      Незалежно від того, чи захочете ви написати хвалебний пост в блозі або гнівну критику в Twitter, ми зібралися тут, щоб показати вам зібрані дані, висвітлити тенденції і, як ми розраховуємо, провести вас через черговий насичений подіями рік в світі CSS!

      ### Команда

      Опитування State of CSS створений і підтримується:

      - [Сашей Грайф (Sacha Greif)](https://twitter.com/sachagreif): Дизайн, текст, код
      - [Рафаэлем Бенитт (Raphaël Benitte)](https://twitter.com/benitteraphael): Аналіз даних, візуалізація даних

      ### Завантаження данних

      Ви можете [завантажити JSON-ісходник з даними за цим опитуванням] (https://www.kaggle.com/sachag/state-of-css). Дайте нам знати, якщо ви зробите власні візуалізації цих даних!

      ### Цікаві посилання

      - [Головна сторінка State of CSS](https://stateofcss.com)
      - [Опитування State of JS](https://stateofjs.com)

      ### Подяки

      Спасибі всім, хто допоміг нам зробити це опитування, особливо [Чень Хуей Цзин (Chen Hui-Jing)](http://chenhuijing.com/), [Філіпу Ягенштедту (Philip Jägenstedt)](https://blog.foolip.org/), [Адаму Аргайлу (Adam Argyle)](https://nerdy.dev/), [Ахмаду Шадіду (Ahmad Shadeed)](https://www.ishadeed.com/), [Роберту Флэку (Robert Flack)](https://github.com/flackr), [Домініку Нгуєну (Dominic Nguyen)](https://www.chromatic.com/), [Еліке Фантазай (Fantasai)](http://fantasai.inkedblade.net/) и [Кіліану Уолхофу (Kilian Valkhof)](https://kilianvalkhof.com/).

      Окрема подяка [Олексію Пильцину (Alexey Pyltsyn)](https://github.com/lex111) за допомогу над перекладами.

      ### Додаткова інформація

      Сайт використовує шрифт IBM Plex Mono. Є питання? Хочете поділитися своєю думкою? [Напишіть нам!] (mailto:hello@stateofjs.com)

      А тепер давайте подивимося, яким був CSS в цьому році!

      <span class="conclusion__byline">– Саша і Рафаель</span>

  ###########################################################################
  # Tshirt
  ###########################################################################

  - key: sections.tshirt.title
    t: Футболка

  - key: sections.tshirt.description
    t: |
      ## Підтримайте нашe опитування і при цьому виглядаєте стильно!

      Невелике оголошення перед результатами опитування. Представляємо вашій увазі нашу власну 🎈🎉👕 футболку State of CSS 👕🎉🎈!

      Вона стане єдиною річчю в гардеробі, яка навчить вас реальним методам роботи з CSS.

      Неважливо, куди ви йдете - на конференцію, співбесіду чи просто на роботу, - ця футболка продемонструє вашу майстерність в CSS краще будь-якої іншої речі!

  - key: tshirt.about
    t: Детальніше про футболку

  - key: tshirt.description
    t: |
      На футболці зображений логотип State of CSS разом з фрагментами CSS-коду, використовуваного для створення кожного елемента. Хто знає, можливо ви навіть дізнаєтеся щось новеньке для себе!

      Наша футболка зроблена з високоякісної супер-м'якої тканини, що складається з трьох матеріалів (трібленд).
      Ця футболка невеликого розміру, тому, якщо ви віддаєте перевагу більш вільному одягу, ми рекомендуємо замовити на один розмір більше вашого звичайного (на фотографіях я в футболці розміру М).

  - key: tshirt.getit
    t: Купити

  - key: tshirt.price
    t: 24 долари (без доставки)

  ###########################################################################
  # Sections Introductions
  ###########################################################################

  - key: sections.user_info.description
    t: |
      В цьому році в опитуванні взяло участь 11492 людини з 102 країн. Вперше в цьому році
      ми змогли перевести опитування на кілька мов завдяки чудовій команді волонтерів.

  - key: sections.features.description
    t: |
      В останні роки спостерігається значне зростання CSS-можливостей, тому не дивно, що
      їх повсюдне використання трохи затягується, тому що спільноті потрібен час, щоб звикнути до нових властивостями.

  - key: sections.units_selectors.description
    t: |
      Ми готові посперечатися, що в цьому розділі ви знайдете щось нове для себе!

  - key: sections.technologies.description
    t: |
      Екосистема CSS переживає свого роду відродження, оскільки більші і старі проекти на кшталт Bootstrap,
      тепер повинні пристосовуватися до нових, таких як Tailwind CSS. Не кажучи вже про цілий рух CSS-in-JS,
      яке хоча ще не стало масовим, проте досить активно розвивається.

  - key: sections.other_tools.description
    t: |
      Тут немає нічого цікавого, але варто відзначити появу браузерів, створених спеціально для розробки
      (Наприклад, Polyplane і Sizzy), які піднімають звичні інструменти розробки на більш високий рівень.

  - key: sections.environments.description
    t: |
      Здатність працювати в різних середовищах - одна із сильних сторін CSS, проте з різних
      причин більшість розробників не приділяють увагу написанню стилів для принтера і поштових клієнтів.
      Хтозна, може бути, вони стануть наступним кордоном в CSS ...?

  - key: sections.resources.description
    t: |
      Інші відповіді в цьому розділі підкреслюють багатство і різноманітність CSS-спільноти,
      а також містять безліч прекрасних блогів і подкастів, які ми думаємо додати в опитування наступного року!

  - key: sections.opinions.description
    t: |
      Ці відповіді показують нам, що мова стає не тільки більш зрілою, але і більш складною.
      А може навіть трохи менш приємною, принаймні через те, як ми намагаємося встежити за всіма новими змінами?

  ###########################################################################
  # Notes
  ###########################################################################

  - key: blocks.gender.note
    t: |
      Якщо вас цікавлять подробиці гендерної динаміки опитування, ми [написали пост в блозі про це] (https://dev.to/sachagreif/is-our-survey-biased-against-women-49oj).
  - key: blocks.css_missing_features.note
    t: |
      З повним набором відповідей на це питання можна ознайомитися в [нашому спеціальному проекті] (https://whatsmissingfromcss.com/).
  - key: blocks.source.note
    t: >

      Ця діаграма об'єднує набір посилань, URL-параметри і відповіді у вільній формі (англійською мовою).

      - State of JS:  поштова розсилка [State of JS](https://stateofjs.com).

      - State of CSS: поштова розсилка State of CSS; сюди відносяться відповіді, що містять `email`, `by email` і т.д.

      - Work: відповіді, що включають `work`, `colleagues`, `coworkers` и т.д.

  ###########################################################################
  # Awards
  ###########################################################################

  - key: award.feature_adoption_delta_award.comment
    t: З відривом **{value}** в 2020 році, CSS-гріди перейшли з категорії нових можливостей в повсякденні.

  - key: award.tool_usage_delta_award.comment
    t: Жоден інший інструмент навіть близько не підійшов до того високого росту (**{value}**), який показав Tailwind CSS за останній рік.

  - key: award.tool_satisfaction_award.comment
    t: Високий ступінь задоволеності (**{value}**) PostCSS показує, що поки ніхто не може зрівнятися з цим дійсно хорошим інструментом.

  - key: award.tool_interest_award.comment
    t: CSS-модулі викликали найбільший інтерес (**{value}**) серед розробників в цьому році.

  - key: award.most_write_ins_award.comment
    t: На багато питань можна відповісти у вільній формі, і PhpStorm вказали **{value}** раз, зробивши його самим популярним варіантом.

  ###########################################################################
  # Conclusion
  ###########################################################################

  - key: sections.conclusion.description
    t: |
      Якщо JavaScript-розробник написав рядок CSS-коду, то чи можна його назвати CSS-розробником?

      Цей айтішний *коан* демонструють виразну тенденцію в світі веб-розробки: у міру того, як все більше і більше CSS-розробників вивчають JavaScript, самі розробники JavaScript починають розуміти, що CSS - це щось більше, ніж просто `font-weight: bold;`.

      Тому опитування про стан CSS вкрай складно проводити: ви отримаєте абсолютно різні відповіді, в залежності від того, хто вам буде відповідати! А як дізнатися, хто з них має рацію?

      А як вам такий коан: вірна відповідь - це коли, немає *ніякої* вірної відповіді. Кожен з численних згаданих інструментів, методологій, фреймворків і бібліотек має своє місце у великій екосистемі фронтенда.

      Розробляєте складний React-додаток? Бібліотека styled-components точно вам знадобиться. Створюєте статичний лендінг? Використовуйте Sass - точно не помилитеся! І навіть незважаючи на те, що Bootstrap дещо втратив колишню популярність, йому нема рівних в тій величезній кількості тем і плагінів, які зроблені на його основі.

      І поки ми пильно стежимо за тими новими штуками, которе з'являються на GitHub щотижня, перш за все давайте не будемо забувати про ті інструмени, техніки і людей, які продовжують вносити свою лепту в розвиток CSS. Нам потрібно об'єднатися і діяти спільно, якщо ми хочемо, щоб CSS став краще в 2021 році і не тільки!

  ###########################################################################
  # Picks
  ###########################################################################

  - key: picks.my_2020_pick
    t: "Мій вибір у 2020 році:"
  - key: picks.intro
    t: Ми попросили учасників CSS-спільноти поділитися своїм "вибором року".

  - key: picks.shadeed9.bio
    t: Автор debuggingcss.com
  - key: picks.shadeed9.description
    t: |
      Медіавираз від контейнера - це довгоочікувана для всіх нас можливість, і я в захваті, що команда Chrome працює над її нативной підтримкою!
  - key: picks.argyleink.bio
    t: Пише CSS в Google
  - key: picks.argyleink.description
    t: |
      Скудна блокова модель CSS з кожним роком стає все динамічніше, і для мене 2020 рік був роком логічних аспектів, ніж фізичних. Контекстний потік контенту, що враховує різні мови? Ось вам, будь ласка, використовуйте.
  - key: picks.sachagreif.bio
    t: Творець цього опитування
  - key: picks.sachagreif.description
    t: |
      У своєму пості блогу Амелія Уоттенбергер (Amelia Wattenberger) зробила просто неймовірну роботу! За допомогою анімації і вікторини ви точно, нарешті, дізнаєтеся, як працює CSS-каскад.
  - key: picks.christianoliff.bio
    t: Фронтенд-розробник в Trimble MAPS
  - key: picks.christianoliff.description
    t: |
      Purge CSS - єдина бібліотека, яку я активно почав використовувати в цьому році. Це відмінний інструмент для видалення невикористаного CSS-коду. Він може значно зменшити розмір вашого CSS-файлу, і до того ж зробити це швидко і просто.
  - key: picks.kilianvalkhof.bio
    t: Веб-розробник і творець Polypane
  - key: picks.kilianvalkhof.description
    t: |
      Властивість `content-visibility` вже зараз істотно підвищує продуктивність моїх веб-додатків, однак разом з цим я вважаю, що такою оптимізацією повинні займатися браузери, а не розробниками.
  - key: picks.walterstephanie.bio
    t: Дизайнер і любитель CSS
  - key: picks.walterstephanie.description
    t: |
      Відеоролики на YouTube, які пояснюють все нові круті CSS-можливості для створення сучасних дизайнів.
  - key: picks.piccalilli_.bio
    t: Дизайнер-фрилансер і автор сайту piccalil.li
  - key: picks.piccalilli_.description
    t: |
      Цей блог - справжнє джерело знань по CSS. Мішель - легенда в CSS, а кожен його пост або керівництво містить корисну інформацію.
  - key: picks.sarasoueidan.bio
    t: Незалежний інженер-проектувальник
  - key: picks.sarasoueidan.description
    t: |
      Мій вибір - це людина, а саме Рейчел Ендрю (Rachel Andrew). Вона навчила CSS-Грід ціле покоління розробників.
  - key: picks.5t3ph.bio
    t: Програміст в Microsoft
  - key: picks.5t3ph.description
    t: |
      У своїй доповіді на конференції Мануель Матузовіч (Manuel Matuzovic) призводить ретельно опрацьовані,
      цікаві та доступні приклади.
  - key: picks.hugogiraudel.bio
    t: Небінарний прихильник доступності та соціокультурного різноманіття
  - key: picks.hugogiraudel.description
    t: |
      Fela - дивовижний інструмент.
      Він досить потужний, досить простий у використанні і при цьому дуже ефективний.
  - key: picks.foolip.bio
    t: Програміст в Google
  - key: picks.foolip.description
    t: |
      Сержіо недавно виправив багато помилок Flexbox в реалізації WebKit і дещо в Chromium,
      зокрема, він додав підтримку відступів між елементами в Flexbox для WebKit.
      Скоро ця можливість з'явиться у всіх сучасних браузерах.
  - key: picks.jina.bio
    t: Дизайн-менеджер і фахівець-практик
  - key: picks.jina.description
    t: |
      Це медіавираз, призначене для скорочення використання анімацій і переходів, спеціально для тих, кому це не до душі.