Frontend-розробники повинні бути в темі всього

Думки Кріса Койєра

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

Від перекладача

Всім привіт, з вами Максим Іванов, і сьогодні ми поговоримо на досить гостру тему в сфері веб-розробки. Як стверджує Кріс Койєр, frontend-розробник повинен розбиратися в дуже багатьох речах, про які не всі навіть і замислюються. Звичайно, ми повинні розуміти, що frontend-розробник не головний в процесі розробки будь-якого онлайн-сервісу або ПО в цілому. На ту ж позицію frontend-розробника ви знайдете більше відгуків на вакансію, ніж на позицію backend-розробником. Але чому ж тоді Кріс Койєр вважає, що працювати frontend-розробником складніше, бо ти повинен спеціалізуватися в усьому. Звичайно, ситуацій в житті дуже багато, різні компанії по-різному використовують своїх фахівців, але в чому напевно повинен розбиратися frontend-розробник? Про це ми сьогодні і поговоримо. Чекаю коментарів на цю тему, а зараз приступимо.

Зміст

1. Frontend-розробник повинен розбиратися в дизайні
2. Frontend-розробник повинен розбиратися в роботі серверної частини (backend)
3. Frontend-розробник повинен розбиратися в роботі мереж
4. Frontend-розробник повинен розбиратися в продуктивності
5. Frontend-розробник повинен розбиратися в контент-стратегії
6. Frontend-розробник повинен розбиратися в базах даних
7. Frontend-розробник повинен розбиратися у тестуванні
8. Frontend-розробник повинен розбиратися в системах збірки
9. Frontend-розробник повинен розбиратися в методологіях розробки
10. Frontend-розробник повинен розбиратися в налаштуванні веб-серверів
11. Frontend-розробник повинен розбиратися в юзабіліті
12. Frontend-розробник повинен розбиратися в мобільному дизайні

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

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

До прочитання:

1. Пам'ятка дизайнеру сайтів

2. Принцип цикади і чому він важливий для веб-дизайнерів

3. Стів Коло «Веб-дизайн або Не змушуйте мене думати»

4. Якоб Нільсен «Веб-дизайн»

5. Дональд Норман «Дизайн звичних речей»

6. Джеф Раскін «Інтерфейс»

7. Як за 15 років змінилися головні сторінки Apple, Microsoft, IBM, Sony

8. Ководство

9. Про дизайн

10. Чому курсор миші нахилений на 45 °?

11. Наберіться сміливості зробити не як все. 12 застарілих інтерфейсних і технологічних рішень

12. Імена людей та інтерфейс

13. User experience design: як побудувати сайт для клієнтів, а не для себе

14. Головні особливості китайського веб-дизайну та їх витоки

Frontend-розробник повинен розбиратися в роботі серверної частини (backend)

Навіть якщо ви і не backend-розробник, то ви явно усвідомлюєте всю важливість серверної частини. Ви розумієте, з чим взаємодіє backend, що передається на сервер, а що ні. Ви знаєте про обов'язки backend-розробника. Ви розумієте, яка мова використовується на сервері, і при цьому повинні вміти пояснити, що повинен дати вам backend і що потрібно від серверної частини frontend-а.

До прочитання:

1. Чого ми навчилися, розробляючи backend

2. Співбесіда на посаду PHP Backend Developer у Німеччині

3. Пишемо backend для мобільного додатку за кілька хвилин

4. Що має бути попереду фронтенд або бекенд?

5. Що потрібно знати, щоб стати Backend розробником?

6. Що повинен знати «PHP Junior Developer без досвіду роботи»?

7. Якими технологіями повинен володіти backend розробник (рівень початкових знань - новачок +)?

Frontend-розробник повинен розбиратися в роботі мереж

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

До прочитання:

1. Принципи роботи мережі Інтернет

2. Архітектура та принципи мережі

3. Принцип роботи торрент-мереж і як досягається висока швидкість

4. Підручник з TCP/IP для початківців

5. Domain Name Service - Служба доменних Імен

Frontend-розробник повинен розбиратися в продуктивності

Якщо ви не зосереджені на продуктивності, то знаєте, що продуктивність має важливе місце в успіху вашого проекту. Frontend-розробники знають про цей нелегкий світ. Потрібні навички допоможуть вам здобути швидку перемогу в довгій боротьбі. Необхідно розуміти наскільки швидким повинен бути backend, а також, що решта 80% часу це завантаження сайту, тобто це frontend.

До прочитання:

1. Продуктивність web: Why Performance Matters

2. Тонкості продуктивності

3. Виграш у продуктивності для rel = noopener

4. Вимірювання продуктивності веб-сторінок

5. Покращуємо UX за допомогою оптимізації

6. Підходи оптимізації (веб-) програм

7. Приклад веб-продуктивності

8. Продуктивність візуалізації картинок у Web

9. 10 Ways to Test Your Website Performance

Frontend-розробник повинен розбиратися в контент-стратегії

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

До прочитання:

1. Як створити контент-стратегію, яку обговорюватимуть

2. Супер контент-стратегія. 5 успішних прикладів

3. Чи потрібна контент-стратегія при наповненні сайту?

4. Ерін Кіссейн «Основи контентної стратегії»

5. Як побудувати SMM-стратегію: покроковий план просування в соціальних мережах

6. Як оптимізувати контент для SEO і SMM?

Frontend-розробник повинен розбиратися в базах даних

Контент зберігається в базі даних. База даних повинна коректно працювати з контентом. А frontend-розробник повинен вміти працювати з тим, що приходить йому з цієї самої бази даних. Frontend-розробнику при роботі з відповіддю бази даних потрібно вміти комбінувати контент з шаблонами на сайті.

До прочитання:

1. Введення до бази даних

2. Бази даних: SQL (DDL/DML)

3. Прискорюємо базу даних веб-сайту

4. Веб-інтерфейс для баз даних розміром в один .php файл

5. Можливості PostgreSQL, яких немає в MySQL, і навпаки

6. HTML 5. Робота з Web SQL базою даних

7. Бази даних і NoSQL

8. Як відобразити 350 мільйонів рядків з бази даних на Веб-формі

9. Вбудована JavaScript база даних з прицілом на API сумісність з MongoDB

Frontend-розробник повинен розбиратися у тестуванні

Існує велика кількість видів тестування. Інтеграційне тестування. Регресійне тестування. Тестування користувача!

До прочитання:

1. Тестування програмного забезпечення

2. Навіщо потрібні тести?

3. Модульні тести та інтеграційні: в чому різниця?

4. Тестування

5. JavaScript Testing курс (eng)

6. QUnit. Тестування javascript коду

7. Як розвиватися початківцю тестувальнику?

8. Підвищуємо стабільність Front-end

9. Бек Кент. Екстремальне програмування. Розробка через тестування

10. Пишемо свій перший юніт-тест, на прикладі методології BDD та бібліотеки Jasmine

10. Процес тестування мобільних програм

11. Макгрегор Джон, Сайкс Девід. Тестування об "єктно-орієнтованого програмного забезпечення

12. Тестування JS. Кармічний Webpack

Frontend-розробник повинен розбиратися в системах збірки

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

До прочитання:

1. Webpack - один з найпотужніших і гнучких інструментів для складання frontend

2. Grunt - Огляд системи збирання

3. Автоматизація збірки

4. Приємне збирання frontend проекту

5. Порівняння популярних систем збирання для frontend-розробників

6. Grunt vs Gulp порівняння систем збірки для front-end розробника

7. Gulp або Grunt, та все одно

8. Методологія складання БЕМ-проекту

Frontend-розробник повинен розбиратися в методологіях розробки

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

До прочитання:

1. Необхідний мінімум для фронтенд-розробника

2. Методології фронтенд-розробки

3. Поради front-end розробнику

4. Якими знаннями має володіти Front-end розробник у 2015 році

5. Що потрібно знати і вміти front end розробнику в 2015/2016

6. Карта розвитку веб-розробника

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

8. Isobar Front-end Code Standards

9. Front-end Style Guides

10. JavaScript Style Guide

11. Coding style (Mozilla)

Frontend-розробник повинен розбиратися в налаштуванні веб-серверів

Без них не було б веб-сайтів.

До прочитання:

1. Основні типи серверів

2. Що таке веб-сервер

3. Веб-сервер

4. Простою мовою про HTTP

5. Веб-сервіси в теорії і на практиці для початківців

6. Порівняння веб-серверів

7. Web-сервер та їх використання для керування навантаженням на додаток.

8. PHP. Вбудований веб-сервер

9. Локальний веб-сервер

10. Використання переваг вбудованого PHP сервера

11. Як підняти сервер для python скриптів за 1 хвилину

Frontend-розробник повинен розбиратися в юзабіліті

Якщо frontend-розробник не дуже добре розбирається в юзабіліті, в будь-якому випадку він повинен розуміти наскільки це важливо. Необхідно вміти тестувати і налагоджувати юзабіліті. Frontend-розробник повинен знати, з ким поговорити на цю тему.

До прочитання:

1. Юзабіліті

2. Юзабіліті сайту

3. 10 порад щодо юзабіліті сайту, заснованих на результатах досліджень

4. Основи юзабіліті (usability) сайтів

5. Юзабіліті-тестування (ІТМО)

6. Usability vs. User Experience

7. What is the difference between UX and UI designer and web designer?

Frontend-розробник повинен розбиратися в мобільному дизайні

Frontend-розробник повинен розуміти, що його сайтом можуть користуватися скрізь, на його сайт можуть зайти з будь-якого пристрою, тому необхідно подбати заздалегідь з цього приводу. Великі екрани, маленькі, сенсорні, застарілі пристрої. Frontend-розробник повинен бути готовий до невідомого!

До прочитання:

1. Кращі практики по мобільному UX від Ніка Бабича

2. Адаптивний веб-дизайн

3. Responsive Web Design: What It Is And How To Use It

4. Книга Ітана Маркотта «Чуйний веб-дизайн»

4. 10 адаптивних фреймворків для веб-дизайну

5. Responsive Web Design Fundamentals курс (eng)

Ув'язнення

Це всього лише частина того, що повинен знати frontend-розробник. Чим більше, тим краще. Все це, звичайно, пізнається в роботі. HTML, CSS, JavaScript, адаптивний дизайн, бібліотеки і фреймворки - цей список може довго не закінчуватися.