Англійська для Eleventy (11ty) розробників

Eleventy (часто пишуть 11ty) — статичний генератор сайтів, який навмисно уникає клієнтського JavaScript-фреймворку — він просто бере шаблони і дані і виводить простий HTML. Його привабливість полягає у простоті, отже, словник, який його оточує, також має тенденцію бути простішим: « каскад даних », « збірки », « скорочені коди ». Проте, пояснення цих слів англійською мовою є важливим, коли ви залучаєте до роботи нового співробітника або пишете документацію. Цей посібник містить умови.

---

Основна філософія

** Типово, нульовий JavaScript на стороні клієнта ** — Eleventy не надсилає до переглядача жодного фрейму виконання, якщо ви навмисно його не додасте; вивід буде простим HTML і CSS, якщо ви не виберете більше.

• “Ми вибрали Eleventy, тому що маркетинговий сайт не потребує жодного клієнта-фрейму - простий HTML завантажується миттєво і немає нічого, що потрібно гідрувати.” *

** Не залежить від мови шаблонів ** — Eleventy підтримує декілька мов шаблонів (Nunjucks, Liquid, markdown, шаблони JavaScript) у одному проекті, замість того, щоб обмежувати вас лише одним синтаксисом.

• “Наші макети написані на Nunjucks, але автори вмісту пишуть на простому markdown — Eleventy обробляє обидва без додаткових налаштувань.” *

---

Каскад даних

Каскадні дані

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

• “Заголовок сторінки походить з її власного тексту, але її розкладка і типовий автор походять з файла даних каталогу, що знаходиться вище за каскад.” *

Фронтальна частина

** Front matter ** — це блок YAML у верхній частині файла шаблона, у якому визначено дані, властиві сторінці — компонування, заголовок, мітки і будь- які нетипові поля.

“Кожен блог пост передня тема встановлює його tags і date — це те, що наші колекції використовують для групування і сортування постів.”

Файл даних каталогу

Файл даних каталогу ** (наприклад, posts.11tydata.js ) застосовує спільні дані до кожного шаблону в цьому каталогу, не повторюючи їх у кожному файлі.

“Замість копіювання одного і того ж шаблону layout і permalink у передній частині кожного повідомлення, ми встановили його один раз у файлі даних каталогу теки повідомлень.”

Обчислювальні дані

** Обчислені дані ** — це дані, отримані з інших даних під час збирання, наприклад, у процесі створення витягу з вмісту статті замість написання його від руки.

“Ми додали обчислені дані, які автоматично генерують оцінку часу читання з кількості слів кожного посту, тому автори не обчислюють його вручну.”

---

Collections

** Збірка ** — названа група елементів вмісту, створена автоматично з спільної мітки або налаштована явно, використовується для створення сторінок списку, на зразок індексу блогу або архіву міток.

“Колекція posts включає кожен файл з тегами post, відсортований за датою — це те, що живить нашу сторінку індексу блогу.”

** Страни** — вбудований у Eleventy механізм розділення великої збірки на декілька сторінок виводу (або створення однієї сторінки на кожен елемент збірки).

• “Ми використовували сторінкування для автоматичного створення сторінки архіву міток для кожної мітки, замість створення сторінки для кожної мітки вручну.” *

---

Використовує словниковий запас

** Shortcode ** — фрагмент, який можна викликати з будь- якого шаблона, схожий на функцію, використовується для уникнення повторення розмітки (наприклад, вбудованого відео YouTube).

“Ми написали {% youtube %} shortcode, щоб автори просто передали ідентифікатор відео, замість того, щоб вставляти повний вбудований розмітку кожного разу.”

** З’ єднання розкладок ** — вкладення одного розкладу всередину іншого (розкладка, що обгортає вміст після розкладки, який обгортається базовим розкладом), щоб не було дублювання спільної структури.

• “Наша розкладка статей обробляє обгортку, що стосується конкретної статті, і вона, у свою чергу, розширює базову розкладку для заголовка і нижнього колонтитула — це ланцюгова розкладка.” *

** Filter ** — функція, яка перетворює значення у шаблоні, наприклад, форматує дату або обрізає рядок, викликається за допомогою синтаксису каналу у Nunjucks або Liquid.

• “Ми написали нетиповий фільтр readableDate, щоб кожен шаблон форматував дати однаково, замість повторення логіки форматування дати повсюди.” *

---

Збудувати і вивести словник

** Копіювання без переходу ** — наказує Eleventy копіювати певні файли або теки (зображення, CSS, шрифти) безпосередньо до каталогу виводу без обробки їх як шаблонів.

• “CSS і зображення скопіюються безпосередньо — Eleventy не намагається створити шаблони для них, він просто копіює їх прямо до теки виводу.” *

** Інкрементальна збірка ** — Прапорець --incremental Eleventy перезбирає тільки файли, які були змінені під час локальної розробки, прискорюючи цикл зворотного зв’ язку.

---

Пояснення простоти Eleventy для команди

Situation	Phrase
Justifying the choice for a content-heavy site	”We don’t need any client-side interactivity here — Eleventy outputs plain HTML, which means faster load times and one less framework to maintain.”
Explaining the data cascade to a new contributor	”Front matter on the page always wins, but shared defaults come from the directory data file — check both before assuming a setting is missing.”
Describing a shortcode	”Instead of pasting the embed code every time, just use the shortcode — it keeps the markup consistent and easy to update later.”
Discussing performance	”There’s no hydration step to think about — the whole page is static HTML, so there’s nothing to profile on the client side.”

Поширені помилки

• Назва каскаду даних « просто передня частина » — передня частина є лише одним шаром; файли даних каталогів і глобальні дані також беруть участь, і порядок першості має значення.
• Сказати « Eleventy не підтримує JavaScript » — програма підтримує шаблони JavaScript і скрипти на стороні клієнта, які ви навмисно додали; типово вона просто не постачає середовище виконання.
• Посилання на shortcode як на «компонент» — shortcodes є шаблонами рівня повторного використання фрагментів, а не тією ж концепцією, що і компонент фрейму з власним станом.

Практичні вправи

1. Поясніть у двох реченнях, чому порядок першості каскаду даних має значення під час зневадження сторінки, яка має неправильний макет.
2. Написати короткий розділ README, у якому буде пояснено, що робити з коротким кодом і коли слід скористатися ним, замість того, щоб повторювати позначення.
3. Написати проект одного абзацу з поясненням, чому вибрати Eleventy для сайту документації без інтерактивних можливостей.

Зв’язані ресурси

• Англійська для розробників Gatsby
• Англійська для розробників Docusaurus
• Англійська для колекцій астрономічного контенту

На практиці: Навігація Nuance в співпраці

Багато розробників, які вивчають англійську як другу мову, стикаються з тонкими відмінностями у фразуваннях, що можуть значно вплинути на спілкування в команді. Це не просто знати слова для «бою» або «рефактору», але розуміти, як ці слова використовуються, і, що важливіше, коли їх використовувати. Розглянемо такий сценарій: ви витратили цілий день на ретельне створення запиту на завантаження (PR), у якому буде описано зміни у стилі компонента. Ви відчуваєте впевненість, підкреслюючи поліпшення в реакції і доступності. Потім, під час перегляду коду, ваш колега залишає коментар: «Це виглядає… агресивно»

“агресивна” не є негативним словом в англійській мові. Може описувати щось сміливе або настійне. Однак, в контексті розробки програмного забезпечення, це часто використовується для того, щоб підкреслено критикувати зміни, які сприймаються як надмірно стилізовані або розрушуючі — потенційно вводячи візуальні конфлікти або порушуючи існуючі макети. Ключ тут - розпізнати цей нюанс. Більш конструктивною відповіддю може бути: “Чи можете ви розібратися, що саме відчуваєте агресивно? Можливо, ми можемо обговорити вплив на загальну систему проектування. “Це змінює фокус від суб’ єктивного судження до можливості для спільного вирішення проблеми. Аналогічно, в обговореннях Slack про проблеми продуктивності, такі фрази, як «це повільно» часто є занадто неясними. Сказати: «Час відповіді API постійно перевищує 200 мс під навантаженням - чи можемо ми дослідити стратегії кешування?» демонструє точну технічну мову і запрошує до цілеспрямованої дискусії.

Інша поширена ситуація пов’ язана з отриманням відгуків щодо вашої документації або описів PR. Рецензент може сказати: « Тут потрібно більше контексту ». Це не обов’ язково критика самого * вмісту *, а скоріше свідчення того, що пояснення не містить достатньо деталей для того, щоб хтось, хто не знайомий з проектом, міг зрозуміти запропоновані зміни. Важливо пам’ятати, що чітке спілкування є найважливішим. Не припускайте, що всі мають такий же рівень знайомства, як і ви — завжди намагайтеся надати достатню інформацію для забезпечення розуміння. Сфокусування уваги на мові, яка може бути використана для дій, і розглядання зворотнього зв’ язку як можливості для пояснення, а не як особистої критики, значно поліпшить ваші навички співпраці.

Нарешті, освоєння використання умовного фразування може бути неймовірно цінним. Замість того, щоб вказати на конкретну проблему (« База даних пошкоджена! »), ви можете сказати: « Ми спостерігали періодичні проблеми з під’ єднанням до бази даних ». Цей м’ який підхід підтверджує ситуацію без негайного приписування вини або підвищення терміну дій. Це відкриває двері для дослідження і обговорення, а не викликає негайну паніку.

eleventy --input data/blog --output .

Ця проста команда демонструє фундаментальний процес роботи у Eleventy — використання каталогу data як джерела інформації для створення статичних сторінок HTML. Сама команда проста, але розуміння її призначення — створення веб-сайту зі структурованого вмісту — є важливим для ефективного спілкування про процес створення і потенційні проблеми під час розгортання.