Всеосяжний посібник з фронтенд-розробки

pic

Зміст

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

  • Що таке фронтенд-розробка?
  • Мови для фронтенд-розробки
  • Фреймворки для фронтенд-розробки
  • Як вибрати правильний фреймворк для фронтенд-розробки
  • Найкращі фреймворки для специфічних випадків
  • Чому варто вивчати фронтенд-розробку?
  • Важливість фронтенд-розробки для адаптивності на всіх пристроях
  • Техніки фронтенд-розробки для адаптивності
  • Найкращі практики для безпеки фронтенду
  • Основні навички для фронтенд-розробника
  • Ролі та обов'язки фронтенд-розробника
  • Тренди фронтенд-розробки у 2025 році
  • Висновок

Вступ

Фронтенд-розробка є критично важливою складовою веб-розробки, яка зосереджена на створенні інтерфейсу користувача (UI) та досвіду користувача (UX) для вебсайтів і вебдодатків. Вона включає розробку візуально привабливих дизайнів, забезпечення безперебійної навігації та оптимізацію продуктивності для користувачів на різних пристроях. Цей посібник охоплює основи фронтенд-розробки, інструменти та технології, що використовуються, а також нові тренди, які формують її майбутнє.

Що таке фронтенд-розробка?

Фронтенд-розробка охоплює проектування та програмування візуальних та інтерактивних елементів вебсайту чи додатка, з якими користувачі взаємодіють безпосередньо. Основні аспекти включають:

  • Інтерфейс користувача (UI): Створення макетів, кнопок, меню та інших візуальних компонентів.
  • Досвід користувача (UX): Забезпечення інтуїтивно зрозумілих та приємних взаємодій.
  • Оптимізація продуктивності: Зменшення часу завантаження та підвищення відгуку сайту.

Фронтенд-розробники перетворюють дизайни на функціональний код, що створює зв'язок між естетичними та операційними елементами вебдодатків.

Мови для фронтенд-розробки

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

HTML (HyperText Markup Language)

HTML є основою будь-якої веб-сторінки. Він структурує вміст та елементи, забезпечуючи правильне розташування всього на сторінці. HTML можна порівняти з каркасом вебсайту, який організовує вміст в такі елементи, як:

  • Заголовки: Назви та підзаголовки, що визначають розділи.
  • Абзаци: Блоки тексту, що передають інформацію.
  • Зображення та мультимедіа: Візуальні елементи, які покращують взаємодію з користувачем.
  • Форми: Інтерактивні елементи для введення даних користувачем.

Без HTML не було б структури для відображення вмісту в браузері.

CSS (Cascading Style Sheets)

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

  • Кольори: Фони, кольори тексту та градієнти.
  • Типографіка: Стилі шрифтів, їх розміри та інтервали.
  • Макети: Розташування елементів за допомогою сіток, flexbox або технік адаптивного дизайну.
  • Анімації: Плавні переходи та ефекти для покращення досвіду користувача.

CSS забезпечує естетичний вигляд сайту та дозволяє йому гарно адаптуватися під різні пристрої завдяки адаптивному дизайну.

JavaScript

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

  • Динамічні оновлення: Зміни в реальному часі без перезавантаження сторінки.
  • Анімації: Візуальні ефекти, такі як згасання або слайдінг елементів.
  • Валідація форм: Перевірка, чи відповідають введені користувачем дані певним критеріям перед відправкою.
  • Інтерактивні елементи: Випадаючі меню, модальні вікна та каруселі.

JavaScript — це магія, яка робить сайти функціональними та залучаючими.

Просунуті інструменти для фронтенд-розробки

Хоча тріо HTML, CSS і JavaScript є основою, сучасна фронтенд-розробка використовує просунуті інструменти для покращення ефективності та масштабованості:

  • TypeScript: Надмножина JavaScript, яка додає статичну типізацію, роблячи код простішим для налагодження та підтримки.
  • CSS-препроцесори (SASS і LESS): Покращують CSS функціями, такими як змінні, вкладеність та міксини, спрощуючи складні стилі.

Ці інструменти дають змогу розробникам створювати масштабовані, зручні для обслуговування та багатофункціональні веб-додатки, відповідаючи сучасним вимогам розробки.

Оволодіваючи цими мовами та інструментами, фронтенд-розробники можуть створювати надзвичайні веб-досвіди, що захоплюють користувачів та забезпечують безперебійну функціональність.

Фреймворки для фронтенд-розробки

Фреймворки для фронтенд-розробки стали невід'ємною частиною сучасної веб-розробки. Вони спрощують і пришвидшують процес розробки, пропонуючи готові компоненти, бібліотеки для повторного використання та системи дизайну, які допомагають розробникам створювати ефективні та візуально привабливі веб-додатки.

Ось огляд деяких популярних фреймворків для фронтенд-розробки:

React: React — потужна бібліотека JavaScript для створення динамічних і інтерактивних інтерфейсів користувача. Розроблений і підтримуваний компанією Facebook, React особливо добре підходить для створення додатків на основі компонентів, які ефективно оновлюються в процесі взаємодії користувача.

Основні характеристики:

  • Архітектура на основі компонентів: Повторно використовувані компоненти сприяють модульності та підтримуваності.
  • Віртуальний DOM: Покращує продуктивність додатків, мінімізуючи пряму маніпуляцію з DOM.
  • Сильна підтримка спільноти: Великі ресурси та плагіни доступні для використання.
  • Багате середовище: Легко інтегрується з інструментами, такими як Redux для керування станом.

Краще для: Динамічних веб-додатків, інтерактивних панелей керування та SPA (односторінкових додатків).

Angular: Angular — це всебічний фронтенд-фреймворк, розроблений компанією Google. Він призначений для створення надійних SPA, зосереджуючи увагу на структурі та масштабованості, що робить його ідеальним вибором для великих корпоративних додатків.

Основні характеристики:

  • Двостороннє зв'язування даних: Автоматична синхронізація даних між моделлю та поданням.
  • Ін’єкція залежностей: Спрощує керування додатками та підвищує тестованість.
  • Типізація на основі TypeScript: Підвищує якість коду завдяки статичній типізації.
  • Багате шаблонне середовище: Легко інтегрує динамічний вміст.

Краще для: Корпоративних додатків, реальних додатків в реальному часі та додатків, що вимагають високої масштабованості.

Vue.js: Vue.js — це прогресивний JavaScript фреймворк, відомий своєю простотою та гнучкістю. Він легкий, але потужний, що робить його підходящим для проектів різної складності.

Основні характеристики:

  • Реактивне зв'язування даних: Автоматичне оновлення компонентів інтерфейсу при зміні даних.
  • Структура на основі компонентів: Заохочує використання повторно вживаного, модульного коду.
  • Гнучкість: Підходить як для малих функцій в існуючих проектах, так і для великих додатків.
  • Ефекти переходу: Вбудовані інструменти для анімації переходів між компонентами.

Краще для: Проектів, що вимагають легкої кривої навчання, швидкого прототипування та високої кастомізації.

Bootstrap: Bootstrap — це популярний CSS-фреймворк, який спрощує створення адаптивних і мобільних перш за все дизайнів.
Він надає попередньо спроектовані компоненти та систему сітки для забезпечення послідовних макетів на різних пристроях.

Основні характеристики:

  • Адаптивний дизайн (Responsive Design): Вбудована система сітки гарантує сумісність з різними розмірами екранів.
  • Попередньо спроектовані компоненти: Включає кнопки, модальні вікна, навігаційні панелі та інше.
  • Кастомізація (Customization): Пропонує опції темізації через змінні Sass.
  • Сумісність з браузерами (Browser Compatibility): Гарантує консистентне відображення на основних браузерах.

Краще для: Швидкого створення адаптивних вебсайтів та забезпечення консистентності дизайну в проектах.

Готові підняти досвід користувача вашого вебсайту на новий рівень? Ознайомтесь з нашими послугами фронтенд-розробки.
Зв’яжіться з нами через WhatsApp: +966549485900 | Телефон: +447380127019 | Емейл: [email protected] | Вебсайт: www.bytecodeit.com

Як вибрати правильний фреймворк для фронтенд-розробки

Вибір правильного фреймворка для фронтенд-розробки є важливим для успіху будь-якого веб-проекту. Правильний фреймворк може підвищити ефективність, покращити продуктивність і забезпечити безперебійну взаємодію з користувачем. Однак із величезною кількістю варіантів вибір найбільш підходящого фреймворка може бути складним. Ось посібник, який допоможе вам прийняти обґрунтоване рішення. Ключові фактори при виборі фреймворка

Вимоги до проекту

Складність додатку: Для великих додатків варто розглянути фреймворки, такі як Angular, які пропонують потужні функції для управління складністю. Для менших проектів можуть підійти легші фреймворки, такі як Vue.js.

Динамічні функції: Якщо вашому додатку потрібні високоінтерактивні компоненти, чудовим вибором будуть React або Vue.js.

Крива навчання (Learning Curve): Оцініть технічну експертизу вашої команди. Фреймворки, як-от Bootstrap та Vue.js, є дружніми для початківців, в той час як Angular має круту криву навчання через свою складність та залежність від TypeScript.

Масштабованість

Якщо ви плануєте масштабувати свій додаток у майбутньому, оберіть фреймворк з функціями, що підтримують масштабованість, такі як Angular або React.

Підтримка спільноти та екосистема: Сильна спільнота розробників та багатий екосистема забезпечують легкість пошуку ресурсів, плагінів та підтримки. Фреймворки, як React і Angular, мають потужну підтримку спільноти.

Продуктивність (Performance): Оцініть здатність фреймворка справлятися з продуктивнісно важкими завданнями. Віртуальний DOM в React і реактивне зв’язування в Vue.js роблять їх сильними кандидатами для потреб з високими вимогами до продуктивності.

Інтеграція з існуючими інструментами: Переконайтесь, що фреймворк добре інтегрується з вашим існуючим стеком і сторонніми бібліотеками.

Кроки до вибору правильного фреймворка

Визначте ваші цілі (Define Your Goals): Визначте мету вашого додатку. Чи будуєте ви платформу для електронної комерції, панель управління чи блог? Кожен тип потребує різного фреймворка.

Оцініть експертизу вашої команди (Analyze Your Team’s Expertise): Оберіть фреймворк, який відповідає навичкам вашої команди, щоб зменшити час на введення в курс справи.

Оцініть функції фреймворка (Evaluate Framework Features): Шукайте функції, такі як двостороннє зв’язування даних (two-way data binding), архітектура на основі компонентів (component-based architecture) та підтримка сучасних веб-стандартів.

Створіть прототип перед впровадженням (Prototype Before Committing): Створіть невеликий прототип, щоб перевірити, наскільки добре фреймворк підходить під ваші вимоги.

Розгляньте довгострокове обслуговування (Consider Long-Term Maintenance): Оберіть фреймворки з добре документованою документацією, регулярними оновленнями та зворотною сумісністю.

Кращі фреймворки для конкретних випадків використання

Випадок використання | Рекомендований фреймворк
Динамічні веб-додатки | React, Vue.js
Корпоративні додатки | Angular
Швидке впровадження дизайну | Bootstrap
Масштабовані, орієнтовані на дані SPA | Angular, React
Мінімалістичні проекти | Vue.js, Bootstrap

Чому варто вчити фронтенд-розробку?

Фронтенд-розробка стала важливим навиком для створення залучаючих, зручних для користувачів вебсайтів та додатків. Незалежно від того, чи ви технологічний ентузіаст, початківець підприємець або шукаєте кар'єрні можливості, знання фронтенд-розробки може відкрити багато нових дверей.
Ось чому вам варто задуматися над вивченням цієї сфери:

Високий попит на фронтенд-розробників

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

Сполучення креативності та технічних навичок

Фронтенд-розробка знаходиться на перетині дизайну та технологій. Вона дозволяє оживити статичні дизайни за допомогою коду, поєднуючи креативність з вирішенням проблем. Якщо вам подобається як художнє самовираження, так і логічне мислення, фронтенд-розробка пропонує ідеальний баланс.

Розширені кар'єрні можливості

Оволодіння фронтенд-розробкою може відкрити багато кар'єрних шляхів, включаючи:

  • Фронтенд-розробник (Front-End Developer)
  • UI/UX дизайнер (UI/UX Designer)
  • Веб-розробник (Web Developer)
  • Розробник мобільних додатків (Mobile App Developer)

Крім того, ці ролі часто супроводжуються конкурентними заробітними платами та можливостями для кар'єрного зростання.

Можливість створювати власні проекти

З навичками фронтенд-розробки ви можете втілювати свої ідеї в реальність. Чи то особистий блог, інтернет-магазин чи портфоліо, фронтенд-розробка дає вам свободу створювати та налаштовувати свої власні цифрові проекти без допомоги інших.

Постійно розвивається галузь

Екосистема фронтенду є динамічною, з новими фреймворками, інструментами та технологіями, що регулярно з'являються. Цей безперервний розвиток забезпечує, що ваш шлях навчання завжди буде захоплюючим і цікавим. Оновлюючи свої знання, ви завжди будете на передовій інновацій.

Розуміння поведінки користувача

Фронтенд-розробка - це не лише кодинг, це створення користувацьких досвідів, орієнтованих на користувача. Поглиблюючи свої знання в цій сфері, ви здобудете розуміння поведінки користувачів, принципів дизайну та доступності, що є безцінними навичками в сучасному цифровому світі.

Шлях до фулстек-розробки

Вивчення фронтенд-розробки часто є першим кроком на шляху до становлення фулстек-розробником (Full-Stack Developer). Коли ви опануєте фронтенд-технології, як HTML, CSS та JavaScript, перехід до бекенд-розробки (Back-End Development) стане набагато легшим, що дозволить розширити ваші навички ще більше.

Можливості для віддаленої роботи

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

Важливість адаптивності фронтенд-розробки на всіх пристроях

Важливість адаптивності фронтенд-розробки на всіх пристроях неможливо переоцінити, особливо в умовах сьогоднішнього цифрового світу.
Ось чому це важливо:

Досвід користувача (User Experience - UX)

  • Безперервна взаємодія: Адаптивний дизайн фронтенду гарантує, що користувачі матимуть послідовний і інтуїтивно зрозумілий досвід, незалежно від того, чи використовують вони десктоп, планшет чи смартфон.
  • Доступність: Він забезпечує доступність контенту для ширшої аудиторії, орієнтуючись на користувачів, які використовують різні пристрої.
  • Покращена навігація: Адаптивні дизайни автоматично підлаштовують навігаційні меню, кнопки та текст, щоб вони залишалися зручними для користування на маленьких екранах.

Пошукова оптимізація (Search Engine Optimization - SEO)

  • Індексація за принципом "Mobile-First": Google надає пріоритет мобільним сайтам у результатах пошуку, що означає, що адаптивний сайт з більшою ймовірністю отримає вищий рейтинг.
  • Швидші часи завантаження: Адаптивні сайти оптимізовані для швидкості, що веде до швидшого завантаження, що є важливим фактором для ранжування.
  • Знижений рівень відмов (Bounce Rate): Сайт, який виглядає добре і функціонує коректно на всіх пристроях, тримає користувачів зацікавленими, знижуючи рівень відмов і збільшуючи тривалість сеансів.

Економічність

  • Єдина кодова база: Замість того, щоб розробляти окремі дизайни для десктопів та мобільних пристроїв, адаптивний підхід використовує одну кодову базу, яка адаптується під різні пристрої, що заощаджує час на розробку та витрати.
  • Легкість в обслуговуванні: Оновлення та виправлення потрібно виконувати лише один раз, що спрощує процес підтримки.

Збільшення залучення та коефіцієнтів конверсії

  • Ширша аудиторія: Оскільки все більше людей користуються мобільними пристроями для доступу до сайтів, адаптивний дизайн гарантує, що жоден потенційний клієнт не буде виключений.
  • Вищі коефіцієнти конверсії: Хорошо спроектований адаптивний інтерфейс допомагає створювати довіру і зменшує тертя у користувацькому шляху, що призводить до вищих конверсій.

Підготовка до майбутнього

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

Конкурентні переваги

  • Виділяйтесь: Оскільки багато бізнесів все ще відстають у впровадженні адаптивного дизайну, наявність адаптивного сайту дає вашому бренду перевагу в професіоналізмі та зручності.
  • Відповідність очікуванням: Користувачі зараз очікують, що сайти будуть бездоганно працювати на їхніх улюблених пристроях. Відповідність цим очікуванням формує довіру та лояльність до бренду.

Кращі практики безпеки фронтенду

Безпека фронтенду є критично важливою складовою сучасної веб-розробки. Вона гарантує захист чутливих даних користувачів та захищає додатки від потенційних загроз. Ось кращі практики для забезпечення безпеки фронтенду веб-додатків:

Впровадження HTTPS

  • Завжди надавайте ваш сайт через HTTPS для шифрування даних під час передачі.
  • Використовуйте HSTS (HTTP Strict Transport Security) для примусового використання HTTPS з'єднань.

Санітаризація введених даних користувачем

  • Валідовуйте та санітуйте всі введення користувача як на клієнтській, так і на серверній стороні, щоб запобігти атакам через ін'єкції.
  • Використовуйте бібліотеки або фреймворки, які надають безпечні механізми обробки введених даних.

Захист від Cross-Site Scripting (XSS)

  • Екрануйте введені користувачем дані перед відображенням у DOM.
  • Використовуйте заголовки політики безпеки контенту (Content Security Policy - CSP) для обмеження ресурсів, які браузер може завантажувати.
  • Уникайте прямого введення сирого HTML або JavaScript в DOM.

Захист кукісів

  • Встановлюйте кукі з прапорцями HttpOnly та Secure.
  • Використовуйте атрибут SameSite для запобігання атакам Cross-Site Request Forgery (CSRF).

Використання безпечних заголовків

  • Налаштуйте заголовки, як от:
    • X-Content-Type-Options: nosniff
    • X-Frame-Options: DENY
    • X-XSS-Protection
  • Використовуйте заголовок Referrer-Policy для контролю інформації про реферер, яка надсилається з запитами.

Ефективна автентифікація та авторизація

  • Уникайте зберігання чутливих даних (наприклад, токенів) в localStorage або sessionStorage.
    Використовуйте захищені кукі.

  • Реалізуйте управління доступом на основі ролей (Role-Based Access Control - RBAC), щоб обмежити несанкціоновані дії.

Безпечні сторонні залежності

  • Регулярно оновлюйте та перевіряйте сторонні бібліотеки та фреймворки.
  • Використовуйте інструменти, такі як npm audit або Snyk, щоб виявити уразливості в залежностях.

Захист від Cross-Site Request Forgery (CSRF)

  • Використовуйте анти-CSRF токени для перевірки автентичності запитів.
  • Реалізуйте атрибут SameSite для кукі, щоб мінімізувати ризики CSRF.

Обмеження витоку даних

  • Уникайте розкриття чутливої інформації у фронтенд-коді або відповідях API.
  • Мінімізуйте використання непотрібних даних у мережевих запитах.

Моніторинг та журналювання подій безпеки

  • Реалізуйте журналювання на клієнтській стороні для захоплення подій, пов'язаних з безпекою.
  • Використовуйте інструменти моніторингу для виявлення аномалій у реальному часі.

Безпечні взаємодії з API

  • Використовуйте надійні механізми автентифікації для запитів до API, такі як OAuth або API ключі.
  • Переконайтесь, що API перевіряють вхідні дані та застосовують обмеження частоти запитів.

Навчання та тренування розробників

  • Проводьте регулярні тренінги з безпеки фронтенду.
  • Заохочуйте дотримання безпечних практик програмування та постійне оновлення знань про нові загрози.

Основні навички для фронтенд-розробника

Успішні фронтенд-розробники володіють поєднанням технічних і м'яких навичок, включаючи:

  • Технічна майстерність: Володіння HTML, CSS, JavaScript та сучасними фреймворками, такими як React або Angular.
  • Дизайнерське чуття: Розуміння теорії кольору, типографіки та принципів компоновки.
  • Розв'язання проблем: Ефективне виявлення та вирішення проблем UI/UX.
  • Контроль версій: Експертиза у використанні інструментів, таких як Git, для спільної роботи над кодом.
  • Комунікація: Ефективне донесення ідей та співпраця з дизайнерами, бекенд-розробниками та іншими зацікавленими сторонами.

Обов'язки фронтенд-розробника

Фронтенд-розробники виконують важливу роль у процесі веб-розробки, часто займаючись такими завданнями, як:

  • Перетворення макетів дизайну на інтерактивні веб-сторінки.
  • Забезпечення сумісності між браузерами та пристроями.
  • Оптимізація продуктивності застосунку для швидкості та масштабованості.
  • Співпраця з бекенд-розробниками для інтеграції API та інших сервісів.
  • Проведення тестів зручності використання та інтеграція відгуків користувачів.

Тренди фронтенд-розробки у 2025 році

Йти в ногу з трендами означає бути актуальним і конкурентоспроможним. Ключові тренди на 2025 рік включають:

  • Інтерфейси на основі штучного інтелекту (AI): Використання машинного навчання для створення персоналізованих користувацьких досвідів.
  • Прогресивні веб-додатки (Progressive Web Apps - PWA): Поєднання найкращих характеристик веб- і мобільних додатків.
  • Motion UI: Інтеграція анімацій та переходів для захоплюючої взаємодії з користувачем.
  • WebAssembly: Забезпечення продуктивності, близької до нативної, для складних застосунків.
  • Оптимізація для голосового пошуку: Адаптація дизайнів для голосового пошуку.

Прийняття цих інновацій визначатиме майбутнє фронтенд-розробки.

Висновок

Фронтенд-розробка є серцем створення захоплюючих цифрових досвідів. Освоївши мови, фреймворки та найкращі практики, розробники можуть створювати адаптивні, безпечні та візуально привабливі додатки, які відповідають потребам користувачів. Підтримка актуальності та вивчення нових тенденцій забезпечить довготривалий успіх у цій динамічній галузі.

Трансформуйте вашу веб-присутність за допомогою експертизи фронтенд-розробки ByteCodeIT.
Зв'яжіться з нами сьогодні!**
WhatsApp: +966549485900 | Телефон: +447380127019 | Email: [email protected] | Відвідайте: www.bytecodeit.com

Для створення внутрішніх та зовнішніх посилань для блогу “Всеосяжний посібник з фронтенд-розробки” на ByteCodeIT, ось як ви можете підійти до цього з прикладами анкорних текстів і речень:

Внутрішні ресурси та послуги

Зовнішні ресурси

  • Для поглибленого вивчення HTML, CSS та JavaScript, MDN Web Docs є цінним ресурсом для розробників усіх рівнів.
  • Для ознайомлення з останніми стандартами веб-розробки відвідайте W3C (World Wide Web Consortium), де встановлюються керівні принципи для вебу.
  • Якщо ви хочете опанувати CSS, сайт CSS-Tricks пропонує безліч уроків і порад для фронтенд-розробників.
  • У випадку сумнівів, спільнота на Stack Overflow може допомогти вам з вирішенням проблем і налагодженням коду.
  • Для детальних статей, інструментів і ресурсів з веб-розробки, сайт Smashing Magazine є ідеальним вибором для розробників і дизайнерів.

Перекладено з: A Comprehensive Guide to Front-end Development

Leave a Reply

Your email address will not be published. Required fields are marked *