Що таке редактор HTML? WYSIWYG редактори Текстові HTML редактори Найкращі HTML редактори Visual Studio Code Notepad++ Sublime Text WebStorm на базі IntelliJ Vim Eclipse Atom Adobe Dreamweaver CC Brackets CoffeeCup HTML редактор HTML-Online  Висновок   Що таке редактор HTML? Якщо спростити відповідь на поставлене запитання, HTML редактор — це програма-інструмент, яка використовується для написання основи веб-сайтів. І, незважаючи на те, що практично будь-який текстовий редактор може використовуватися для створення сайтів, це зовсім не означає, що краще використовувати звичайний текстовий редактор замість спеціально створеного інструменту розробника. Сучасні HTML редактори мають безліч вбудованих механізмів, котрі істотно спрощують роботу з сайтами. Виділення спеціальних синтаксичних конструкцій, перевірка помилок, підказка та вставка часто використовуваних елементів коду HTML, механізми автозаповнення – ці та багато інших механізмів сучасних HTML редакторів щодня полегшують роботу програмістів, верстальників та дизайнерів. Однак редактор HTML — це зовсім не одна програма. Це група програм, кожна з яких має свій функціонал, свої особливості використання, свій набір плюсів та мінусів. Завдання такого інструменту, як HTML редактор, – зменшити витрачені вами зусилля, щоб ваш код залишався функціональним і чистим. Які ж бувають HTML редактори? Класифікуючи їх за функціональним призначенням і можливостями, виділяють: WYSIWYG редактори і текстові редактори HTML.   WYSIWYG редактори WYSIWYG (What You See Is What You Get) – абревіатура редакторів цього типу перекладається як «що бачиш, те й отримаєш». Інша назва таких редакторів – візуальні редактори HTML. Фактично, завдання цього типу редакторів – надати інтерфейс редагування, в якому можна відразу побачити, як виглядатиме реалізація коду на сторінці діючого сайту в браузері. Для найпростішої роботи в редакторі цього типу не потрібне знання HTML. З роботи в такому редакторі простіше стартувати користувачу-початківцю, який не має досвіду написання коду. Такий тип редакторів часто вбудовують у веб-сайти — для спрощення налаштування зовнішнього вигляду сайту за деякими заздалегідь написаними шаблонами або для редагування контенту сайту.   Текстові HTML редактори Власне, як зрозуміло з назви, цей тип HTML редакторів орієнтований безпосередньо на роботу з текстом (кодом). Щоб використовувати такий редактор, вам знадобляться знання як мінімум мови HTML. У процесі використання такого редактора ви не зможете постійно спостерігати готову реалізацію сторінки веб-сайту, що розробляється. Проте застосування текстового редактора дає розробнику значно більше свободи, можливостей оптимізації коду та ін.   Найкращі HTML редактори Ми розглянули, що таке HTML редактор і кілька прикладів того, коли той чи інший тип редакторів можуть використовуватися. Розглянемо декілька популярних продуктів для розроблення, і спробуємо визначити, який текстовий редактор більше підійде для вирішення ваших завдань. Вибір інструменту розроблення – питання смаку. Кожен професійний розробник робить цей вибір, виходячи з власних уподобань, з того, як він працюватиме з HTML редактором. Однак є ряд редакторів коду, яким розробники віддають перевагу найчастіше. Stack Overflow щорічно складає рейтинг інструментів розробників, що використовуються найчастіше. Розглянемо результати цього опитування серед веб-розробників за 2018 рік.       Visual Studio Code   Випущений компанією Microsoft на основі коду Atom, Visual Studio Code має частину функціоналу IDE (Integrated development environment) — інтегрованого середовища розроблення — потужної програми, що містить окрім текстового редактора коду ще ряд механізмів, які дозволяють проводити аналіз коду, запуск його та налагодження. Часто уявляють саме цей інструмент, коли говорять про те, який функціонал повинне мати IDE для веб-розроблення. У багатьох рейтингах безкоштовних HTML редакторів саме Visual Studio Code займає перше місце — розробники надають йому перевагу все частіше і частіше. Так, наприклад, за даними Stack Overflow, цей редактор у 2017 році використовували 24% веб-розробників, а у 2018 році – вже 38,7%. Плюси Visual Studio Code Має значну частину функціоналу IDE. Вбудований потужний механізм автозаповнення IntelliSense. Значна кількість розширень та доповнень. Інтегрований з Git "з коробки". Є вбудований налагоджувач для коду JavaScript, TypeScript, Node.js Відкритий вихідний код додатку. Visual Studio Code розповсюджується безкоштовно. Мінуси Visual Studio Code З мінусів розробники відзначають досить великий час запуску програми. Пошук за проєктами здійснюється відносно повільно.   Notepad ++   Notepad++ – це текстовий редактор, що займає небагато місця в оперативній пам`яті комп`ютера. Він розроблений для комп'ютерів під керуванням Windows. Користувачі Linux можуть використовувати його через Wine. Notepad++, випущений ще в 2003 році, є перевіреним та усталеним інструментом багатьох розробників, будучи зручним текстовим редактором для HTML коду. Цей редактор поширюється як безкоштовне програмне забезпечення, а його репозиторій доступний у GitHub. Notepad++ підтримує сторонні плагіни. Основні переваги Notepad++ Notepad++ є простим, невимогливим до ресурсів інструментом. Є портативна версія. Функціонал програми легко розширюється безліччю плагінів. За бажанням такий плагін можна створити самому. Інтерфейс програми також легко налаштовується. Підтримується робота з великою кількістю вкладок одночасно. Notepad++ є на 100% безкоштовною програмою. Недоліки Notepad++ Переважна більшість користувачів цього текстового редактора HTML коду не знаходять у ньому недоліків. Однак можна відзначити деяку мінімалістичність інтерфейсу, яка не підходить ряду користувачів. Також можна відзначити, що цей редактор не є IDE і не містить у собі його додатковий функціонал. З цієї причини багатьом користувачам доводиться використовувати якесь середовище розробки у якості додаткового інструменту до редактора Notepad++.   Sublime Text     Ще одним прикладом чудового текстового редактора для HTML є Sublime. Ця програма постачається безкоштовно з деякими обмеженнями. Іншими словами — ви можете використовувати Sublime безкоштовно, але вам доведеться купити ліцензію, якщо ви захочете скористатися всіма функціями цього редактора. Sublime пропонує гарну підтримку, забезпечуючи постійний вихід актуальних оновлень. Користувачі можуть додавати плагіни, створені спільнотою, або створювати власні. Для значної частини розробників використання безкоштовної версії Sublime буде цілком достатнім. Якщо вам знадобиться більше можливостей, ви зможете придбати ліцензію пізніше. Плюси Sublime Кросплатформенність. Sublime працює у таких операційних системах, як Windows, macOS та Linux. Sublime є інструментом, що споживає небагато ресурсів системи, тому він її не завантажує. Є портативна версія. Sublime надає тисячі різних доповнень з відкритим вихідним кодом, які створені великою та активною спільнотою. Роздільне редагування. Розробники можуть використовувати кілька моніторів та редагувати різні ділянки коду одночасно. Недоліки Sublime Не весь функціонал доступний користувачеві безкоштовно. Рядом користувачів відзначається незручність роботи з менеджером плагінів. Ряд плагінів сторонніх розробників може працювати некоректно.   WebStorm на базі IntelliJ       WebStorm – дуже зручне середовище для web розроблення. WebStorm було розроблене компанією JetBrains на основі іншого їхнього продукту IDE IntelliJ.   Плюси WebStorm Зручне автодоповнення як коду на HTML, CSS, так і на JavaScript. Перевірка на наявність помилок та зручне налагодження коду забезпечується за допомогою інтеграції з низкою систем відстежування помилок. Вбудована інтеграція з такими системами керування версіями, як GitHub, Git, а також Subversion, Perforce та Mercurial. Гнучкість налаштувань. Досить велика кількість плагінів. Недоліки WebStorm Властива всім IDE повільність у роботі та вимогливість до ресурсів. Відносно складні налаштування. Платна IDE, що розповсюджується за передплатою.   Vim   Vim (скорочення від Vi Improved) – це потужний портативний текстовий редактор з дуже багатою історією – йому вже понад 27 років. Має багатий функціонал з можливістю глибокого налаштування програми під себе. В оригінальному вигляді працює у вікні консолі. Можна використовувати версію із графічним віконним інтерфейсом – Gvim. Варто відзначити, що багато сучасних IDE — для поліпшення процесу розробки — містять емулятор функціональності Vim.   Плюси використання Vim Повноцінна робота в багатьох операційних системах - Windows, Linux, Amiga, Mac OS X, Unix, OpenVMS, OS/2. Глибоке налаштування роботи редактора під себе. Дуже низькі вимоги до ресурсів. І, відповідно, — висока швидкість роботи. Можливість редагування або перегляду файлу на віддаленому сервері через термінал Більше 14 000 доступних пакетів розширень.   Недоліки Vim Один із найскладніших для вивчення інструментів розробки. Високий поріг входження вимагає від користувача значних витрат часу на запам'ятовування його особливостей, команд, плагінів тощо.   Eclipse   Використання програми Eclipse як HTML редактору часто вважається надмірним. Будучи повноцінною та багатофункціональною системою розробки, вона, ймовірно, буде надто складною для написання коду на HTML та CSS. Повноцінно свої можливості Eclipse зможе проявити при розробці складних сайтів, підв'язаних на роботу з кількома базами даних і додатковими механізмами. Часто Eclipse використовують для роботи зі сторінками, написаними на Java, PHP, JavaScript та інших мовах програмування. Плюси Eclipse Повноцінна IDE з усім переліком можливостей потужного інструменту розроблення. Кросплатформенність у роботі з Windows, macOS, Linux. Значна кількість розширень та аддонів, які допомагають гнучко налаштовувати Eclipse під різні завдання. Приналежність Eclipse до вільного програмного забезпечення. Мінуси Eclipse Складність налаштування цієї IDE. Надмірна перевантаженість як для розроблення простих сайтів на HTML та CSS. Велика ресурсоємність.   Atom     Атом – це порівняно новий HTML редактор. Він був випущений у 2014 році командою GitHub, і з того часу, за підтримки спільноти GitHub, значно збільшив свою популярність. Цей текстовий редактор є безкоштовним, з відкритим кодом. Цікаво, що у якості слогану для Atom використовується фраза “найбільш зламаний текстовий редактор 21 століття”, маючи на увазі, що будь-який розробник може робити свій внесок у редагування, розширення, зміну та обмін вихідним кодом програми, а також створювати власні пакети для покращення Atom. Які можливості дає Atom Atom є кросплатформенним додатком і працює в таких операційних системах, як Windows, macOS і Linux. Завдяки розумному механізму автозаповнення Atom допомагає швидше писати код. Особливість інтерфейсу Atom дозволяє розбивати інтерфейс на безліч вікон, щоб ви могли порівнювати та писати код у цих вікнах одночасно. Atom є просунутим текстовим редактором, який отримав можливості IDE завдяки різним плагінам. Підтримує у розробленні такі мови, як: HTML, CSS, JavaScript, Python, XML, PHP, Java, SQL, C# та багато інших. Плюси Atom Для Atom є велика кількість доповнень, плагінів та розширень. Відак, “з коробки” Atom поставляється з 81 вбудованим пакетом, і ви також можете додати до 7500 додаткових встановлюваних пакетів. Ви також можете розробити власний пакет. Наявність великої кількості доповнень дозволяє гнучко налаштовувати інтерфейс редактора. Відкритий вихідний код. Весь редактор Atom розповсюджується безкоштовно, надаючи вихідний код, доступний на GitHub. Відмінна інтеграція з Git та GitHub. Підтримка плагіну Teletype. Цей плагін дозволяє безпосередньо в режимі реального часу писати код спільно з іншими розробниками. Мінуси Atom Atom є досить «ненажерливою» програмою, забираючи на себе відносно великий обсяг оперативної пам'яті. Підтримка тих чи інших мов визначається функціоналом плагінів, написаних різними розробниками, а не єдиною організацією. Розглянемо ще ряд додатків, що часто застосовуються у якості HTML редакторів.   Adobe Dreamweaver CC     Програма Adobe Dreamweaver CC, розроблена та керована технологічним гігантом Adobe Inc., є потужним та універсальним інструментом преміум-класу. Вона обслуговує як back-end, так і front-end розроблення. Як програмне забезпечення із закритим вихідним кодом, Dreamweaver призначений для роботи в екосистемі Adobe. Adobe також надає підтримку, плагіни та функції, щоб ви завжди могли без проблем писати код. Dreamweaver — це один із редакторів, які підтримують як текстові, так і WYSIWYG методи роботи з кодом. Багато користувачів цієї програми вважають Dreamweaver найкращим візуальним редактором коду. Таким чином, ви можете вибирати, чи ви хочете працювати з візуальним поданням сторінки або йти класичним шляхом редагування тексту. Основні переваги Dreamweaver CC. Dreamweaver дозволяє писати код будь-якою з основних мов програмування. Підтримує текстові та WYSIWYG режими редактора. Зручний перегляд. Можливість побачити, як виглядає тег, виділивши його. Повністю інтегрований із програмною екосистемою Adobe. Приголомшлива продуктивність. Підтримка Adobe Inc. Підписка на Dreamweaver дає доступ до ряду хмарних бібліотек, що містять величезний обсяг графіки, стилів, шарів та багато іншого. Недоліки Adobe Dreamweaver CC Основним недоліком цього редактора є ціна та умови розповсюдження. Як і інші продукти компанії Adobe, Dreamweaver CC поширюється лише за умови передплати.   Brackets     Brackets — це програмний продукт Adobe, розроблений спеціально для дизайнерів та фронтенд розробників, котрий побачив світ у 2012 році. Цей молодий текстовий редактор, що розповсюджується, на відміну від Dreamweaver, безкоштовно, не може похвалитися великим вибором плагінів, проте відмінно працює з HTML, CSS і JavaScript – основними мовами фронтенд-розробника. Плюси Brackets Зв'язок із Google Chrome. Основна особливість редактора Brackets, що виділяється багатьма розробниками, — зв'язок із Google Chrome у режимі реального часу. За допомогою цього механізму розробник може відразу після внесеної зміни спостерігати, як усі ці зміни відображатимуться в браузері. Доступність на Windows, macOS, Linux. Brackets визнаний одним із найкращих текстових редакторів під macOS. Широко розвинена система гарячих клавіш. Основною особливістю, яка відрізняє Brackets від інших HTML-редакторів, є функція «Вилучити». Функція вилучення дозволяє витягувати інформацію прямо з PSD — таку як шрифти, кольори та вимірювання, з чистим CSS та без контекстних посилань на код. Мінуси Brackets Невелика кількість розширень порівняно з іншими редакторами на ринку. Відсутність підтримки серверних мов (Python, PHP, Ruby).   CoffeeCup HTML редактор     HTML редактор CoffeeCup представлений на ринку як безкоштовною, так і платною версією. Незважаючи на слабку поширеність у російськомовному сегменті Інтернету, HTML редактор CoffeeCup досить популярний за кордоном. Випущений вперше ще 1996 року, до 2008 року редактор було продано вже числом 30 млн. копій. Плюси CoffeeCup У платній версії є окрім текстового ще й WYSIWYG-редактор. CoffeeCup повністю сумісний із платформами Windows та macOS. Платна версія HTML-редактора CoffeeCup включає в себе бібліотеку тегів, перевірку HTML і CSS, завершення ймовірного коду тощо. Зручне автозаповнення тегів. Недоліки CoffeeCup Значна частина функціоналу та матеріалів бібліотеки представлена ​​лише у платній версії.   HTML-Online     Завершимо наш огляд популярних HTML редакторів зручним інструментом для створення та редагування коду прямо в браузері — HTML-Online. HTML-Online є простим та зручним редактором веб-сторінок. Він, ймовірно, один з найкращих візуальних HTML редакторів серед онлайн сервісів. Завдяки сервісу HTML-Online ви зможете почати писати коди вашого нового сайту прямо в браузері, без необхідності завантажувати та встановлювати відповідну програму. Переваги HTML-Online Є як текстовим, так і візуальним редактором, дозволяючи спостерігати за результатами написання у процесі розробки. Зручна конвертація файлів із формату документів Word у HTML, що дозволяє відразу застосовувати правила HTML розмітки до матеріалів із Word-івських файлів. Вбудована підтримка роботи з документами Excel, PDF та іншими форматами. Простий графічний редактор HTML. Недоліки HTML-Online Основним недоліком онлайн текстових редакторів взагалі і HTML-Online зокрема є необхідність писати код відразу. Якщо ви не напишете проєкт за раз, або у вас перерветься інтернет-з'єднання, то доведеться робити проєкт спочатку. Функціонал онлайн редакторів виглядає бліднішим на тлі можливостей повноцінних додатків.   Висновок У кожного практикуючого розробника є можливість самому вибрати для себе відповідний інструмент-редактор зі своїм функціоналом «з коробки» та доступними плагінами. Ми розглянули ряд редакторів, визнаних більшістю розробників найкращими HTML редакторами. Чи зможемо вибрати серед них найкращий редактор веб-сторінок? На жаль, ні. Як видно, для полегшення роботи фронтенд розробника існує безліч різноманітних додатків, що відрізняються як вбудованим функціоналом та дизайном, доступом до плагінів та додаткових бібліотек, так і порогом входження та доступними платформами, на яких працюють редактори. Ці різноманітні додатки – лише інструменти в руках людини, котрі застосовуються, виходячи з конкретного завдання й особистих смаків. Не так важливо, щоб ви одразу обрали для себе один раз і назавжди зручний текстовий редактор для HTML, як важливо, щоб Ви продовжували писати нові сайти, вчилися новим технологіям та відкривали для себе нові інструменти без припинення навчання.

В ноябре 2016 года на ITVDN появятся первые видео курсы по управлению проектами. Дмитрий Охрименко, CEO ITVDN, встретился с Еленой Петровой, новым бизнес-партнером ITVDN и автором курсов по Project Management, чтобы обсудить вопросы, которые интересуют пользователей нашего образовательного ресурса. Дмитрий: Елена, пользователи ITVDN - в основном программисты. Расскажи, пожалуйста, в чем суть Проектного Управления и чем новый курс будет полезен для разработчика? Елена: Как ты знаешь, разработчики работают в команде, которой управляет Project Manager. Если нет PM` a, то есть Team Lead, и в этом случае он - менеджер, который организовывает процесс работы. Разработчику нужно понимать, почему от него что-то требуют, ведь бытует мнение, что работа разработчика — это творчество, а на самом деле это не совсем так, есть ограничения. Есть ограничения по требованиям, по каким-то условиям в компании, в зависимости от модели бизнеса. Например, в той компании, в которой работает разработчик, она диктует определенные правила работы. Опять же, в зависимости от того, какая организационная структура - матричная, проектная или функциональная - это все очень влияет на его полномочия.   Дмитрий: Надеюсь, это есть в курсе? Елена: Конечно, в курсе есть и это, также в курсе мы подробно рассматриваем состав команды. Кстати, это тоже очень полезно для разработчиков - знать, с кем он работает и какие обязанности у других людей. Мы рассматриваем бизнес аналитика, какие у него задачи и возможности, какие задачи и обязанности у sales manager. Достаточно часто бывает такое, что у разработчиков, у всей команды вцелом, включая PM`a, есть определенное недовольство sales`ами. Дмитрий: Обязательно кто-то должен быть виноват во всем. Елена: Да, продали то, что нереализуемо или еще что-то. В таком случае мы пытаемся в этом курсе показать, что у всех есть определенные интересы, но успех бизнеса будет только в том случае, если они согласуют между собой все эти интересы и построят такой процесс, когда кому-то придётся чем-то пожертвовать для общего блага компании. Дмитрий: На основе какой методологии управления проектом будет построен курс? Какая это методология? Елена: Я бы могла сказать, что курс построен на PMBoK, но на самом деле нет. PMBoK- это обо всем, это идеальный вариант, сбор лучших практик со всего мира с разных проектов, но далеко не все это применимо в жизни. Каждый PM должен знать, что требует PMBoK, это никогда не помешает и только разнообразит его методы управления. Но применять в жизни он должен очень выборочно и очень осторожно. Далеко не всегда то, что применимо в NASA, применимо для компании, которая занимается e-commerce. Дмитрий: По Вашему мнению, что самое сложное в работе PM`a? Самое интересное и самое сложное? Елена: Как ни странно, PM - это посредник, даже больший посредник чем sales. И ему нужно быть очень гибким, ему нужно понимать комбинации различных интересов. Самое важное и сложное то, с чем многие PM`ы "факапят", когда они становятся на сторону команды, но на самом деле PM выражает интересы бизнеса, не заказчика, не команды. Он - наемный работник, он работает на бизнес, его задача, чтобы клиент был доволен, но и при этом бизнес не пострадал. Есть разные способы не навредить и получить выгоду, об этом я тоже буду говорить в курсе, но самое важное здесь - правильно выбрать позицию. Ни в коем случае ни перед кем не очернять заказчика или компанию. PM очень часто overtime-ит, потому что он пытается объять необъятное. Нужно сконцентрироваться на общих интересах для проекта, удовлетворить каждого разработчика все равно не получится. Он должен занять очень умеренную позицию – это сложно, но интересно. Я бы сказала, что для PM`a очень важен склад характера, когда он готов рассматривать различные решения той или иной проблемы и принимать комплексное решение. Как говорят, успех проекта - это в срок, в рамках бюджета и объема работ, также это успех и для PM`a. Но, на самом деле ,это не совсем так. Самое важное - это получить выгоду и не растерять команду. То, о чем мы говорили: на чью сторону должен стать PM, если есть конфликт между заказчиком и командой. Становиться на чью-то сторону нельзя. Нужно правильно уметь объяснить команде, почему то или иное решение было принято. Дмитрий: PM должен преподнести так проблему, чтобы и команда осталась в плюсе, и проект принес то, что бизнес изначально планировал получить. Из Вашего опыта, например, разработчики общаются с тестировщиками. Тестировщик - это отдельный типаж работников в ИТ компании, а разработчик — это другой типаж. У каждого есть свои особенности и фишки. Что самое сложное в общении между PM и разработчиком? И есть ли вообще такие сложности? Елена: Сложности в общении зависят только от человека. Если он готов идти на компромиссы и заинтересован в результате, то всё решаемо. На мой взгляд, есть более серьезные проблемы. Когда разработчик не понимает, что нужно сделать. Он хочет что-то сделать и делает это хорошо, но со своей точки зрения. Из-за этого бывают конфликты, причем зачастую между разработчиком и бизнес-аналитиком, если такой, конечно, есть. В маленьких компаниях обычно все функции бизнес-аналитика выполняет PM или Team Lead разработчик. Если не было уделено достаточно внимания проработке бизнес-потребности заказчика, то разработки могут быть потом и не применимы в жизни.   Дмитрий: То есть, проблема обычно в непонимании предметной области? Елена: Я бы не сказала, что это так. Скорее, это непонимание потребности заказчика. Ведь у него есть свои ограничения, свои требования по внешним условиям. У нас был как-то случай. Проект нужно сделать к определенному сроку. Начинается футбольный сезон и все – должен быть запущен продукт. Тут были ограничения по скоулпу и по функционалу, который действительно нужен. Ведь заказчик не всегда понимает, что ему нужно. Он дает материал, но после анализа команда понимает, что нужно ограничиться и делать только необходимое. Тут как раз и начинается работа и PM, и бизнес-аналитика, и команды разработчиков, поскольку чрезмерное увлечение архитектурой, например, или «как было бы хорошо сделать» не всегда работает. При этом, упрощая, нужно правильно масштабировать проект, чтобы впоследствии можно было бы как-то дорабатывать продукт. Дмитрий: Еще вопрос. У меня есть много знакомых, которые работают PM, и они регулярно пытаются изучать программирование на C#, JS, Java. Вот насколько это вообще нужно PM? Правильно ли это – пытаться понять работу разработчика, влезать в нее, помогать? Елена: Думаю, они должны знать, что такое объектно-ориентированное программирование, должны знать основные технологии. На мой взгляд, достаточно понимать, в какой предметной области ты работаешь, какого типа продукт ты создаешь и какие технологии сейчас применимы к разработке подобных продуктов. Если PM будет нырять глубже, это будет только мешать. Точно так же и разработчики – я рекомендую только первый курс «Введение в PM», это даст им понимание, в какой среде они работают, почему именно так устроена компания, почему именно такие решения принимает менеджер или руководитель компании. Разработчикам желательно знать и понимать такие вещи, от этого будет зависеть успешность их работы. Дмитрий: Насколько реалистична ситуация, когда разработчик становиться PM? Например, некоторые наши студенты на вопросы «Кем хотите быть?», «Как Вы видите свое дальнейшее развитие?» кто-то отвечает, что через какое-то время хочет стать Team Lead/Senior Developer, кто-то хочет стать PM. Насколько такой процесс развития разработчиков реалистичен? Елена: Все вполне реально. Есть замечательные PM – выходцы из разработчиков. Но тенденция такова, что лучше разработчику стать Product менеджером, тем более, что сейчас активно стараются создать тенденцию развития продуктового бизнеса. И разработчику с опытом и навыками, которыми он владеет, с его отношением к работе, более интересно будет управлять продуктом. Разработчику ,скорее, нужно больше знаний в бизнес-анализе и в управлении людьми. Например, управление расписанием, рисками и т.д. Дмитрий: А кто будет идеальным PM? Какой портрет человека? Чем он должен заниматься? Елена: Лично мое мнение из того, с чем я сталкивалась, такое, что идеальные PM выходят из QA специалистов. Вот, действительно, очень хороши. Говорят, что девушки - лучшие PM, нежели мужчины. Тут можно поспорить. Лишь до определенной степени это правда. У девушек слишком живой ум, они впечатлительнее мужчин, а PM должен четко понимать границы проекта, границы компании. И какие бы эмоции или мысли не возникали, хороший PM всегда должен придерживаться этих рамок. Я знаю отличных PM и девушек, и парней, и разработчиков, и даже тех, кто не связан с IT. Сейчас многие идут в IT на PM, ведь программирование для этого учить не нужно. Не всегда в таком сценарии все получается, но бывают и удачные случаи. Дмитрий: Ты сказала, что программисту лучше расти в сторону Product менеджмента. В чем кардинальные отличия между продуктовыми компаниями и аутсорсинговыми, с точки зрения PM? Елена: В продуктовой компании главный Product менеджер. Дмитрий: PМ там не нужен? Елена: Нет, PМ там нужен, обязательно. Product менеджер разрабатывает стратегию развития продукта, а какие-то элементы или дополнения к продукту идут как проекты. Вот ими, обычно, и занимается PМ, подчиняясь Product менеджеру. В продуктовых компаниях заказчиком является Product менеджер, в то время как в аутсорсинговых компаниях заказчик вне бизнеса. Поэтому в аутсорсе приходиться комбинировать интересы внешнего заказчика и внутреннего бизнеса. В продуктовых компаниях, на мой взгляд, у PМ меньше ответственности: он принимает меньше решений, у него меньше посредничества. Дмитрий: Он просто управляет отдельными маленькими проектами, которые нужны для общего развития продукта? Елена: Да, верно. У PМ в продуктовых компаниях вполне определенные организационные функции – это скучнее, но безопаснее, чем в аутсорсе. Зато есть четкие задачи, четкое понимание продукта, ситуации, связей. А ответственность за идею и главную цель несет Рroduct менеджер. В аутсорсинговых компаниях нет как такового Product менеджера, а РМ приходиться постоянно лавировать. Работа более изматывающая, но некоторые находят это более живым и интересным. Дмитрий: Чтобы стать Product менеджером, какие знания и навыки нужно культивировать? Что читать и где учиться? Елена: Сейчас есть очень много информации для Product менеджеров. И вебинаров хватает на тему «Кто такой Product менеджер?», и курсы появляются. На мой взгляд, вне зависимости от того, разработчик ты, тестировщик или еще кто-то, чтобы стать Product менеджером, необходимо пройти через бизнес-аналитика. Нужно получить навыки бизнес-аналитика, поскольку даже в аутсорсинговой компании главный человек, который работает с продуктом – это аналитик. Хороший специалист изучает бизнес заказчика, рынок, конкурентов, продукт, он должен понимать, какие "фичи" этого продукта будут эффективными с точки зрения экономической эффективности. И это первый шаг для того, чтобы стать Product менеджером. Дмитрий: Какой второй? Елена: У Product менеджера еще больше функций, помимо аналитики. Он является, в первую очередь, носителем идеи самого продукта, «гореть» самой идеей данного продукта. Также Product менеджер должен понимать, какие бизнес-потребности не только своих пользователей он решает, но и свои - почему он выгоден. Почему вообще владелец бизнеса спонсирует производство этого продукта? Product менеджер – это смесь технической роли, аналитики и серьезного понимания бизнеса. Так что, если разработчик не планирует идти вглубь технологий, а заняться карьерным ростом, то сначала это бизнес-аналитика, потом Product менеджер, ну а там уже много вариантов. Многие создают свои компании, именно пройдя такой путь. Дмитрий: Они получают понимание бизнеса, видят, как работает сама «кухня». Елена: Да. Сейчас очень много компаний, где руководители – это бывшие разработчики. Но им не хватает именно понимания того, как организовать работу, процесс. Дмитрий: Думаю, нашим студентам будет полезна эта информация про РМ и Product менеджера. Елена: Надеюсь. Я записывала курс «Введение в РМ» не столько, как курс по Product менеджменту, это курс по менеджменту в IT компании. Как я говорила, он будет полезен любому человеку, который работает с командами. Это может быть Team Lead или HR. HR-ам и рекрутерам это будет мега-полезно, потому что они занимаются поиском и подбором персонала и им нужно задавать правильные вопросы, уметь правильно оценить резюме. А также будет полезно sales’ам, они не всегда понимают, как работает операционная сторона. Если они прослушают курс, то поймут, чем занимается РМ, по каким вопросам с ним можно консультироваться. Дмитрий: Кто больше всего критикует работу PМ? Елена: Разработчики. Они говорят, что РМ не нужны, они мешают работать. Я частично с этим мнением согласна, но ведь одна из задач РМ – это устранять проблемы для разработчиков. А задача разработчиков – взаимодействовать, участвовать в организации процесса работы. От них требуется помощь РМ, потому что он не всегда может обосновать, почему то или иное решение приняла команда. И опять же, если в проекте идет что-то не так, в этом виноват не один только РМ, в этом виновата вся команда. Дмитрий: Но РМ в первую очередь, потому что… Елена: Да, потому что не смог организовать команду, чтобы она вместе предотвратила эту проблему. Я очень рада, что записываю данный курс, потому что в нем смогу отразить свой опыт работы в процессном менеджменте. Я отлично видела роли и их взаимодействие на уровне продукта, организации, компании и т.д. Дмитрий: Какого опыта у тебя больше? С чем больше работала? Елена: Я, на самом деле, процессный аналитик. Мое основное достижение – это руководство процессом оценивания компаний по модели CMMI. Это модель управления процессами в компании, она охватывает как инженерные процессы, самые простые, так и процессы управления проектами, управления организации и поддержки (системные администраторы и т.д.). Любой человек, который занимается организацией рабочих процессов, знает, что есть такой инструмент, как теория ограничений, она показывает, где в цепочке производства компании самые узкие места, и проблема обычно на стыке разных специальностей, на стыке разных профессий, разных отделов.

ТОП 7 дистрибутивов Linux 7-е место - Gentoo 6-е место - Gentoo 5-е место - Linux Mint 4-е место - Fedora 3-е место - Debia 2-е место - Arch Linux 1-е место - Ubuntu Несколько не вошедших в ТОП рейтинга, но все еще интересных дистрибутивов Linux Antergos Puppy Linux Manjaro Linux   Существует большое разнообразие операционных систем, используемых на рабочих станциях как простыми пользователями, так и разработчиками ПО. Какую же операционную систему следует выбрать разработчику в 2019 году? Согласно опросу, проведенному среди более чем 76 000 разработчиков и опубликованному в ежегодном отчете Stack Overflow’s 2018 Developer Survey, лидирующее положение в качестве основной операционной системы все еще занимает OS Windows. Однако, уже почти четверть из числа разработчиков используют в качестве основной ОС – Linux, или правильнее сказать Linux-based операционную систему. Этот немалый процент пользователей не может не заставить задуматься – а какие плюсы дает использование Linux в качестве операционной системы для разработчика? Возможно, имеет смысл мигрировать на Linux с OS Windows и MacOS? Но давайте для начала уточним несколько моментов.   Что такое Linux История UNIX-подобных операционных систем начинается в 1960-х годах с совместного проекта Массачусетского Технологического Института и компаний General Electric и Bell Labs. В последствии компании прекратили финансирование проекта и его развитие продолжилось энтузиастами. Это привело к появлению в 70-х годах системы UNICS, затем сменившей название на UNIX. В 1980-х годах набор дистрибутивов UNIX был выпущен под коммерческой лицензией компанией AT&T, в которую входила Bell Labs. Однако, по политическим причинам, AT&T была вынуждена предоставить исходный код OS UNIX, под ограничивающей возможности лицензией, ряду вузов, включая университет Беркли. Так, начиная с 1978 года, появилось одно из первых ответвлений Unix-подобных систем – BSD Unix. (BSD - Berkeley Software Distribution). Работавший в начале 1980-х в MIT Ричард Столлман был недоволен коммерциализацией и закрытостью лицензий UNIX. В 1983 году он объявил о новом проекте – GNU (GNU – рекурсивный акроним GNU’s Not UNIX). В рамках этого проекта получила начало разработка Unix-подобной операционной системы под свободной лицензией GNU GPL. Стоит отметить, что данная лицензия не только дает право разработчику свободно использовать программы, выпущенные под этой лицензией, но и обязывает разработчика выпускать все производные программы также под данной лицензией. Операционная система Linux появилась на свет в 1991 году благодаря Линусу Торвальдсу, разочаровавшемуся в существующих на тот момент операционных системах, бывших либо платными, либо выпущенными под лицензией BSD – с правом применения только в образовательных целях. В новой операционной системе Линусом Торвальдсом было переписано ядро, задачей которого является, в основном, координация доступа приложений к ресурсам системы. Возникшая на основе UNIX-подобной системы MINIX, работавшей под лицензией BSD, операционная система Linux в дальнейшем претерпела значительных изменений. Так были заменены многие компоненты на те, что написаны под лицензией GNU. В последствии произошло более глубокое слияние проектов GNU и Linux с образованием операционной системы GNU/Linux или той, что сейчас зачастую называют просто - Linux. До сих пор существует путаница в том, какие дистрибутивы ОС следует относить к Linux, а какие – нет. Ряд пользователей называет Linux-ом все операционные системы, использующие ядро Linux. В число таких ОС входит, в частности – Android. Другие пользователи признают под Linux только те дистрибутивы, которые состоят как из стандартного ядра, так и из обязательно включенной части ПО GNU (в число таких Android входить, соответственно, не будет). В рамках данной статьи, мы примем за определение Linux следующее: Операционная система Linux – это продукт, состоящий из ядра Linux, и набора внешних модулей GNU. Часто многие обзорные статьи и рейтинги операционных систем под заголовками «ТОП ... лучших Linux дистрибутивов» включают в себя не только сборки из семейного дерева Linux, но и те, которые фактически относятся к другим ветвям Unix-подобных систем, в частности - FreeBSD. Такая путаница действительно существует. Но не стоит забывать – это разные «ветви» развития операционных систем, имеющих общий исторический «корень» – Unix.   Преимущества Linux, как системы для разработчиков Почему Linux хорошая альтернатива для разработчика? Рассмотрим отдельно преимущества и недостатки использования Linux как основной операционной системы.   Общие преимущества для пользователей: Выбор. Огромное разнообразие дистрибутивов Linux, с разным набором компонентов, позволяет профессиональному пользователю найти тот, который будет удовлетворять его потребности как в работе, так и в быту. Настраиваемость и гибкость системы. Являясь, вероятно, самой настраиваемой и гибкой системой, Linux позволяет подогнать операционную систему под себя буквально. Бесплатное распространение. Распространяясь под лицензией GNU GPL, сами дистрибутивы Linux являются бесплатными. Однако ряд дистрибутивов являются коммерческими и полный спектр возможностей (поддержка, доступ в ряд репозиториев и т.п.) предоставляют на платной основе. Открытое программное обеспечение – Open Source. Огромное количество разнообразных программ с отрытым исходным кодом, бесплатных и общедоступных. Значительное количество специфических программ для обучения. При этом сохраняется возможность установки проприетарных программ. Использование эмулятора Wine позволяет запускать  на Linux многие приложения операционной системы Windows. Низкие системные требования и высокая скорость работы. Благодаря глубокой кастомизации дистрибутивов, обеспечивается более высокая скорость работы операционной системы и приложений. Это позволяет с большим комфортом пользоваться относительно старым железом при правильном подборе дистрибутива ОС. Активное сообщество пользователей и разработчиков. Безопасность. Конечно безопасность операционной системы в первую очередь зависит от пользователя, но нельзя не признать, что количество вирусов под Linux на порядки меньше чем под Windows. Кроме того, благодаря доступу к публичным, контролируемым репозиториям для установки ПО, нет необходимости брать программы из непроверенных источников. Также нельзя не отметить глубокую настраиваемость механизмов, обеспечивающих безопасность в Linux.   Преимущества Linux для разработчиков: Возможность тестировать разрабатываемое ПО прямо в том же окружении, в котором оно будет работать после выхода в продакшн. Вы можете иметь на вашем персональном компьютере весь тот же самый софт, с теми же версиями и настройками, как тот, который будет «крутиться» на сервере для вашего приложения. Удобство при активном использовании механизмов командной строки, Git и текстового редактора Vim отмечают многие разработчики. Стабильность в работе без перезагрузок. Многие пользователи не перезагружают операционную систему, пока не появляется необходимость в обновлении. Параноикам от мира разработчиков будет приятно знать, что Linux не собирает статистику на пользователя, в отличие от той же Windows   Недостатки Linux, как системы для разработчиков: Отсутствие ряда профессиональных программ, сравнимых с таковыми под Windows. Несмотря на возможность запуска многих программ под Wine нехватка профессиональных приложений ощущается. Особенно это заметно при необходимости работы с графикой и моделированием. Сложность разработки под Windows. Если вы работаете под Linux, это не значит, что в ваши задачи не будет входить написание кода под Windows. К сожалению полноценная Visual Studio под Linux не работает, а эта IDE сейчас является основной для Windows-разработки. Определенная сложность в обучении работы с инструментами. Нельзя не отметить, что порог вхождения в работе под Linux заметно выше.   Мы выделили основные плюсы и минусы в работе на Linux для программиста. Теперь давайте рассмотрим наиболее приемлемые Linux дистрибутивы. Разнообразие дистрибутивов Linux и статистика История дистрибутивов Linux насчитывает уже более 28 лет. Не удивительно, что из года в год появляющиеся и отмирающие ветви дистрибутивов этой операционной системы сегодня представляют уже целый зоопарк – фигурально выражаясь. Для примера можно посмотреть на стилизованный под периодическую систему список наиболее используемых дистрибутивов Linux, отсортированных по материнским версиям операционных систем. Как видно из этой схемы, таких дистрибутивов – не мало. И это только наиболее популярные. Известный портал distrowatch.com насчитывает только активных более 260 дистрибутивов. Чтобы помочь определиться с тем, какой дистрибутив Linux лучше выбрать разработчику, рассмотрим несколько рейтингов дистрибутивов Linux. Статистика использования пользователями разных дистрибутивов Linux согласно порталу phoronix.com Согласно данным опроса, проведенного в 2017 году порталом phoronix.com среди почти 30 000 людей, использовавших Linux дистрибутивы на ноутбуках, лидером по применению  является дистрибутив Ubuntu. Этот дистрибутив линукс получил 38,9% голосов. Следом за Ubuntu по популярности идет дистрибутив Arch Linux, получивший 27,1% пользователей.  Затем идут, Debian, Fedora и Linux Mint, получившие, соответственно, 15,3%, 14,8% и 10,8% аудитории. Шестое место в этом рейтинге дистрибутивов Linux занял openSUSE с 4,2%, а седьмое – Gentoo с 3,9% аудитории. Стоит отметить, что почти три четверти этих пользователей (73,1%) использовали указанную ими операционную систему для разработки ПО. Топ дистрибутивов Linux по статистике портала gamingonlinux.com По данным опроса, проведенного порталом gamingonlinux.com среди более 2 500 своих пользователей и действительному на 01.01.2019 – большая часть их пользователей использует Arch Linux - 21,2%. Затем идут Ubuntu – 19,15%, Linux Mint – 9,37%, Manjaro – 7,36%, Debian – 6,28%, Fedora – 4,72%, Antergos – 4,61%.   Опрос для рейтинга дистрибутивов линукс на портале reddit.com Проведенный на портале reddit.com в 2017 году, опрос среди почти 2 500 человек в сообществе r/unixporn, показал наибольшую популярность таких дистрибутивов линукс: Arch Linux использовали 27.0% пользователей, Ubuntu – 17,9%, Debian – 11,8%, Fedora – 6,09%. Затем идут Rasbian – 5,52%, Manjaro – 5,43% Antergos – 4,67%, Linux Mint – 3,41% и Gentoo – 2,44%. Множество других дистрибутивов Linux, включая openSUSE, Puppy Linux, CentOS и т.п., использует значительно меньшая доля пользователей. При этом указанные дистрибутивы использовались на ноутбуках более чем в 80% случаев, а на стационарных компьютерах – более чем в 60% случаев. Данные Google Trends Данные Google Trends, по пяти наиболее популярным дистрибутивам, показывают существенный отрыв Ubuntu даже от других дистрибутивов первой пятерки.   Давайте рассмотрим непосредственно наш рейтинг Linux дистрибутивов, составленный на основе указанных выше статистических данных.   ТОП 7 дистрибутивов Linux   7-е место - Gentoo Дистрибутив Gentoo версии 1.0 увидел свет в 2002. Этот дистрибутив создавался Дэниелом Роббинсом на основе другой его разработки, начатой еще в 1999 году -  Enoch Linux. В 2004 году Роббинсом был создан некоммерческий Фонд Gentoo, которому он передал в последствии права на торговые марки и авторские права, после чего покинул пост главного архитектора проекта. Философия проекта Gentoo состоит в предоставлении пользователям линукс, желающим иметь полный контроль своей системы, возможность контролировать, что установлено и запущено на их компьютере.  У пользователей есть возможность собирать персональные системы и серверы очень эффективными, если они готовы потратить немалое время, для установки и настройки системы. Gentoo рекомендует пользователям создавать ядро Linux с учетом их конкретного оборудования. Пользователи могут полностью контролировать, установленные и запущенные службы. Возможно существенно уменьшить потребление системой памяти в сравнении с работой других дистрибутивов, исключив незадействованные пакеты и службы ядра. Соответственно, может быть увеличена и скорость работы операционной системы - благодаря отсечению лишнего. Само название дистрибутива, происходит от названия вида пингвинов - Gentoo penguin, самого быстрого в мире. Значительная часть версий Linux являются пакетными. Сам процесс установки дистрибутивов такого типа происходит из пакетов, заранее собранных с откомпилированными исполняемыми файлами. Gentoo, в свою очередь, дистрибутив не пакетный, а source-based. У такого типа дистрибутивов исходники пакетов хранятся в репозиториях, а при установке – пакеты собираются из исходников прямо на пользовательском компьютере. Официальный сайт – https://www.gentoo.org/   Особенности линукс дистрибутива Gentoo: source-based дистрибутив; системы менеджмента пакетами Portage, Pkgcore, Paludis; для ряда приложений (особенно долго компилируемых) есть готовые бинарные сборки; созданные при компиляции на одном компьютере бинарные пакеты можно переносить на другой, с таким же железом; скользящие обновления (rolling-релиз); возможность установки существует для таких платформ - x86, x86-64, ARM, PowerPC, PowerPC 970, SPARC, MIPS, DEC Alpha, PA-RISC, IBM/390, SuperH и 68k.   Плюсы дистрибутива линукс Gentoo: глубокая настройка ОС с компилированием под индивидуального пользователя с конкретным железом; очень большое число доступных для установки приложений; большое количество доступных репозиториев; очень высокая стабильность работы правильно настроенных приложений; благодаря rolling-релизам обновление становятся менее болезненным; развитое сообщество пользователей и разработчиков; хорошая документация; возможность продолжения компиляции пакетов в случае если она была прервана; возможность устанавливать одновременно несколько веток софта; ряд исследований показывает, что в Gentoo потребление PHP памяти может быть уменьшено на количество вплоть до 50%.   Минусы дистрибутива Gentoo: излишне высокий порог вхождения для обычного пользователя; первоначальная установка занимает много времени; необходимость в частых обновлениях; если систему долго не обновлять, то обновление потом будет по сложности сравнимо с установкой с нуля; основная работа только через командную строку; возможны проблемы в процессе установки (компиляции пакетов) на слабых компьютерах.   Минимальные системные требования Gentoo Linux для desktop: Фактически может работать на самых минимальных возможных конфигурациях, в зависимости от задач и сборки.   6-е место - openSUSE Начало дистрибутиву openSUSE положено в 1992 году, когда четыре «любителя Linux» - Роланд Дайрофф, Томас Фер, Хьюберт Мантел и Бурхард Стейнбилд запустили SuSE - свой проект по продаже локализованных наборов Slackware Linux. Начиная с 1996 года, SuSE Linux стала независимым дистрибутивом. В дальнейшем, в состав SuSE Linux добавили менеджер пакетов RPM и представили общественности YaST - графический инструмент управления системой. Частые выходы новых версий дистрибутива, доступность SuSE Linux в магазинах Европы и Америки, наличие полной печатной документации – все это смогло поднять популярность дистрибутива. Novell Inc приобрела SuSE Linux в конце 2003 года. Вскоре произошел ряд изменений в политике SuSE. Так широкой публике представили YaST, дистрибутив SuSE лицензировали под GPL, образы дистрибутива начали распространять свободно с общедоступных серверов загрузки, и, что наиболее важно, разработка дистрибутива стала открытой для участия общественности. С версии SuSE 10.0, благодаря сообществу openSUSE, дистрибутив начинает распространятся полностью бесплатно, с открытым исходным кодом. На основе кода openSUSE был создан коммерческий продукт, сначала под именем Novell Linux, но позже разделившийся на два и изменивший название на SUSE Linux Enterprise Desktop и, также, SUSE Linux Enterprise Server. Сейчас проект openSUSE финансируется как компанией SUSE, так и рядом других компаний, и энтузиастов. Сейчас openSUSE доступен в двух основных редакциях - Leap, которая обеспечивает стабильную платформу с многолетней поддержкой и Tumbleweed, который обеспечивает скользящий выпуск обновлений дистрибутива. openSUSE часто хвалят за простоту настройки (через YaST), расширенную поддержку файловой системы Btrfs, а также за автоматические снимки файловой системы и загрузочные среды. Официальный сайт - https://www.opensuse.org/ Особенности дистрибутива openSUSE: версия ядра Linux – 4.12; в качестве графических сред, использует - Cinnamon, Enlightenment, GNOME, IceWM, KDE Plasma, LXDE, LXQt, MATE, Xfce; частота обновления версий – 12 месяцев; в качестве менеджера пакетов применяется RPM; поддерживает x86-64. Плюсы дистрибутива openSUSE: комплексный и интуитивно понятный инструмент настройки; большой репозиторий доступных пакетов ПО; отличная документация проекта; файловая система Btrfs, по умолчанию. Минусы дистрибутива openSUSE: ресурсоемкая работа рабочего стола и графики зачастую замедляет работу системы. Минимальные системные требования openSUSE: Pentium 4 1,6 GHz – процессор; 1 GB – оперативной памяти; 3 GB – свободного места на жестком диске; CD-ROM или USB порт.   5-е место - Linux Mint Linux Mint - основанный на Ubuntu ирландский дистрибутив, впервые выпущенный в 2006 году. Mint доминировал во многих рейтингах с 2011 по 2017 год. Такую популярность он приобрёл за свою стабильность, разнообразие поддерживаемых настольных менеджеров и полноценные мультимедийные возможности. Изначально планировалось выпускать несколько версий дистрибутива Mint под каждый выпуск версии Ubuntu. Однако, со временем, цикл разработки удлинился, сейчас составляя 2 года. При этом теперь дистрибутив базируется только на LTS-версиях Ubuntu (. В настоящий момент разрабатывается и управляется сообществом. Разработчики Mint сосредоточены на стабильности, поэтому они предпочитают консервативный цикл выпуска. Вы не будете получать новейшие обновления, но все равно будете в курсе событий разработки. Вас также не привлекут к разработке в качестве непроизвольного бета-тестера. Официальный сайт - https://linuxmint.com/   Особенности дистрибутива Mint: основывается на LTS версиях дистрибутива Ubuntu; версия ядра линукс – 4.15; специально разработанная среда рабочего стола Cinnamon, также доступны MATE, Xfce; частота обновления версий – 2 года; в качестве системы менеджмента пакетов - применяется dpkg; поддерживает x86 архитектуру; в сравнении с Ubuntu, базовый дистрибутив включает более расширенный мультимедийный функционал; использует тот же программный репозиторий, что и Ubuntu; вход под суперпользователем по умолчанию запрещён, как и в Ubuntu; своя система как обновления, так и установки приложений.   Плюсы дистрибутива Mint: превосходная коллекция мультимедийных инструментов; высокая стабильность работы; открытое сообщество разработчиков.   Минусы дистрибутива Mint: в альтернативные «общественные» релизы редко добавлены последние функции; проект не выпускает рекомендации по безопасности.   Минимальные системные требования дистрибутива Linux Mint: x86 - процессор; 512 MB – доступной оперативной памяти; 9 GB - места на жёстком диске; CD-привод или USB-порт.   4-е место - Fedora Хотя официально год представления дистрибутива общественности - 2004, фактически история Fedora начинается в 1995. Дистрибутив, с именем Fedora, его авторами Бобом Янгом и Марком Юингом изначально был назван - Red Hat Linux. В последствии, Red Hat представила в 1997 году новый менеджер пакетов – RPM (RPM - рекурсивный акроним RPM Package Manager - менеджер пакетов), во многом признанный революционным. В 2003 году, после выхода 9й версии Red Hat, в продуктах компании произошел ряд изменений. Имя Red Hat (товарный знак) - сохранился для коммерческих продуктов, публике же был представлен дистрибутив Fedora Core (затем сменивший имя на Fedora), изначально ориентированный на сообщество «любителей Linux». Несмотря на неприятие изменений сообществом, Fedora уже через несколько выпусков смогла вернуть себе звание одной из наиболее востребованных версий дистрибутива Linux. В свою очередь компания Red Hat, благодаря внедрению множества инноваций, превосходной поддержке клиентов и ряду других моментов, смогла стать крупнейшей и прибыльнейшей Linux-компанией в мире. В 2015 году Fedora представила обновленную версию своего дистрибутива под названием Atomic Host. Используя те же пакеты, что и Fedora's Server edition, Atomic обеспечивает обновления базовой ОС используя технологию OSTree. Сегодня Fedora - это один из самых распространенных и инновационных дистрибутивов Linux. К началу 2019 года только загрузок дистрибутива с официального сайта было произведено около 1 500 000. Широко известен вклад проекта Fedora в код ядра системы Linux, в ряд библиотек и технологий. Однако, в дистрибутиве все еще отсутствует определенность в стратегии развития десктоп-сегмента, которая упростила бы использование этого линукс дистрибутива для всех тех, кто выходит за рамки цели «любителя Linux». Официальный сайт - https://getfedora.org/   Особенности дистрибутива Fedora 29: версия ядра Linux – 4.18; менеджер пакетов RPM; использует по умолчанию графическую среду GNOME 3.30; частота обновления – 6-8 месяцев; поддерживает x86, x86-64, ARM, i686, POWER, MIPS, IBM System/39 платформы; единый глобальный репозиторий с исключительно бесплатным ПО (есть ряд неофициальных репозиториев); проект как разрабатывается, так и поддерживается сообществом, при этом спонсором выступает компания Red Hat; Fedora Project запретила поставку дистрибутива в Крым, Сирию, Судан, Иран, Северную Корею, и Кубу.   Плюсы дистрибутива Fedora: значительная инновационность дистрибутива; встроенная поддержка Docker; впечатляющие возможности обеспечения безопасности; огромное количество поддерживаемых пакетов; философская концепция свободного ПО; устоявшееся сообщество разработчиков и пользователей дистрибутива; наличие Live-CD со многими графическими оболочками.   Минусы дистрибутива Fedora: приоритеты дистрибутива Fedora, ориентированы, чаще, на решения корпоративных задач, а не на удобство при использовании персональных компьютеров; некоторые передовые внедрения (к примеру - раннее переключение на KDE 4 и GNOME 3) отталкивают ряд устоявшихся пользователей настольных компьютеров.   Минимальные системные требования дистрибутива Fedora: 1 GHz - процессор; 1 GB – оперативная память; 10 GB – свободного места на жестком диске.   3-е место - Debia   OS Debian GNU анонсировали в 1993 году. Создателем дистрибутива Debian был Ян Мердок, который, совместно с сотнями разработчиков-добровольцев, проектировал новый, полностью некоммерческий дистрибутив. Несмотря на общий скепсис в отношении новой операционной системы, Debian выжил. Кроме того, он стал крупнейшим дистрибутивом и, вероятно, самым крупным совместным проектом ПО из когда-либо созданных! Успешность Debian можно проиллюстрировать следующими цифрами. Его разрабатывали более 1000 добровольных разработчиков. Репозитории Debian содержат около 50 000 бинарных пакетов (написанных для 8 различных процессорных архитектур) и участвуют в создании около 130 установочных дистрибутивов и систем LiveCD на основе Debian. Ни одна другая ОС семейства Linux не может похвастаться похожими достижениями. Фактическая разработка OS Debian происходит в четырех (включая экспериментальную) основных ветвях с повышающимися уровнями стабильности работы ПО: «нестабильная» - «sid», «тестовая» и «стабильная». Именно благодаря этой схеме постепенной стабилизации и интеграции компонентов, Debian на сегодня считается одним из наиболее протестированных и наиболее свободных от ошибок дистрибутивов Linux. Официальны сайт - https://www.debian.org/   Особенности stable дистрибутива Debian Linux: дистрибутив основан на ядре версии 4.9. работает на следующих архитектурах - Intel x86, Intel 64, AMD64, ARM, ARM с аппаратным FPU, 64-битные ARM, 32bit MIPS, 64bit MIPS, Power Systems, 64-битный IBM S/390.   Плюсы дистрибутива Debian: признанная очень высокая стабильность; глубокий и последовательный контроль качества разработки; огромная библиотека пакетов в репозиториях - более 30 000 пакетов ПО; Универсальность касательно применения с различными видами процессорных архитектур. Debian поддерживает на сегодня больше их видов, чем любые другие линукс дистрибутивы. Минусы: достаточно быстрое устаревание стабильных версий из-за длинного цикла разработки – 1-3 года на цикл; консервативный состав дистрибутива – новые технологии, зачастую, не включаются в состав дистрибутива из-за необходимости поддержки сразу многих процессорных архитектур; относительно старая версия ядра; демократичность руководства проектом зачастую приводит к неоднозначным решениям, вызывая конфликты в сообществе разработчиков и тормозя развитие проекта.   Системные требования Debian: 128 MB – оперативная память; 2 GB - свободного места на жестком диске.   2-е место - Arch Linux Дистрибутив Arch Linux был основан Джаддом Винетом на философии KISS (keep it simple, stupid - не усложняй, тупица) в 2002 году. Сначала развитие проекта Arch Linux проходило, как дистрибутива для достаточно продвинутых пользователей, и Arch был мало популярен. Ситуация изменилась после того, как к дистрибутиву была применена политика обновлений Rolling release (плавающий релиз).  Теперь операционную систему достаточно стало установить единожды, после чего мощный менеджер пакетов сам обновлял соответствующие пакеты согласно выходящим обновлениям, без необходимости переустановки ОС. Из-за этого мажорные выпуски Arch Linux немногочисленны и ограничиваются базовым установочным образом, который обновляется только при значительных изменениях в базовой версии системы. Официальный сайт - https://www.archlinux.org/   Особенности дистрибутива Arch Linux: быстрый и мощный менеджер пакетов Pacman предоставляет возможность легко управлять и настраивать под себя как пакеты, размещенные в официальных репозиториях Arch, так и собранные самостоятельно; возможность устанавливать пакеты ПО из исходного кода; доступны следующие варианты графических оболочек – GNOME, KDE, LXDE, MATE, Xfce, Cinnamon, Enlightenment. в своем базовом виде дистрибутив Arch Linux содержит тщательно отобранный набор ПО, необходимого для ежедневной работы. основанная на философии «не усложняй», Arch Linux предоставляет ПО в том виде, в котором оно изначально представлено разработчиками. Для обеспечения совместимости вносятся только минимально необходимые изменения. последняя версия работает с ядром 4.20.5.   Плюсы дистрибутива Arch Linux: отличная инфраструктура управления программным обеспечением; возможности глубокой настройки системы под себя; удобства системы обновлений Rolling release; доступность обширной библиотеки документации системы.   Минусы дистрибутива Arch Linux: опасности ошибок и нестабильности при обновлениях благодаря особенностям принципа обновлений «roll-release»; требовательность к относительно высокому уровню знаний пользователя; зачастую невозможность установки новой - «мажорной» версии ОС, поверх старой.   Системные требования Arch Linux: x86_64 - совместимый процессор; 512 MB - оперативная память; 800 MB – свободного места на жестком диске; подключение к Интернету.   1-е место - Ubuntu Топ 1 нашего рейтинга -  операционная система Ubuntu, является широко распространенной версией Linux, в свое время основанной на другом дистрибутиве – Debian. Впервые о выходе Ubuntu заявили в 2004 году. Несмотря на относительную новизну, развиваться он начал стремительно. Пройдя тернистый путь популяризации длинной в 15 лет, Ubuntu занимает место самой популярной версии Linux для настольных компьютеров. Этот проект сделал очень много для разработки простой и удобной в использовании, бесплатной операционной системы для настольных компьютеров. Сегодня дистрибутив Ubuntu успешно конкурирует как со свободными, так проприетарными ОС. В чем причины потрясающего успеха Ubuntu? Среди главных выделяют Марка Шаттлворта - автора проекта.  Участвовавший ранее до Ubuntu в разработке Debian, Шаттлворт является мультимиллионером, владеющим компанией Canonical Ltd, которая и финансирует проект в настоящее время. Во-вторых, проект Ubuntu извлек уроки из проблем в разработках схожих проектов и смог избежать их – разработчики смогли создать удобную веб-инфраструктуру с Wiki-документацией и креативным средством сообщения о багах системы, профессионально подходя к конечным потребителям. В-третьих – с помощью финансовых возможностей автора, участники проекта смогли разослать бесплатные образцы дистрибутива заинтересованным пользователям. Это напрямую поспособствовало скорейшему распространению Ubuntu. Фактически, Ubuntu основывается на нестабильной ветке дистрибутива Debian, включив в себя такие распространенные пакеты, как - GNOME, LibreOffice, Firefox и др., обновив их до стабильных версий. Этот дистрибутив Linux выходит с предсказуемым шестимесячным графиком, периодически выпуская версии с долгосрочной поддержкой (LTS), которые поддерживаются обновлениями безопасности на протяжении 5 лет. Выпуск без LTS, в свою очередь, поддерживается 9 месяцев. Официальный сайт - https://www.ubuntu.com/   Особенности дистрибутива линукс Ubuntu: дистрибутив основывается на Debian; вход под суперпользователем отключен. Для получения полномочий суперпользователя используется утилита sudo; доступны варианты дистрибутивов с разными пакетами графических оболочек - GNOME - по умолчанию в версии 18.04, KDE – Kubuntu, Xfce – Xubuntu, LXDE/ LXQt – Lubuntu и другие. в версии Ubuntu 18.04 сбор пользовательских данных включён по умолчанию (возможно отключить); ядро Linux версии 4.15 в LTS версии; проект разрабатывается и поддерживается компанией Canonical.   Плюсы дистрибутива Ubuntu: исправлен цикл релиза и период поддержки, в сравнении с Debian; наличие долгосрочной поддержки (LTS) с 5-летним сроком предоставления обновлений безопасности; интерфейс, дружественный для начинающих; множество как официальной, так и пользовательской документации; широко распространенный дистрибутив с обширным комьюнити, большим количеством репозиториев и широкой возможностью выбора программ для установки. поддержка новейших технологий «из коробки» - к примеру, 3D эффекты графической оболочки и элементов рабочего стола; простая установка проприетарных драйверов для различных устройств беспроводных сетей и видеокарт NVIDIA и ATI; возможность выбора варианта дистрибутива с менее требовательной графической оболочкой.   Минусы: отсутствие совместимости с дистрибутивом Debian; часто выходящие важные изменения дистрибутива, как правило, отталкивают некоторых пользователей; не LTS релизы поставляются только с 9-месячной поддержкой безопасности.   Минимальные системные требования дистрибутива Ubuntu: 2 GHz dual core процессор; 2 GiB – доступная оперативная память; 25 GB – свободного места на жестком диске; CD/DVD привод или USB порт для.   Несколько не вошедших в ТОП рейтинга, но все еще интересных дистрибутивов Linux   Antergos Antergos- это относительно новый дистрибутив Linux, основывающийся на Arch. Изначально выпущенный в 2012 году под именем Cinnarch, этот дистрибутив был клоном Arch Linux, с Cinnamon в качестве окружения рабочего стола. На уровне системы отличий между Antergos и Arch Linux – нет. Разница между дистрибутивами находится в подходе к пользователю. В отличие от Arch, рассчитанного на уже опытного пользователя, Antergos направлен на всех, как опытных, так и начинающих Linux пользователей. В качестве установщика Antergos использует собственную разработку - CNCHI, созданный чтобы максимально упростить для пользователя процесс установки. Минимальный набор входящих в дистрибутив приложений подойдет тем, кто хочет собрать дистрибутив под свои нужды. Если же вам нужен уже готовый к работе дистрибутив, предоставляющий полный набор приложений для повседневного использования - вам Antergos не подойдет. Галийское слово Antergos (означающее: предки) было выбрано, «чтобы связать прошлое с настоящим». Это название символизирует, что несмотря на все глубокие существенные изменения в дистрибутиве, глубокая связь с основой дистрибутива, Arch Linux - остается. Официальный сайт - https://antergos.com/   Особенности дистрибутива Antergos: основывается на Arch Linux; Использует версию ядра 4.20; Доступны такие виды графической оболочки – Cinnamon, GNOME, KDE, Xfce, Openbox, MATE Скользящая модель обновлений.    Плюсы дистрибутива Antegos: Открытое сообщество, как для разработчиков, так и для пользователей с их пожеланиями и замечаниями; Собственный установщик, упрощающий процесс установки; Поддерживается то же железо, что и у Arch Linux, Отличный внешний вид благодаря сотрудничеству с Numix; Использует репозитории Arch Linux; Быстрый выход обновлений для разнообразного ПО.   Минусы дистрибутива Antergos: Сложности с установкой проприетарных драйверов на ряд устройств - нужно ставить вручную.   Puppy Linux Puppy Linux это дистрибутив Linux, созданный Барри Каулером в 2003 году. Puppy Linux – не является цельным дистрибутивом Linux, как Debian. Puppy Linux также не является дистрибутивом Linux с несколькими разновидностями, как Ubuntu (с его вариантами Ubuntu, Kubuntu, Xubuntu и т. д.), хотя и поставляется в разных вариантах. Puppy Linux - это совокупность нескольких дистрибутивов Linux, построенных на одних и тех же общих принципах, с использованием одного и того же набора инструментов, на основе уникального набора приложений и конфигураций, специфичных для Puppy, и в целом обеспечивающих согласованное поведение и работу, независимо от того, какой дистрибутив вы выбираете. Не смотря на очень маленький размер, дистрибутив является полнофункциональным. В отличие от дистрибутивов LiveCD, которые должны постоянно подгружать данные с компакт-диска, Puppy загружается сразу в RAM. Таким образом все ПО будет запускаться практически мгновенно и мгновенно реагировать на ввод данных пользователем. Puppy Linux может загружаться с любого USB-накопителя, CD-ROM, Zip-диска или супердиска LS 120/240, дискет, внутреннего жесткого диска. Он может даже использовать мультисессионный формат CD-RW / DVD-RW, чтобы сохранить всё обратно на CD / DVD без жесткого диска вообще.   Есть три основных направления дистрибутивов Puppy Linux: официальные дистрибутивы – являются дистрибутивами общего назначения и поддерживаются командой Puppy Linux. Как правило, создаются с использованием сборщика систем Puppy Linux (называемого Woof-CE). собранные в коллекцию Woof, дистрибутивы Puppy Linux - разрабатываются для удовлетворения конкретных потребностей, предназначаются для общего пользования и собраны с использованием системного компоновщика Puppy Linux с рядом дополнительных или модифицированных пакетов. неофициальные производные дистрибутивы («щенки») - являются ремастерами (или ремастерами ремастеров), созданными и поддерживаемыми энтузиастами Puppy. Обычно предназначаются для определенных конкретных целей.   Официальный сайт - http://puppylinux.com/   Особенности дистрибутивов Puppy Linux: минимум системных служб; ядро версии 4.4. Можно обновить до 4.9; свой менеджер пакетов - Puppy Package Manage; поддерживает архитектуру i386, x86_64.   Плюсы дистрибутивов Puppy Linux: ядро и софт, оптимизированные под домашнего пользователя; содержит все инструменты повседневного использования; легкая установка – драйвера на большинство современного и старого оборудования работают автоматически; малый размер системы – 300 MB или меньше; возможна работа в режиме полной установки, а также полноценная работа c CD-ROM (LiveCD) или USB-Flash; возможность установки нескольких FRUGAL дистрибутивов на раздел с установленным Windows; удобная переносная система с вашими настройками на USB-флешке, карте памяти или HDD; удобный оконный «бабушка-френдли» интерфейс системы; большое количество производных дистрибутивов под нужды каждого пользователя.   Минусы дистрибутивов Puppy Linux: Из-за необходимости поддерживать совместимость со старым железом, графический интерфейс, некоторыми пользователями воспринимается сильно устаревшим.   Рекомендуемые системные требования: 1 или больше GHz - процессор; 2 GB - оперативная память.   Manjaro Linux Manjaro это дистрибутив Linux, основывающийся на Arch Linux. Впервые представленный в 2011 году, дистрибутив Manjaro до 2013 года находился в режиме беты. Основываясь на Arch, проект Manjaro со времен своего основания своей целью ставил создание дистрибутива, сочетающего в себе как дружественность по отношению к неопытным пользователям, так и возможности Arch Linux. Официальный сайт - https://manjaro.org/ Особенности дистрибутива Manjaro: Использует менеджер пакетов Pacman; Поддерживает платформу x86-64; Поддерживает версию ядра 4.20.3; Отказ от использования персональных архив пакетов (Personal Package Arhive - PPA).   Плюсы дистрибутива Manjaro: Удобный менеджер драйверов с возможностью автоматической установки; Поддержка обширного списка оборудования; Использование репозиториев Arch, полная совместимость с Arch User Repository; rolling release в обновлениях с предварительным тестированием пакетов участниками проекта Manjaro; удобная возможность установки множество версий ядра и удобного переключения между ними; доброжелательное сообщество.   Минусы дистрибутива Manjaro: Отказ от поддержки архитектуры i686; Пользователи отмечают перенасыщенность брендингом включая обои, закладки в браузерах и тп; Относительно малочисленной сообщество со всем вытекающим для Linux-пользователя.   Вывод. Выбирая для себя операционную систему, стоит помнить, что операционная система — это инструмент, который, с одной стороны, должен быть для вас удобным, а с другой – обладать нужным для вас функционалом. Какая система лучше для пользователя: Windows или Linux, или MacOs, или FreeBSD– это тема многих «священных форумных войн», так и не давших однозначного ответа на этот вопрос. Такие же баталии, хотя и с меньшим градусом агрессии, проходят на тему «лучший дистрибутив linux». Мы не сможем дать Вам однозначного ответа на вопрос – какой дистрибутив является лучшим дистрибутивом Linux для разработчика. Если Вы только раздумываете над возможностью перейти на работу c OC Linux, Вам будет полезно рассмотреть наш рейтинг в качестве отправной точки. Если же Вы уже являетесь опытным пользователем Linux – мы надеемся, что наш рейтинг дистрибутивов Linux поможет Вам в выборе нового инструмента, или утвердит в желании остаться на проверенном Вами. Не так важно определиться раз и на всегда в операционной системе. Не бывает однозначно абсолютно удобных инструментов (многие разработчики используют одновременно 2 и более операционных систем.). Главное, чтобы Вы продолжали профессионально расти и развиваться, используя подходящие и удобные для Вас инструменты. Со своей стороны, портал ITVDN готов предоставлять для этого развития актуальную и полезную информацию.

План: 1. Різниця між синхронним та асинхронним кодом 2. Багатозадачність процеси й потоки, у чому різниця 3. Особливості багатозадачності в JavaScript 4. Асинхронні операції на практиці HTTP-запит як найпоширеніший кейс 5. Підходи до написання асинхронного коду: Promise    Async/Await Observable 6. Практичні поради Різниця між синхронним та асинхронним кодом Для початку давайте визначимо ці два терміни: Синхронний код - це код, який виконується послідовно, функція за функцією. Асинхронний код - код, який може виконуватися паралельно: наступна функція запускається, не чекаючи завершення попередньої. Щоб провести аналогію з реального життя, уявімо кухаря. Якщо кухар працює синхронно, то поки він не завершить приготування однієї страви, не переходить до наступної. Але це неефективно й призводить до втрати часу. Якщо ж кухар діє асинхронно, то поки м’ясо запікається в духовці, а на плиті закипає вода, він нарізає овочі. Тобто він один, але не стоїть без діла - виконує інші задачі, поки щось готується саме. Уявімо, що кухар - це процесор. А запікання м’яса в духовці - це завантаження файлу з мережі. Кухар може просто стояти й дивитись, як м’ясо готується. А може нарізати овочі, перевіряти, чи не з’явились нові замовлення, або скролити стрічку в соцмережі. Так само і з програмами: поки мережева карта завантажує файл, процесор не мусить чекати - він може малювати інтерфейс, оновлювати прогрес-бар чи виконувати обчислення у фоні. Але для цього потрібно правильно написати код - так, щоб він міг працювати асинхронно. Код який виконується синхронно ```js console.log("Початок"); console.log("Дія"); сonsole.log("Кінець"); ``` Результат: Початок Дія Кінець   Код який виконується асинхронно. і ``js console.log("Початок"); setTimeout(() => { // за допомогою setTimeout ми відкладаємо запуск коду на певний час   console.log("Дія через 2 секунди"); }, 2000); сonsole.log("Кінець"); ``` Результат: Початок Кінець Дія через 2 секунди Це не та багатозадачність, як у деяких інших мовах програмування. Тут не використовуються додаткові потоки, а все працює завдяки механізму подій. Але про це детальніше дал Багатозадачність: процеси й потоки, у чому різниця Багатозадачність в операційній системі - це можливість запускати та керувати кількома задачами одночасно. Наприклад, працювати в браузері, слухати музику, завантажувати файл і паралельно редагувати код у Visual Studio. На практиці процесор дуже швидко перемикається між усіма цими задачами, створюючи ілюзію одночасного виконання. Якщо процесор багатоядерний - деякі задачі справді можуть виконуватись паралельно. Багатозадачність тісно пов'язана з двома важливими поняттями - процесами та потоками. Процес (process) - це окремий екземпляр програми у пам'яті, який має власні ресурси: виділену область оперативної пам'яті, дескриптори файлів, змінні оточення тощо.  Потік (thread) - це одиниця виконання всередині процесу. Потоки одного процесу працюють незалежно, але мають спільний доступ до пам'яті та ресурсів процесу. Процеси дозволяють запускати різні програми одночасно - наприклад, Google Chrome, Visual Studio Code і т.д.  Потоки дають змогу виконувати кілька задач усередині однієї програми. Наприклад, у Visual Studio Code один потік відповідає за оновлення інтерфейсу, інший перевіряє помилки в коді, ще один формує підказки під час написання. Це, звісно, спрощений приклад - у реальності VS Code використовує ще й окремі процеси для розширень і мовних серверів. Операційна система керує як процесами, так і потоками. Вона розподіляє процесорний час між ними, ставить у чергу, може призупиняти виконання або відновлювати його за потреби. Давайте трохи адаптуємо наш приклад з кухарем із попереднього посту. Уявімо, що процес - це ресторан, а потік - це кухар. Ресторан має все необхідне для приготування їжі: кухонне приладдя, продукти, рецепти (це можна розглядати як пам’ять і доступ до інших ресурсів). Кухар читає рецепт і, використовуючи ресурси ресторану, готує страву - так само, як потік виконує інструкції нашої програми, використовуючи ресурси процесу. Якщо ресторан хоче готувати кілька страв одночасно, йому потрібно більше кухарів, які працюють паралельно на одній кухні. Аналогічно, якщо програма повинна виконувати кілька задач одночасно - завантажувати файли, обробляти введення, оновлювати інтерфейс - вона може використовувати кілька потоків. Коли ми створюємо програму і хочемо зробити її зручною для користувача, а також ефективною з точки зору використання ресурсів, які виділяє операційна система на процес, ми іноді починаємо використовувати потоки та прийоми багатопотокового програмування. Це велика окрема тема, і ми її зараз чіпати не будемо. Одна з причин - у JavaScript немає прямого доступу до потоків. Уточнення. Якщо ви хочете використовувати JavaScript і все ж таки працювати з потоками - у вас є Web Workers:  https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers  А якщо JavaScript виконується не в браузері (наприклад, у Node.js), тоді можна використовувати модуль `worker_threads`. Але варто розуміти, що це не частина стандарту мови, а можливість середовища виконання. Додаткові корисні ресурси по цій темі: https://www.youtube.com/@CoreDumpped - канал з короткими відео про те як працює комп'ютер. Modern Operating System by Andrew Tanenbaum - принцип побудови та роботи операційних систем (може бути викликом для новачка, але нормально як для технічної книжки) Особливості багатозадачності в JavaScript JavaScript працює в одному потоці - це означає, що в будь-який момент часу виконується лише один фрагмент коду. Увесь код, який ми пишемо, виконується у call stack: це структура, в яку потрапляють усі функції, що викликаються. Якщо одна з функцій виконується довго (наприклад, важке обчислення), усі інші задачі - включно з обробкою кліків, рендерингом чи відповідями від сервера - будуть чекати, поки call stack не звільниться. Щоб не блокувати цей єдиний потік, браузер надає асинхронні API (setTimeout, fetch, Web API). Коли ми викликаємо, скажімо, fetch(), у стек додається лише короткий виклик цієї функції. Власне мережевий запит виконується в окремому потоці, який створює браузер. Тобто, один потік виконує задачі які є у call stack, а інший потік чекає поки відповідь поверне сервер. Але асинхронна операція колись завершиться і треба механізм який віддасть нашому головному потоку результат роботи іншого потоку. Коли це стається колбек або проміс‑резолвер не додається одразу у call stack. Спершу він потрапляє до черги подій (task queue). За роботою черги стежить event loop. Його правило просте - поки стек порожній дістати першу задачу із черги і покласти у стек. Так ми досягаємо псевдобагатозадачності: основний потік виконує короткі шматки коду послідовно, а довгі операції «живуть» поза стеком. Коли довгі операції завершуються вони формують чергу задач, які треба виконати а event loop ці задачі закидає до стеку, коли call stack стає порожнім. Це максимально спрощене пояснення, і без візуалізації може здатися складним. Якщо хочете краще зрозуміти, дуже раджу подивитись відео Jake Archibald — "In The Loop" на YouTube (англійською).  https://www.youtube.com/watch?v=8aGhZQkoFbQ Або приходьте на мій курс JavaScript Поглиблений, де ми розбираємо це на практиці.  Також корисна стаття на MDN, де ці процеси описані докладніше. Асинхронні операції на практиці: HTTP-запит як найпоширеніший кейс Один з прикладів асинхронної операції - це запит на сервер через HTTP-протокол. Якщо організовувати запит через JavaScript у браузері без використання React, Angular або Vue.js, то це можна зробити за допомогою: fetch XMLHttpRequest Спеціалізована бібліотека, наприклад, Axios Ось так буде виглядати простий код написаний на fetch ```js fetch('https://jsonplaceholder.typicode.com/users')   .then(res => res.json())   .then(data => console.log(data)); ``` А так на axios (axios одразу повертає розпарсений JSON як response.data, на відміну від fetch, де потрібно викликати .json() вручну) ```js axios.get('https://jsonplaceholder.typicode.com/users')   .then(response => console.log(response.data)); ``` Якщо розглянути саме fetch то ось що відбулося під капотом: fetch створює HTTP запит вказавши HTTP метод, заголовки, тіло тощо Цей запит передається у вбудовану систему Web API - окрему від JavaScript середу, яка працює в іншому потоці. JavaScript не чекає відповіді - основний потік продовжує виконувати інший код fetch повертає Promise - об'єкт, що представляє асинхронну операцію, результат якої з’явиться пізніше Коли відповідь від сервера приходить, Web API кладе callback в чергу. Event Loop перевіряє, чи call stack порожній, і виконує цю мікрозадачу. Така поведінка дозволяє браузеру одночасно виконувати інші задачі, не чекаючи завершення запиту. Про використання асинхронного коду в JavaScript є [безкоштовний урок на YouTube](https://www.youtube.com/watch?v=cvR1EQ1R0EQ) Також більше про синтаксис Promise можна дізнатися в уроці [Асинхронний код. Promise](https://itvdn.com/ua/video/javascript-essential-ua/js-promise-ua) на ITVDN, а детальніше про варіанти організації такого коду буде написано далі. Підходи до написання асинхронного коду Складність роботи з асинхронним кодом полягає в тому, що обробка результату операції відбувається не відразу, а через певний час після її запуску. Ми ініціюємо асинхронну операцію й можемо виконувати інші завдання, але все одно маємо якось дізнатися про її завершення та обробити результат. Проблема в тому, що в цей момент програма вже виконує інші дії. Тому для обробки асинхронних операцій використовується push-модель взаємодії: отримувача даних (наш код) викликає провайдер даних - окремий механізм, який керує асинхронною операцією. По суті, розробнику потрібно відреагувати на подію завершення асинхронної операції. Для цього існує кілька підходів: callback-функція Promise async/await (синтаксичний цукор над Promise) Observables Використання функцій зворотнього виклику (callback) Почнемо з callback-функцій. Це найпростіший підхід, але він може призвести до заплутаного коду, особливо коли одна асинхронна операція запускає іншу, і так утворюється ланцюг. Уявімо, що маємо функцію downloadImage(url, callback), яка завантажує зображення асинхронно, не блокуючи основний потік. Перший параметр - це адреса зображення, яке потрібно завантажити, а другий - функція, яку буде викликано після завершення завантаження. При цьому саме зображення буде передане як параметр у callback. Приклад використання: ```js downloadImage(url1, image => document.body.append(image)) ``` На перший погляд усе просто. Але якщо потрібно завантажити кілька зображень послідовно, код стає менш зрозумілим: ```js downloadImage(url1, image => {             document.body.append(image);             downloadImage(url2, image => {                         document.body.append(image);                         downloadImage(url3, image => {                                     document.body.append(image);                         })             }) }); ``` Така вкладена структура швидко ускладнюється, особливо якщо замість одного рядка з DOM-змінами з’являється додаткова логіка. Подібний стиль називають "Pyramid of Doom", і його краще уникати. Один зі способів спростити обробку асинхронних викликів - це використання Promise. Використання Promise Promise - це об’єкт, який представляє асинхронну операцію. У перекладі з англійської promise означає «обіцянка». Можна уявити, що це обіцянка від браузера надати в майбутньому або результат операції, або помилку, пов’язану з її виконанням. Приклад використання: перепишемо попередню функцію downloadImage, щоб вона повертала Promise. ```js let promise = downloadImage(url1); promise.then(image => document.body.append(image)); ``` Тут ми все одно використовуємо callback-функцію, але передаємо її вже в метод .then() об’єкта promise. Це важливий момент: тепер асинхронна операція має об’єктне представлення, яке можна передавати як параметр у різні частини коду; можна будувати ланцюжки промісів, позбуваючись вкладеності, яка виникала з callback. Приклад: ```js downloadImage(url1)                          // отримуємо проміс .then(image => {                             // вказуємо що робити коли promise перейде в стан resolved             document.body.append(image);             return downloadImage(url2);                // виконуємо метод, який повертає promise }) .then(image => {                             // результат роботи попереднього промісу передається як значення             document.body.append(image);             return downloadImage(url3); }) .then(image => {             document.body.append(image); }); ``` Тепер код виглядає лінійним і набагато зручнішим для супроводу. У прикладах вище ми не розглядали, як саме створюється Promise, адже важливо зрозуміти мотивацію використання цих об’єктів. Тим більше, що більшість API браузера вже повертають готові проміси. Наприклад: ```js fetch('<https://jsonplaceholder.typicode.com/users>')   .then(res => res.json()); ``` Якщо хочете детальніше розібратися зі створенням Promise вручну - перегляньте документацію на MDN або мій відео урок на ITVDN. Async/await Супроводжувати синхронний код завжди простіше, ніж асинхронний. У 2012 році в мові C# з’явився синтаксичний цукор, який значно спростив роботу з асинхронними операціями: замість вкладених callback можна було використовувати послідовний синтаксис з новими ключовими словами async та await. Згодом цю концепцію перейняли й інші мови програмування, зокрема Python та JavaScript. В JavaScript підтримку async/await додали у 2017 році. Призначення ключових слів async - додається до функції та вказує, що вона завжди повертає Promise. await - використовується перед об’єктом-промісом, щоб "дочекатися" результату перед виконанням наступних рядків коду. Перепишемо попередній приклад із завантаженням зображень, використовуючи async/await: ```js let image = null;   image = await downloadImage(url1); document.body.append(image);   image = await downloadImage(url2); document.body.append(image);   image = await downloadImage(url3); document.body.append(image); ``` Тепер код виглядає як звичайний синхронний: немає вкладених callback, усе читається рядок за рядком. Можна подумати, що await "зупиняє" виконання, очікуючи на результат промісу. Насправді ж код не блокує основний потік - під капотом він перетворюється на машину станів, де кожен стан описує дію до або після await. Ще одна перевага async/await - знайомий синтаксис для обробки помилок: ```js try {             let image = null;               image = await downloadImage(url1);             document.body.append(image);               image = await downloadImage(url2);             document.body.append(image);               image = await downloadImage(url3);             document.body.append(image); } catch (ex) { // обробка помилки } ``` У результаті асинхронний код виглядає так само зрозуміло, як і синхронний, що значно спрощує його супровід. Observable Observable - це ще один підхід до організації асинхронного коду. Назва походить від однойменного патерна проєктування (Observer pattern), який описує створення об’єктів, за якими можна «спостерігати», отримуючи від них сповіщення. Тобто це реалізація подієвої моделі за допомогою ООП. У сучасному JavaScript ця ідея пішла далі й стала основою реактивного програмування та бібліотеки RxJS. Якщо Promise представляє одне майбутнє значення (успішне або помилкове), то Observable - це потік значень, які можуть з’являтися з часом. Можна уявити: Promise - це одна посилка, яку ви отримаєте в майбутньому; Observable - це підписка на журнал, нові випуски якого надходитимуть регулярно. Щоб створити Observable, використовують конструктор або готові оператори RxJS. Наприклад, функція downloadImages(urls) може завантажувати кілька картинок і відправляти їх «у потік» по мірі завантаження: ```js import { Observable } from 'rxjs';   function downloadImages(urls) {   return new Observable(subscriber => {     urls.forEach(url => {       downloadImage(url, image => {         subscriber.next(image); // надсилаємо картинку у потік       });     });     subscriber.complete(); // повідомляємо, що потік завершено   }); } ``` Щоб використати Observable, на нього треба підписатися за допомогою subscribe: ```js downloadImages([url1, url2, url3])   .subscribe({     next: image => document.body.append(image), // що робити з новим значенням     error: err => console.error(err),           // обробка помилок   }); ``` Переваги Observable працюють із потоком даних, а не з одним результатом; підтримують підключення операторів трансформації (фільтрація, мапінг, комбінування потоків); можна легко скасувати виконання (відписатися від потоку). Нижче приклад обробки даних через оператори. В RxJS оператори підключаються через метод pipe: ```js import { filter, map } from 'rxjs/operators'; downloadImages([url1, url2, url3])   .pipe(     filter(image => image.width > 100), // пропускаємо лише великі картинки     map(image => {       image.classList.add('highlight');       return image;     })   )   .subscribe({     next: image => document.body.append(image),     error: err => console.error(err),     complete: () => console.log('Готово')   }); ``` Таким чином, як і у випадку з Promise, можна будувати ланцюжки обробки. Але Observable значно гнучкіші: вони дозволяють працювати не лише з одним значенням, а з динамічною послідовністю даних у часі. Для глибшого занурення рекомендую офіційний гайд Observable на RxJS.dev. та відео уроки Observables. Частина 1, та Observables. Частина 2[1]  Практичні поради по работі за асинхроним кодом Не змішуйте підходи без потреби Якщо почали писати з async/await, не вставляйте всередину .then() без особливої причини. Це ускладнює читання. Обробляйте помилки Використовуйте try/catch для async/await або .catch() для Promise. У випадку Observable завжди додавайте обробку error у subscribe(). Скасовуйте непотрібні операції Для Observable використовуйте unsubscribe(), коли потік більше не потрібен. Для fetch можна застосувати AbortController, щоб зменшити навантаження й уникнути витоків пам’яті. Уникайте "Pyramid of Doom" Замість вкладених callback застосовуйте Promise, async/await або Observable. Використовуйте паралельне виконання Якщо операції незалежні, запускайте їх одночасно через Promise.all(). Ізолюйте логіку обробки Розділяйте завантаження даних та маніпуляції з DOM. Це спростить тестування й повторне використання коду. Логуйте стан і помилки Під час розробки виводьте у консоль ключові події асинхронних операцій, щоб відстежувати їх послідовність. Пам’ятайте про event loop Розуміння різниці між мікрозадачами й макрозадачами допоможе прогнозувати порядок виконання коду. Перевіряйте сумісність середовища Деякі API можуть бути відсутні у певних середовищах (наприклад, fetch у Node.js доступний лише починаючи з версії 18).

Хто такий DevOps Engineer? Коротка історія виникнення DevOps Що таке DevOps? Які обов’язки DevOps спеціаліста? Що має знати DevOps інженер? Розвиток професійних навичок Кар’єрні перспективи та заробітна плата DevOps Engineer Кількість вакансій Конкуренція Зарплати Кар’єрні шляхи DevOps Ключові тренди в DevOps та технології Висновки DevOps інженер – це професія, яка дуже часто випливає в рейтингах найвищих зарплат в ІТ. При цьому спектр обов’язків досить неочевидний: розробники – програмують і створюють ПЗ, системні адміністратори – адмініструють комп’ютерні системи, тестувальники – тестують, рекрутери – рекрутять… А що роблять DevOps спеціалісти? Який спектр їхніх обов’язків? Які інструменти вони використовують і чому їхня праця так високо оцінюється в грошовому еквіваленті? З цими та іншими питаннями розбираємося в даній статті. Хто такий DevOps Engineer? Коротка історія виникнення DevOps DevOps є відносно молодим напрямком в ІТ, який виник приблизно у 2007-2008 рр. під час об’єднання зусиль двох спільнот: розробників ПЗ (відповідальні за Development – розроблення) та спеціалістів з підтримки та управління ІТ-інфраструктурою (Operations – операційна сторона або сторона, відповідальна за експлуатацію, операційну підтримку). Головна проблема полягала у взаємній ізольованості команди розробників та команди експлуатації. Пристрасті вибухали на моменті випуску проєкту в продакшн: девелопери вважали, що якщо ПЗ працює у них локально, його можна релізити, а відповідальність за будь-які наступні прояви непрацездатності продукту приписувалася команді операційної підтримки. Останні, в свою чергу, робили абсолютно дзеркальну дію, звинувачуючи у несправностях розробників. Саме об’єднання зусиль спеціалістів обох напрямків і дало життя новій спеціальності, яка знаходиться на стику двох ІТ-стихій – DevOps Engineer. Що таке DevOps? Які обов’язки DevOps спеціаліста? DevOps (Development and Operations) – це філософія та набір практик, покликаних об'єднати розроблення та експлуатацію в єдиний та координований ланцюжок постачання програмного забезпечення. Використання даного підходу сприяє: скороченню циклу розроблення; автоматизації та оптимізації процесів; пришвидшенню відповіді на потреби користувачів; підвищенню захищеності ПЗ; покращенню якості програмних продуктів; кращій комунікації всередині команди. Життєвий цикл DevOps. Джерело: стаття на GitLab під назвою “What is DevOps?” Відповідно, DevOps Engineer – це інженер, який використовує навички як з царини розроблення, так і зі сфери експлуатації та операційної підтримки. По суті, він підтримує розроблення, деплоїть продукт (запускає на сервері, хостингу) та тестує його працездатність, а також підтримує середовища, де розташовано задеплоєний продукт. Обов'язки DevOps спеціаліста включають: Керування CI/CD. DevOps Engineer будує, налаштовує, керує та підтримує процеси безперервної інтеграції (CI) та безперервної доставки (CD), забезпечуючи швидкі та надійні поставки продукту користувачам.   Автоматизація інфраструктури. Він створює та підтримує інфраструктуру, що сприяє ефективному масштабуванню та керуванню ресурсами, а також автоматизує процеси життєвого циклу продукту.   Забезпечення безпеки. Девопс інженер працює над забезпеченням безпеки програм та інфраструктури, застосовуючи практики DevSecOps.   Моніторинг, логування та обслуговування. Він встановлює системи моніторингу задля відслідковування продуктивності застосунків та інфраструктури, аби швидко реагувати на проблеми в роботі системи.   Налаштування хмарних сервісів. Девопс спеціалісти активно працюють з cloud-платформами для розроблення, розгортання та керування застосунками.   Оптимізація функціонування інфраструктури. Правило системних адміністраторів “працює – не чіпай” у випадку з девопсами не є актуальним. Спеціаліст наглядає за роботою системи і на основі фідбеку може вносити певні корективи. Інколи це дозволяє досить суттєво зменшити витрати на інфраструктуру.   Комунікація. Оскільки спеціаліст знаходиться водночас між Dev та Ops, він обов’язково повинен мати гарні комунікативні навички, аби ефективно взаємодіяти з колегами, швидко вмикатися в процеси та бути на вістрі продуктивності. Також деякі DevOps інженери можуть обирати собі більш конкретне коло обов’язків, наприклад: DevSecOps – фахівець, який більше зосереджений на безпеці; Release Engineer – увага в більшій мірі спрямована на DevOps-процеси, асоційовані з релізом; Build Engineer – обов’язки більше пов’язані з етапом білду застосунку, коли потрібно зібрати код, розібратися в конфліктах та підключити необхідні залежності; Cloud Engineer – зосереджений на роботі з хмарною інфраструктурою; Automation Engineer – зайнятий процесами автоматизації інфраструктури; SRE (Site Reliability Engineer) – фокусується на масштабованості, надійності і доступності онлайн-сервісів; тощо. Що має знати DevOps інженер Відповідь ми складемо, відштовхуючись від трьох джерел: дороговкази зі спеціальності (roadmaps); поради від DevOps інженерів; вимоги у вакансіях на українських сайтах з пошуку роботи. Комп’ютерні мережі Комп’ютерні мережі – це база як для сисадмінів, так і для девопсів. Вам знадобляться наступні знання: розуміння різних архітектур мережі та їхніх структур, знання мережевих моделей OSI та TCP/IP, основні протоколи цих моделей (IP, HTTP, HTTPS, TCP, UDP тощо), маршрутизація, фаєрволи та брандмауери, моніторинг та безпека мережі, DNS, VPN тощо. Linux Linux – сімейство операційних систем з відкритим вихідним кодом. DevOps інженери тісно працюють з даним різновидом ОС, наприклад він важливий при конфігурації CI/CD контейнерів, автоматизації збірки, виконання білдів, роботі з артефактами тощо. Вам потрібно знати основи лінукс, включаючи встановлення, налаштування та підтримку даної ОС. Найчастіше у вакансіях зустрічаються саме Ubuntu, CentOS та Red Hat. CI/CD CI/CD (Continuous Integration / Continuous Delivery) – це підхід до розроблення ПЗ, який орієнтований на автоматизацію процесів розроблення, тестування та розгортання програмних змін. Цей підхід сприяє зниженню ризику помилок та покращенню якості програмного забезпечення, а також швидкому впровадженню нового функціоналу. Також CI/CD допомагає полегшити співпрацю між розробниками та іншими командами, як-от тестувальники та спеціалісти з інфраструктури. В результаті цей підхід сприяє постійному покращенню програмного забезпечення і швидкому реагуванню на зміни в бізнесових та ринкових умовах. Це фундаментальна тема в роботі всіх, хто є дотичним до девопс, тому гарні знання CI/CD процесів обов’язкові. Скриптові мови (Bash, PowerShell), Python Також треба вміти писати bash-скрипти для автоматизації різних процесів – від резервного копіювання даних до налаштування середовища розроблення. Bash – це командна оболонка, в якій можна писати команди у Linux та Unix системах – їх виконуватиме ваша ОС (у Windows використовується PowerShell). А для того, щоб можна було запустити одразу декілька команд, можна написати спеціальний скрипт з послідовними інструкціями і просто запускати його через командну оболонку тоді, коли вам треба. Для цього найкраще підходить мова програмування Python, і її треба буде опанувати, аби спростити скриптинг та налагодити автоматизацію задач. Навички роботи з Bash та Python (PowerShell рідше застосовується) стають у великій нагоді DevOps Specialist та усім іншим фахівцям, котрі пов’язані з конфігурацією ОС, а також допомагають розуміти код, написаний розробниками. Вебсервери Вебсервери відіграють ключову роль у розгортанні та підтримці вебзастосунків і послуг. Одними з найпопулярніших є Nginx, Apache Tomcat, IIS. Девопс спеціалістам потрібно вміти правильно їх налаштовувати та траблшутити (знаходити і оперативно вирішувати проблеми). Docker, Docker Hub З Docker ви можете автоматизувати процес розгортання та управління програмами в контейнеризованих середовищах. Ця технологія сприяє швидшому деплою програм, полегшує тестування і скорочує інтервал між написанням коду та запуском програмних застосунків. Обов’язковий інструмент в арсеналі DevOps. Docker Hub – репозиторій (вебсховище), де розташовані docker-контейнери. З його допомогою розробники можуть завантажувати свої та скачувати контейнери інших девелоперів, аби потім використати у своїх цілях. Одна з важливих переваг докеру – він дозволяє створити одне середовище для розроблення, на яке не будуть впливати ОС та особисті програмно-апаратні налаштування розробників. Це полегшує не тільки розроблення, а й процес випуску продукту, оскільки на релізі ПЗ матиме значно менше конфліктів і проблемних ситуацій. Хмарна інфраструктура: AWS, Azure, GCP Хмарні сервіси дозволяють використовувати потужності сторонніх компаній (в даному випадку – Amazon, Microsoft, Google) для виконання обчислень, зберігання даних, розгортання та масштабування інфраструктури, автоматизації, моніторингу та проведення аналітики, використання API тощо. Вони зараз супер затребувані, тому один клауд-сервіс з перерахованих (AWS, Azure, GCP) треба знати обов’язково. Найбільше вакансій зараз саме на AWS. Git, GitHub / GitLab Git – розподілена система контролю версій, якою користуються розробники задля фіксування свого прогресу та простішого ведення спільного розроблення. Це фундаментальний інструмент, який ви маєте знати, аби відстежувати та керувати кожною зміною у вихідному коді та інших файлах. GitHub, GitLab та Bitbucket – це вебсховища, в яких зберігається код вашого проєкту, над яким працює команда. Також вони мають низку вбудованих функцій, котрі будуть важливі в тому числі і в роботі девопс спеціаліста. Ідеальним варіантом буде, якщо ви вивчите роботу і з GitHub, і з GitLab. Jenkins / GitLab CI / Circle CI / GitHub Actions Це CI/CD системи, які допомагають в роботі з безперервною інтеграцією нового коду та безперервною доставкою нової версії продукту користувачам. Jenkins дозволяє налаштовувати різні кроки CI/CD, як-от збирання, тестування, розгортання і навіть інтеграцію з хмарними сервісами. Він допомагає зменшити час між написанням коду та його впровадженням. GitHub Actions – інтегрована з GitHub служба автоматизації. Девопс розробники використовують її для створення та налаштування CI/CD. Вона дозволяє виконувати дії після доставлення коду до GitHub-репозиторію, наприклад компіляцію, тестування і розгортання. Circle CI та GitLab CI можна наділити такими ж характеристиками – вони дозволяють налаштувати CI/CD. Усі інструменти мають низку відмінностей, а обрати варто той, який краще підходить під ваші задачі та має кращу сумісність з системами, котрі ви використовуєте. Agile: Scrum / Kanban Методології розроблення ПЗ, котрі є фундаментальними в роботі девопс спеціалістів, оскільки вони визначають засади, на яких базуються усі процеси в команді. Scrum – методологія розроблення ПЗ, яка відноситься до гнучких (Agile). ЇЇ головна задача – створити проміжний продукт, який теоретично можна представити користувачам, а з кожною наступною ітерацією – спринтом в 2-4 тижні – додавати все більше та більше змін, рухаючись ітеративно до кінцевого вигляду. Kanban – ще одна Agile-реалізація, яка робить акцент на швидкості розроблення проєкту від початку i до кiнця, а також на візуалізації задач – для цього команда використовує Kanban-дошку і безперервно вдосконалює процес розроблення. Англійська мова DevOps інженерам потрібна англійська (бажано Intermediate та вище) для гарного розуміння технологій, з якими вони працюватимуть, читання мануалів і т. д., адже більшість документацій та корисних статей йдуть саме мовою Туманного Альбіону. Також English потрібен для успішної комунікації з іноземними замовниками / членами команди тощо. Додаткові технології Окрім основних технологій, перерахованих вище, у вакансіях досить часто зустрічаються наступні: системи моніторингу та логування: Zabbix, Grafana, ELK (Elasticsearch, Logstash, Kibana), Prometheus; системи керування конфігураціями: Ansible та Terraform; Kubernetes – технологія оркестрації контейнерів; розуміння БД – як реляційних, так і нереляційних. Розвиток професійних навичок Яким чином отримати освіту з напрямку DevOps? В університетах таких спеціальностей не існує – принаймні в українських, – є лише загальні напрямки, в яких викладаються фрагменти того, що потрібно девопс інженерам, наприклад комп’ютерні мережі, операційні системи, програмування, теорія інформації та кодування, криптографія тощо. Тому новачкам треба звертатися до інших джерел. Перерахуємо їх: Безкоштовні інтернет джерела / самостійне навчання. Сюди можна віднести YouTube, різні соціальні мережі з відповідними групами, де збираються девопс спеціалісти, блоги та статті у відкритому доступі, ChatGPT тощо. Переваги очевидні – ви нікому нічого не платите, однак вам треба самостійно підбирати навчальні матеріали (які можуть бути застарілі), самостійно шукати відповіді на питання, тримати дисципліну та навчальний запал і т. д.   Курси. Ви можете записатися на очні/онлайн курси і навчатися з тренером та іншими одногрупниками, або ж обрати формат записаних відео курсів (Udemy, edX, ITVDN та ін.). Вибір на користь очного або онлайн навчання з тренером дозволяє краще опанувати матеріал, оскільки вам є до кого звернутися, конкуренція підігрівається одногрупниками, а також ви маєте постійну мотивацію, адже д/з і курсові проєкти мають бути виконані вчасно. Мінус – для якісних курсів треба діставати гаманець, але воно того варте. Сюди ж можна віднести конференції DevOps, на яких ви можете знайомитися з однодумцями і прокачувати ваші знання та навички.   Курси від великих компаній. Варіант, який дозволяє потрапити на якісні курси та вчитися у достатньо інтенсивному темпі з перспективою отримати запрошення на позицію Intern/Trainee в цій же компанії. Дуже класний варіант, проте є два але: 1) потрібно самостійно отримати деякі знання з DevOps і пройти відбір; 2) такі курси бувають платні. Даний формат навчання можуть надавати EPAM, SoftServe, Sigma Software, PortaOne тощо.    Менторство. Ви також можете знайти знайомого або DevOps-філантропа, який візьме вас під своє крило і буде навчати, видавати д/з, відповідати на питання, направляти, стежити за прогресом і т. д. Також гарний варіант, однак знайти таких добродіїв-джедаїв досить важко. Освітні ресурси дадуть вам знання інструментів. А як щодо особистих скілів – так званих soft (м’яких) навичок? Щоб стати гарним DevOps Specialist, важливо мати наступні якості: комунікабельність, асертивність та вміння грати в команді; вміння продуктивно розпоряджатися часом (time management); проактивність; уважність; кмітливість (жвавий розум); гарно розвинені критичне та системне мислення; вміння швидко вчитися; вміння гарно слухати і чути; жага до постійного розвитку; гарні навички problem solving / траблшутингу; стресостійкість; вміння брати на себе відповідальність; емпатія. Кар’єрні перспективи та заробітна плата DevOps Engineer Кількість вакансій Почнемо з того, наскільки затребувані DevOps Engineers. Для цього переглянемо кількість відкритих вакансій на DOU.ua – найбільшій спільноті українських девелоперів – і порівняємо з іншими популярними напрямками (станом на початок листопада): DevOps – 156 вакансій; QA – 160; Front End – 150; Python – 108; Java – 107; .NET – 100; Node.js – 102; Data Engineer – 46; Data Science – 45; Android – 27. На українському Djinni, де айтішники України анонімно шукають роботу, ситуація наступна: DevOps – 283 вакансії; JavaScript / Front-End – 534; Java – 168; C# / .NET – 161; Python – 193; Node.js - 222; QA Manual – 136; QA Automation – 88. Конкуренція Скористаємося співвідношенням кількості відгуків до кількості вакансій на DOU (жовтень 2023), аби зрозуміти, наскільки конкурентний ІТ-ринок у спеціалістів за напрямком DevOps. Бачимо наступне: В середньому на 1 вакансію припадає 11 претендентів. Це досить непоганий результат як для поточного стану українського ІТ. Наприклад, для QA ця цифра становить 109.6, FrontEnd – 109.1, Java – 46.3, Node.js – 33.9, .NET – 32.2, Python – 26.4. Ви абсолютно справедливо зазначите, що це статистика для всіх фахівців – як новачків, так і спеціалістів із досвідом. А яке співвідношення відгуків-вакансій у тих, хто має менше 1 року досвіду? Станом на жовтень 2023: DevOps – 24.5, FrontEnd – 458, Node.js – 443, Java – 198, .NET – 178, QA – 139.7, Python – 72.5. Все одно девопс має значно менше конкуренції, аніж найбільш популярні напрямки. Зарплати Щодо ЗП на українському ІТ-ринку звернімося до літнього зарплатного опитування від DOU. DevOps спеціалісти наразі мають одну з найвищих медіанних зарплат – 3500 USD, поступаючись SRE (одна з гілок DevOps), менеджерським та найвищим керівним посадам. Медіанна ЗП відповідно до міст: Київ – 3675 USD; Харків – 3000 USD; Львів – 2800 USD; Одеса – 4212 USD; Дніпро – 4000 USD; Івано-Франківськ – 3875 USD. Кар’єрні шляхи DevOps Кар’єрні перспективи досить обширні і залежать від того, чим займається DevOps спеціаліст, оскільки це неоднорідна галузь. Відтак ви можете обрати для себе щось більш нішове і розвиватися саме там, наприклад: хочете фокусуватися на хмарних процесах – Cloud Engineer; подобається автоматизація інфраструктури – вам до Automation Engineer; робите ставку на кібербезпеку та захист на всіх етапах життєвого циклу розроблення – DevSecOps буде чудовим вибором; Site Reliability Engineer – гарний вибір, якщо хочете заробляти ще більше грошей і займатися якістю вже готових систем; і так далі. Якщо говорити про ріст вгору, то спочатку вас очікує стандартні девелоперські сходи – Junior, Middle, Senior, а зі збільшенням об’єму вашого досвіду ви можете претендувати на керівні посади, як-от Head of DevOps, Lead, Architect. Також у вас є можливість відійти від DevOps ремесла як такого і: заглибитися в програмування, перейшовши в розробники; стати автоматизованим тестувальником (Automation QA); будувати кар’єру в області кібербезпеки в якості аналітика, білого хакера, спеціаліста з безпеки тощо; піти в системне адміністрування і сконцентруватись на роботі з інфраструктурою; займатися менеджерською діяльністю і керувати командами розробників / тестувальників і т. д. Тут діє і зворотнє правило: так само ви можете потрапити в DevOps і через розроблення, і через QA, і через CyberSecurity тощо. Просто треба буде довчити частину стеку, якої вам бракує. Ключові тренди в DevOps та технології DevOps постійно розвивається, і існує кілька ключових тенденцій та технологій, які визначають поточний напрямок розвитку: DevSecOps (Development, Security, Operations). Безпека виходить на перший план: спостерігається стійка тенденція до все більшої інтеграції безпекових парадигм та практик в DevOps процеси, аби програмне забезпечення було якомога менш вразливим та більш надійним.   Інтеграція штучного інтелекту. Наприкінці 2022 та початку 2023 виник великий ажіотаж навколо ChatGPT, котрий створений на базі ШІ. Звісно, це не перший випадок, коли використовуються нейронні мережі, однак подія була резонансна. Тому досить логічно, що по всьому ІТ наразі котиться ШІ-тренд, оскільки це несе спрощення роботи, підвищення швидкості реагування та продуктивності.   Infrastructure as Code (IaC). Все більше популяризується підхід до інфраструктури як до системи, на яку людський фактор повинен мати мінімальний вплив. Натомість якомога більше процесів мають автоматизовуватися за рахунок використання програмного коду (скрипти, шаблони, конфігураційні файли тощо) на противагу ручному/інтерактивному налаштуванню. Сюди ж можна додати serverless-обчислення, мікросервіси, Chaos Engineering, контейнеризацію та оркестрування, тренд на Site Reliability Engineering, посилення моніторингу та cloud-технології. А з трендових інструментів можна відзначити наступні основні: eBPF – технологія, яка надає можливість програмувати та виконувати код прямо в ядрі операційної системи Linux. Ця технологія розширює можливості фільтрації пакетів мережі і забезпечує високий рівень моніторингу та аналізу мережевого трафіку.   WebAssembly (він же Wasm) – бінарний формат вебпрограм, який може виконуватися в браузерах. Для DevOps дає можливість розгортання та моніторингу вебзастосунків, які працюють на різних мовах програмування та можуть запускатися у браузері без додаткових обмежень.   OpenTelemetry – це open-source проєкт, який допомагає збирати дані про продуктивність, моніторинг і трасування застосунків.   Argo Rollouts – інструмент, спрямований на автоматизацію процесу розгортання застосунків і мікросервісів. Він розширює можливості Kubernetes з управління релізами та розгортання застосунків, надаючи додаткові функції та контроль над процесом оновлення.   Інструменти від OpenAI. Рік тому саме ця компанія випустила славнозвісний ChatGPT, однак ним її здобутки не обмежуються. Це компанія активно займається розробками на базі ШІ, і також доклала зусилля до GitHub Copilot, котрий значно спрощує написання коду. Висновки DevOps – досить цікавий та різнобічний напрямок, в якому знайти себе може кожен, хто вміє траблшутити і гратися як із кодом, так і з інфраструктурою. Вимоги можуть бути досить розмазані в залежності від сфокусованості конкретної вакансії, плюс треба враховувати, що багато роботодавців шукають собі якомога декорованіших фахівців, оскільки дешевше найняти одного “універсала”, аніж 2-3 різних спеціалістів. Однак саме тому і зарплати у девопсів одні з найбільших на ІТ-ринку, якщо не брати до уваги керівні посади. Для тих, хто хоче дізнатися думку досвідченого System Engineer та DevOps спеціаліста стосовно DevOps кар’єри, радимо переглянути запис вебінару від Миколи Прокопенка. Автор має 6+ років досвіду в аутсорсі та аутстафі у великих компаніях (Luxoft, Ciklum, DataArt), а також є сертифікованим експертом Microsoft Azure. Бажаємо успіхів на вашому шляху в ІТ!

Основні технології HTML5 & CSS3 Flex та Grid CSS CSS препроцесори Git & GitHub Знання про веб-технології та мережу інтернет JavaScript JavaScript Core (DOM, AJAX, JSON) REST API Алгоритми та структури даних Фреймворки JavaScript Інструменти керування станом програми (State Management) TypeScript Основи Figma Англійська мова Необов’язкові технології Патерни проєктування JavaScript Лінтери Тестування Webpack Gulp / Grunt SOLID принципи Зарплати FrontEnd розробників Підсумки FrontEnd – одна з найлегших професій розробника в ІТ. Вона вигідно вирізняється тим, що поєднує в собі програмування та творчість, оскільки девелопер працює над оживленням дизайнерського макету та створенням відповідної користувацької логіки. Також перевагою фронтенду є те, що побачити результат своєї роботи можна майже одразу – в будь-якому браузері. Відносна легкість фронтенду породжує велику популярність серед бажаючих потрапити в ІТ, а враховуючи наслідки відкритої агресії по відношенню до України – особливо велику популярність, адже це можливість працювати віддалено (на ІТ-компанію або на фрилансі) і отримувати гарну зарплату. Відповідно, конкуренція серед Trainee/Junior FrontEnd розробників шалена, а тому роботодавці вимушені закручувати гайки і підвищувати вимоги до кандидатів, аби відібрати найкращих.   Тож як стати фронтенд розробником? Якими технологіями необхідно володіти, аби стати Intern/Junior FrontEnd розробником у 2023 році? Проаналізувавши вакансії на українському ринку айті, ми склали список актуальних інструментів, які зазвичай вимагають роботодавці від кандидатів. Їхній перелік – нижче у статті. Frontend developer roadmap. Основні технології HTML5 & CSS3 HTML5 і CSS3 – це фундаментальні технології, без знання яких не обійтися жодному веб-розробнику. За допомогою мови гіпертекстової розмітки HTML створюється розмітка (каркас) кожної веб-сторінки. Потім мова стилів CSS збагачує візуальне оформлення сайту і надає йому привабливого та ефектного зовнішнього вигляду. Крім цього, необхідно володіти: кросбраузерним адаптивним верстанням, щоб вміти створювати сайти під мобільні пристрої, планшети і широкоформатні екрани та для різних браузерів; семантичним верстанням для підвищення якості розмітки та покращення пошукової індексації сайту; валідним верстанням, яке передбачає повну відповідність коду розробника всім стандартам W3C - організації, яка створює та впроваджує технологічні стандарти для World Wide Web. Приділіть особливу увагу верстанню під мобільні пристрої, тому що сучасний веб-споживач дуже багато часу проводить у смартфоні. Існує навіть спеціальний підхід, при якому спочатку верстається веб-сайт під мобільні пристрої, а потім під десктопи – називається Mobile First. Це загальні вимоги щодо верстання. Тепер розглянемо більш детально вимоги безпосередньо щодо мови стилів – CSS. Тут ви повинні знати основні властивості CSS3: фони, градієнти, тіні, анімації, трансформації, переходи, а також технології Flex та Grid, про які ми ще поговоримо. Гарне володіння HTML та CSS вже дозволяє займатися верстанням сайтів та заробляти гроші. Саме з цих двох базових технологій починається шлях до професії FrontEnd розробника. Якісно вивчити HTML та CSS ви зможете за допомогою наступних наших курсів: HTML5 & CSS3 Стартовий; HTML5 & CSS3 Базовий; HTML5 & CSS3 Поглиблений. Flex та Grid CSS Технології верстання надійних адаптивних веб-сторінок, які дозволяють легше створювати динамічні сайти та зручніше структурувати їх вміст. Найкраще Flex-верстання в дії показує інтерактивний сайт flexboxfroggy.com, а Grid-верстання – cssgridgarden.com. На нашому ресурсі також є курси, які гарно пояснюють теми Flex та Grid верстання: "Верстання сайту на CSS Grid", "Верстання сайту на FlexBox CSS". CSS препроцесори CSS препроцесор — це програма, яка має власний синтаксис, але може згенерувати з нього CSS-код. Найпопулярнішими вважаються SASS, Stylus, LESS і PostCSS, проте найбільше ком'юніті саме у SASS. Препроцесори призначені для: прискорення процесу написання коду; спрощення читання коду та його подальшої підтримки; мінімізації рутинної роботи під час написання коду. Для підвищення ефективності написання CSS-коду цілком достатнім буде вивчення лише одного препроцесора. Git & GitHub Git - найбільш популярна система контролю версій, яка дозволяє вести історію розроблення проєкту з можливістю доступу до кожної збереженої версії. Крім того, варто вміти працювати з сервісом онлайн-хостингу проєктів, який використовує систему контролю версій. У даному випадку це GitHub. У тандемі з Git він дозволяє розробникам зберігати свій код онлайн у хмарному сховищі, а потім взаємодіяти з іншими розробниками у різних проєктах. Дані системи дозволяють команді програмістів працювати над одним проєктом одночасно, зберігаючи внесені зміни, і навіть відслідковувати виконання завдань кожним членом групи. Git & GitHub — дуже важливі інструменти для будь-якого IT-розробника, вивченням яких слід зайнятися якомога раніше. Ми рекомендуємо вивчати Git на ITVDN за допомогою курсу «Основи роботи з Git». Знання про веб-технології та мережу інтернет Щоб якісно виконувати свою роботу, фронтенд розробник повинен розбиратися у вебі і розуміти принципи його функціонування. Таким чином, необхідно знати: як працює інтернет; протоколи HTTP/HTTPS, веб-сокети; як працюють браузери; що таке DNS та як він працює; що таке доменне ім'я; що таке хостинг. Також буде непогано, якщо ви спробуєте налаштувати сайт на якомусь безкоштовному хостингу, прив'яжете домен до цього хостингу. JavaScript Мова програмування, яка використовується як при розробленні клієнтської сторони веб-застосунку, так і серверної. За допомогою JavaScript (скорочено JS) можна писати навіть настільні та мобільні додатки, використовуючи певні програмні платформи та бібліотеки. Ця мова дозволяє: динамічно змінювати HTML-розмітку; здійснювати інтерактивну взаємодію з користувачем; анімувати зображення; здійснювати валідацію форм; керувати мультимедіа тощо. Іншими словами, JavaScript "оживлює" сторінку та додає їй функціональності. Гарне володіння цією мовою програмування є обов'язковим пунктом для кожного FrontEnd розробника. JavaScript використовує офіційний стандарт ECMAScript (скорочено - ES), який має на увазі певний формальний опис синтаксису, базових об'єктів та алгоритмів. На даний момент існує багато різних версій ES. Роботодавці найчастіше вимагають знання ES6+. Однак спочатку необхідно вивчити чистий JavaScript (vanilla JavaScript) і лише потім вникати в нові стандарти. Як не крути, а класику треба знати. Завдяки гарному володінню JS можна швидко розібратися в будь-якій версії ES, а потім опанувати будь-який фреймворк або бібліотеку. ITVDN надає можливість вивчити JavaScript з нуля до поглибленого рівня за допомогою курсів: JavaScript Стартовий; JavaScript Базовий; JavaScript: Розширені можливості. JavaScript Core (DOM, AJAX, JSON) DOM (Document Object Model) – об'єктне представлення вихідного HTML-документу. Ключовим є поняття DOM-дерева, яке описує структуру сторінки. За допомогою об'єктної моделі JavaScript отримує повну владу над HTML-документом: можливість редагувати, видаляти та додавати елементи і атрибути HTML, змінювати CSS-код тощо.   AJAX (Asynchronous JavaScript And XML) – це синтез технологій JavaScript і XML, який фактично являє собою комбінацію: вбудованого в браузер XMLHttpRequest-об'єкту (щоб запитувати дані з веб-сервера); JavaScript та HTML DOM (щоб відображати або використовувати дані). AJAX дозволяє веб-сторінкам здійснювати асинхронне оновлення, обмінюючись даними з веб-сервером. Завдяки цій технології сторінка не потребує перезавантаження – оновлюється лише конкретна її частина (згадайте стрічку новин у соціальних мережах). JSON (JavaScript Object Notation) – це загальний формат обміну даними. Дозволяє здійснювати обмін інформацією між програмними продуктами, котрі написані різними мовами. Таким чином, клієнт, який використовує JavaScript, може легко передавати дані на сервер, реалізований за допомогою Ruby/Java/PHP. Всі три технології мають особливу цінність для кожного веб-розробника та розкривають організацію роботи інтернет-застосунку. REST API API – Application Programming Interface – це набір правил, при дотриманні яких програми можуть між собою взаємодіяти. Розробник створює API на сервері та дозволяє клієнтам звертатися до нього. Красномовним прикладом буде API від Google Maps, котрий дозволяє веб-розробнику вказати на гугл мапі розташування певної будівлі (точку видачі інтернет-замовлень, офіс компанії абощо) на своєму сайті. Таким чином програміст позбавляє себе необхідності самому розроблювати власну мапу і користується вже готовим рішенням від Google, використовуючи набір правил від API. REST – Representational State Transfer – це архітектурний підхід, котрий регламентує, як саме API мають виглядати. Цьому набору правил має слідувати девелопер під час створення власного застосунку. Простими словами, REST – це звичайний запит виду «клієнт-сервер» з використанням HTTP-протоколу. Фронтенд розробнику необхідно розбиратися у REST API, оскільки ця технологія використовується усюди, де є необхідність працювати з даними від сервера. Алгоритми та структури даних Розуміння алгоритмів та структур даних – обов'язок будь-якого грамотного програміста. До структур даних відносяться: стеки, черги, зв'язані списки, графи тощо. Вивчивши їх, ви зможете керувати складністю своїх програм, роблячи їх більш доступними для розуміння, а також розробляти високопродуктивні програми, які ефективно працюватимуть з пам'яттю. Знання алгоритмів дозволить вам створювати складні конструкції для ефективного розв'язання широкого спектра завдань. Коли говорять про алгоритми, зазвичай мають на увазі алгоритми сортування та пошуку: сортування прямим включенням, прямим вибором, злиттям, пірамідальне, прямий пошук, бінарний, індексно-послідовний та інші. Важливо розумітися і на нотації Big O, яка описує складність кожного алгоритму. Даний механізм допомагає визначити, за яких умов вигідніше використовувати той чи інший алгоритм. Зазначимо, що як новачкові, вам не треба пірнати вглиб цих тем. Буде достатньо теоретичного володіння, розуміння, де яку структуру даних слід використати, а також уміння написати декілька алгоритмів. У розробленні сайтів це не дуже потрібно, але практично жодна співбесіда не оминає тему алгоритмів і структур даних. Фреймворки JavaScript Це інструменти, за допомогою яких створюються динамічні веб-/мобільні/десктопні застосунки мовою JavaScript. Вони прискорюють розроблення веб-додатків та передбачають чітко структуровану організацію коду, підвищуючи його якість та чистоту. Найпопулярнішими фреймворками для фронтенд розроблення можна назвати Vue.js, Angular та бібліотеку React. Кожен із них призначений для вирішення свого спектру завдань і має різний ступінь складності: Vue.js – найлегший (але й з найменшою спільнотою), React – середньої складності, Angular – високої складності. Варто сконцентруватися на глибокому вивченні одного фреймворку, але в той же час дуже рекомендується знати особливості та сферу застосування всіх перерахованих вище технологій. Який фреймворк все ж обрати? Думки щодо цього розходяться. Інструментарій вибирається індивідуально під проєкт та важко передбачити, які задачі вам потрібно буде вирішувати. На даний момент найбільшою популярністю користується React, оскільки він збалансований як з точки зору складності, так і з точки зору багатства функціоналу. До того ж найбільша кількість вакансій припадає саме на цей фреймворк, а значить, що він цікавий не тільки розробникам, а й бізнесу. Кожен із фреймворків доступний для вивчення на платформі ITVDN. За напрямком Angular: Angular 11.0 Базовий; Angular Поглиблений. За напрямком React: React Базовий; React Поглиблений. За напрямком Vue.js: Vue.js Стартовий; Vue.js Базовий. Інструменти керування станом програми (State Management) Великі веб-застосунки постійно зростають у складності, а тому зберігати дані, які можуть використовуватися в різних місцях, стає все складніше. Для вирішення цієї проблеми були вигадані окремі бібліотеки, що йдуть паралельно з фреймворками — вони служать для управління глобальним сховищем даних усього веб-застосунку і називаються менеджерами станів. Їх застосування вже стало стандартом у FrontEnd розробленні. Для девелоперів, які використовують Vue.js, це VueX, для React-розробників – Redux і MobX, для Angular-девів – RxJS, NgRx. TypeScript Кросплатформна строго типізована мова, яка є розширенням JavaScript. Строга типізація дозволяє зменшити кількість потенційних помилок у вихідному коді, написаному на TypeScript. Також ця мова реалізує концепції, які близькі до об'єктно-орієнтованих мов, таких як C#, Java та подібних. TypeScript підвищує швидкість та зручність написання комплексних програм, внаслідок чого їх стає легше підтримувати, масштабувати та тестувати. У вакансіях ця мова зустрічається досить часто незалежно від цільового фреймворку. При цьому для Angular розробників знання TypeScript є обов'язковим. Через високу затребуваність даної мови ми помістили її у список обов’язкових для вивчення. Основи Figma Figma – це популярний дизайнерський інструмент для створення інтерактивних прототипів застосунків або веб-сайтів. З його допомогою дизайнер створює дизайн, який фронтенд-розробник потім верстає за допомогою HTML/CSS і додає інтерактивність при участі JavaScript. Знання основ фігми дозволяє девелоперу зручно взаємодіяти з дизайнерським прототипом: швидко дізнаватися необхідні розміри тих чи інших елементів, робити експорт картинок та іконок тощо. Додатковий плюс – можливість використання браузерної версії Figma. Англійська мова План навчання Front-end повинен обов'язково включати підтягування English. Знання англійської є однією з основних вимог до фронтенд-розробника, оскільки велика кількість корисної інформації знаходиться саме на англомовних сайтах. Рівень читання технічної документації буде достатньо для комфортного користування іноземними ресурсами (Intermediate). Однак чим вищий рівень вашої англійської, тим більші шанси отримати job-офер. Інгліш використовується не тільки при роботі з документацією, а і при комунікації з командою та клієнтами. Серед програмістів побутує вислів: «Яку мову програмування слід вчити першою? Вчи англійську!». Тому не пошкодуйте ваш час і гарненько підтягніть англійську – цілком можливо, що саме гарне володіння нею стане вирішальним при розгляді вашої кандидатури. Необов’язкові технології Патерни проєктування JavaScript Це найкращі практики, які описують типові способи вирішення поширених завдань, що виникають під час проєктування програмного забезпечення. Знання шаблонів проєктування дозволяє писати більш чистий, зрозумілий і читабельний код, а також уникати "винайдення велосипеда". Більше того, володіння патернами показує вашу грамотність як розробника і підвищує вашу цінність в очах роботодавця, що допоможе виділитися на тлі конкурентів. Щоб ви могли добре розібратися з темою шаблонів JavaScript, рекомендуємо курс “JavaScript Шаблони”. Лінтери Інструменти, які дозволяють аналізувати якість JavaScript-коду відповідно до стандарту ES. Вони вбудовуються в середовище розроблення і вказують на наявність невідповідностей стандарту коду, якщо такі є. Даний механізм корисний як для одноосібного розроблення (для самоконтролю), так і для командного, коли кожен розробник повинен слідувати тим самим мовним конструкціям, аби на виході отримати єдиний, цілісний проєкт. Один із найвідоміших лінтерів – ESLint. Це необов’язковий інструмент для роботодавця, але він дуже корисний для веб-розробників у силу його можливостей з контролю якості коду. Тестування Jest та Cypress– головні інструменти модульного тестування, яке покладається на плечі розробника. Але що це таке? Unit тестування (воно ж – модульне тестування) – процес, який полягає у створенні тестів для перевірки працездатності окремих ділянок написаного програмістом коду. Виконується безпосередньо автором коду. Яку користь приносить Unit тестування: суттєве скорочення багів у коді; спрощення рефакторингу коду; забезпечення якісного відокремлення інтерфейсу від реалізації; краще розуміння написаного коду; можливість протестувати найдрібніші ділянки коду. Усі інструменти вчити не треба — достатньо навчитися працювати лише з одним із них. Webpack Потужний збирач модулів, який дозволяє скомпілювати в один файл кілька різних модулів. Використовується для роботи над об'ємними проєктами. Успішно використовується як у фронтенд-розробці, так і при створенні бекенду. Gulp / Grunt Системи збирання, які автоматизують рутинні завдання розробників: мініфікацію коду, оптимізацію зображень, тестування, аналіз якості коду та інше. Підходять для розроблення невеликих проєктів. SOLID принципи SOLID – це принципи, які є своєрідним ременем безпеки для тих, хто працює відповідно до парадигм об'єктно-орієнтованого програмування. Вони були створені з метою убезпечити ООП-орієнтованого розробника від незрозумілого, заплутаного спагеті-коду, який також ще й дуже важко підтримувати. SOLID - це акронім, який складається з п'яти букв, що кодують п'ять основних принципів: S - Single Responsibility Principle (принцип єдиної відповідальності) O - Open-Closed Principle (принцип відкритості-закритості) L - Liskov Substitution Principle (принцип підстановки Барбари Лісков) I - Interface Segregation Principle (принцип розділення інтерфейсу) D - Dependency Inversion Principle (принцип інверсії залежностей) Володіння цими принципами дозволяє грамотно проєктувати та розробляти такі програмні системи, які з великою ймовірністю зможуть тривалий час розвиватися, розширюватися та підтримуватися. Хоча SOLID принципи написані переважно для ООП, їхні ідеї цілком застосовні і до сучасного JavaScript розроблення, що допоможе фронтенд-розробникам створювати більш чистий та лаконічний код. Зарплати FrontEnd розробників Звернемося до статистики, опублікованої на сторінці української IT-спільноти DOU, а саме – до зарплатної аналітики українських розробників за літо 2023 року. Медіанна зарплата всіх українських розробників, які взяли участь в опитуванні (а їх 6605), наступна: Intern Software Engineer – 450 USD; Junior Software Engineer – 1000 USD; Middle Software Engineer – 2600 USD; Senior Software Engineer – 4900 USD. Тепер поглянемо на медіанну ЗП FrontEnd розробників: Junior – 950 USD; Middle – 2500 USD; Senior – 4750 USD. Виходить, медіана фронтендників на всіх тайтлах трохи менша, ніж загальна медіана, проте розрив досить невеликий. Погляньмо, скільки заробляє цей фахівець за межами України. У цьому нам допоможуть результати опитування Stack Overflow Developer Survey 2023 (понад 90 000 респондентів із США, Індії, Німеччини, Канади, Великої Британії та інших країн). Ця цифра – 59 970 USD на рік (приблизно 5000 USD на місяць).   При цьому буде важливо сказати, що фронтендники з даного опитування мають у середньому 8 років професійного кодингу – і це один із найнижчих показників. Нижче за них розташовуються лише Data Scientist / ML Specialist – 7.9 років досвіду, а також студенти, які мають трохи більше 2.8 років досвіду у професійному створенні коду. Підсумки FrontEnd розробник – досить універсальний боєць у світі веб-розроблення. Він повинен вміти і верстати, і створювати логіку роботи клієнтської частини, і розуміти роботу серверної частини веб-застосунку. Для опанування такого великого інструментарію варто запастися часом, терпінням та завзятістю. Зазначені у статті засоби розроблення сайтів також мають аналоги, оскільки для вирішення різних завдань підходять різні веб-інструменти. Однак ми вибрали найпопулярніші та найефективніші з них. Якщо у вас є бажання опановувати цю професію і ви хочете самостійно “помацати”, чим займається фронтенд розробник, на ITVDN створено комплексну програму навчання у форматі відео навчання, яка включає 44 відео курси. Аби отримати доступ до всіх відео курсів на ITVDN терміном на 12 місяців з можливістю скачувати на ваш пристрій відео матеріали (що дуже актуально під час блекаутів), радимо розглянути пакет підписки «Преміум Plus». Якщо ж вам більше до вподоби живе онлайн навчання з тренером та у групі з іншими учнями, пропонуємо формат Live Online для вивчення спеціальності FrontEnd (Angular або React напрямки). Бажаємо вам успіхів у досягненні ваших цілей! Залишайтеся з ITVDN!

Приветствуем вас, друзья! Сегодня мы хотим затронуть критически важную и актуальную тему, от которой зависит успех всех, кто берется за изучение программирования. Практически всегда новички в IT сталкиваются с такими проблемами, как: непонимание учебного материала; сложности с написанием кода; прокрастинация (лень); отсутствие мотивации; другие проблемы. Все эти и другие вещи создают серьезные препятствия на пути к освоению желанной IT-профессии. Однако, всё выше перечисленное — не корень проблемы, а лишь её симптомы. Чтобы сделать свое обучение эффективным, необходимо взглянуть правде в глаза. Какие действия приводят к подобным неудачам? Почему новички быстро “выгорают” и теряют интерес к обучению, а иногда даже перестают видеть смысл в дальнейшем изучении программирования? Почему затрачиваемое на изучение время приносит так мало пользы? Ниже приводим список того, как НЕ стоит поступать, если вы с нуля изучаете программирование и хотите стать хорошим разработчиком.    Не писать код Программирование — это занятие, которое очень сильно привязано к практике. Понятное дело, что любому новичку вначале необходимо понять в целом, куда он попал, что будет делать и как правильно это делать. Без теории никак не обойтись. Однако читать массу книг либо иных учебных материалов по написанию кода и не практиковаться — все равно, что учиться ездить на велосипеде по книгам, ни разу не попробовав прокатиться на нем самолично. Обычно такая привычка рождается из-за стандартного обмана нашего мозга. Мы смотрим на код в учебных материалах, на его объяснение, и нам кажется, что все кристально чисто и понятно — зачем тратить время и самому составлять такой же? Однако, стоит только сесть за написание кода, убрать все подсказки, как выяснится, что вы не можете реализовать работающую программу.  Каждый теоретический материал должен быть обязательно закреплен практическими задачами. Вы их можете самостоятельно придумывать на ходу; обычно именно так и происходит. Вы читаете, например, о массивах, у вас в голове всплывают какие-то вопросы в стиле “А можно ли сделать вот так? А что будет, если...” и это будет отличным способом попрактиковаться. Также не забывайте о множестве задач под каждую тему — вне зависимости от того, обучаетесь вы по книге, либо по другим материалам — никогда не упускайте возможность отточить навыки программирования.   Копировать код Данное действие нежелательно для новичков, ведь суть их обучения состоит в понимании концепций, а тупое копирование кода напрочь убивает это понимание. Старайтесь не поддаваться такому искушению и после изучения экземпляра кода обязательно попробуйте воспроизвести его самостоятельно. Очень важно, чтобы вы осознавали что за чем идет, как и почему происходит. В будущем это знание пригодится при решении новых задач, ведь опыт написания кода отложится у вас в голове, чего не скажешь о методе “копипаста”.   Уделять мало внимания основам Один из самых важных пунктов для любого обучения в принципе. На нем мы сделаем особый акцент и распишем данный раздел как можно подробнее. Бывало ли у вас чувство, что продуктивность вашего обучения (школа, университет, то же программирование) идет на спад — вы очень слабо понимаете теорию, новый материал никак вам не поддается, а практика особой ясности в происходящее не вносит? Такое может случаться и в повседневной жизни, когда необходимо освоить какой-то навык, но объем информации давит всем своим весом, истребляя всяческое желание развиваться и что-то учить. Чтобы такого не случалось, важно знать принцип, который поможет достичь успеха в любых начинаниях и повысит эффективность вашего обучения. Зайдем издалека. Есть три уровня овладения какой бы то ни было дисциплиной. Их ключевое отличие в количестве внимания и концентрации, которые необходимо выделить для применения знаний на практике:   Знание. Вам необходимо выделять порядка 90% всего вашего внимания и концентрации, чтобы применить знания на деле. Как пример, школьник младших классов, который решает простейшие примеры на умножение и деление — ему необходима львиная доля усилий, чтобы каждый раз вспоминать таблицу умножения. Умение. На этом уровне человек оказывается, когда он набил руку и уже может выделять на практическое применение знаний меньше концентрации и внимания, а именно — порядка 40%.  Навык. Вы выполняете задачу практически не концентрируясь на ней, однако качество выполненной работы сохраняется. Для примера можно сравнить начинающего водителя и водителя со стажем, который рассекает по дороге и практически не обращает внимания на нюансы, при этом соблюдая все правила дорожного движения. У него все процессы происходят словно на периферии сознания, позволяя без напряжения вести транспорт и чувствовать себя как рыба в воде. Водитель-профессионал на практическое применение знаний выделяет около 10% концентрации и внимания.   А теперь смоделируем интересную ситуацию: водитель-новичок принимает участие в гонках. Его уровень концентрации на базовых моментах вождения будет настолько высок, что он попросту разобьется. Или возьмем человека, который хочет научится рисовать красивые портреты. Ему показывают, как правильно какие линии рисовать. Затем он сразу пытается нарисовать портрет. Что в этот момент произойдет? Начинающий художник не сумеет нарисовать чего-то стоящего, ведь уровень его концентрации на базовых вещах будет очень высок. Этот человек будет сосредотачивать свое внимание на положении руки, степени нажатия на карандаш, плавности отрисованных контуров и т. д. Что следует делать, чтобы избежать ошибок, как в продемонстрированных примерах? Начинающему художнику необходимо отрабатывать базовые движения карандаша и кисти достаточно долго, пока не будет достигнут уровень навыка. Тогда тело привыкнет работать без постоянного контроля ума и будет проще занимать корректное положение руки, вести ровную линию и концентрироваться на чем-то более масштабном, а не на “низкоуровневых” нюансах. Точно такой же подход нужен и начинающему водителю. Другими словами, нашим новичкам необходимо отработать базу до максимума. При этом скорость их обучения будет расти по экспоненте, ведь каждая новая ступень информации имеет меньше принципиально новых знаний, поскольку основывается на уже известных им данных. Это означает, что с каждым новым шагом концентрировать внимание им надо будет всё в меньшей степени. Каждая новая ступень будет даваться нашим друзьям все легче и легче, ведь у них будет достаточно сил, дабы сконцентрироваться на новой информации, а не страдать от непонимания из-за плохо усвоенной информации предыдущего этапа. Проецируем всё выше изложенное на обучение в IT. Вы начали заниматься программированием — найдите основу, базу, главный набор навыков, который стоит освоить. Тренируйтесь до полного совершенства над базисом, не проскакивайте темы и не изучайте их лишь поверхностно. Однако, если чувствуете, что на данный момент ну никак не можете осилить материал, можете перейти к следующей теме или взять небольшой перерыв (желательно физическая активность), но по истечению определенного количества времени обязательно вернитесь и закройте пробел. Добейтесь полного понимания и владения всеми базовыми вещами дисциплины и только потом переходите к новому кругу информации. Когда вы возьмете его (новый круг информации) в оборот и изучите все необходимое на данном этапе, то заметите, что на это ушло гораздо меньше усилий и времени, чем вы ожидали. Так делайте с каждым следующим этапом на пути к освоению языка программирования. В один момент вы обнаружите, что обогнали тех, кто проходил все темы поверхностно и будете гораздо сильнее их в кодинге. Конечно, этот путь требует добротных временных затрат, но если вы хотите стать хорошим программистом, то на этапе обучения вы просто обязаны уделять базе этой дисциплины солидный объем времени.   Бояться спросить Фобия, актуальная не только в обучении программированию, но и в других сферах нашей жизни: в школе/лицее/гимназии/колледже, в вузе, на работе, да и вообще где угодно. Спрашивать можно и даже нужно. Однако, стоит учитывать несколько нюансов: 1) Вопрос не должен быть глупым. 2) Перед тем, как задать его, вы должны подумать над проблемой, поискать решения и попробовать самостоятельно прийти к развязке. Когда вы поймете, что действительно сделали все, что в ваших силах, но ничего не добились, можете смело обращаться за помощью, не забыв описать предпринятые вами шаги помощнику (-ам).      Сразу идти и писа́ть на форумы, предварительно не погуглив хорошенько (неумение искать информацию) Вторая сторона медали тезиса под номером 4. Навыки использования поисковой системы (обычно это Google) и таких сервисов, как Stack Overflow, habr и других является обязательными для любого, кто связан с IT сферой. Вы будете всегда сталкиваться с определенными трудностями и самый оптимальный подход к их решению — поиск ответов в интернете. Если вы новичок, то практически на любой возникнувший у вас вопрос, уже был ранее дан ответ на одном из ресурсов, и это важно всегда помнить. Бывают случаи, если человек задает откровенно глупый вопрос на каком-то из форумов, либо вопрос, на который уже много раз отвечали, то такого товарища начинают банить, отрезая возможность что-либо спрашивать на сервисе в принципе. Так что гуглите, гуглите и еще раз гуглите. Один из самых полезных навыков в IT-отрасли. Если никак не получается найти нужную информацию — смотрите пункт 4 этой статьи.      Рассчитывать ТОЛЬКО на курсы Также одна из распространенных ошибок среди желающих освоить IT-специальность. Изучение программирования и смежных технологий требует достаточно большого количества времени. Это значит, что занятия 3 раза в неделю по 2 часа — слишком мало для полноценного освоения специальности. Так что же получается, вас обманывают на курсах и просто выкачивают деньги? Вовсе нет. Такая ситуация абсолютно нормальная; более того, она даже необходима. Сфера информационных технологий очень динамична, в ней постоянно что-то меняется, что-то устаревает, что-то обновляется и предстает в совершенно новом виде. Разработчик должен всегда учиться, дабы соответствовать требованиям даже не сегодняшнего, а завтрашнего дня. Подход к обучению на курсах предусматривает большую самостоятельную работу, которая будет вашей неотъемлемой спутницей во время будущей профессиональной деятельности. Умение самостоятельно учиться и постоянно развиваться как специалист — обязательный атрибут разработчика в IT. Поэтому для освоения любого языка программирования или IT-специальности в целом недостаточно простого посещения курсов. Вы должны уделять много времени внеурочному обучению: выполнять все д/з и учебные проекты, самостоятельно практиковаться на задачках. Большое количество практики вне занятий даст вам максимальный экспириенс от курсов. Как результат, вы преуспеете в обучении и станете кандидатом на желаемую должность, и при этом будете иметь прочную базу знаний и умений.         Заниматься обучением нерегулярно Утверждение тесно связано с предыдущим пунктом. Только там мы делали акцент на курсы по программированию и IT-специальностям, а здесь речь пойдет о самостоятельном обучении. Чуть ли не самые главные камни преткновения всех айтишников-самоучек — слишком мало времени на обучение + нерегулярные занятия. Недостаток выделяемого на обучение времени выливается в его чрезмерную длительность и потерю мотивации. Вы вроде и учитесь, а результата как такового нет. Нерегулярность занятий также убивает мотивацию и искореняет приложенные до этого усилия. Из вашей головы “вытекают” уже имеющиеся знания, теряются обретенные умения.  Обязательно разработайте план своего обучения и всегда придерживайтесь его. Старайтесь не поддаваться лени; если надо — заставляйте себя. Это вполне нормально, что ваш мозг сопротивляется учебным процессам, ведь его задача — уберечь подконтрольный ему организм от лишних забот и телодвижений, оставаясь при этом в максимальном физическом и психическом комфорте. Но, как мы знаем, без труда не вытащишь и рыбки из пруда.   Излишний перфекционизм Перфекционизм опасен бездействием и лишними нервами. Вы хотите выполнить какую-то задачу идеально, но не знаете, как это сделать, поскольку не обладаете тем уровнем знаний и опыта, которые для этого требуются. В итоге вы просто ничего не делаете, растрачивая время впустую. Соответственно, и нервишки шалят — работа стоит, время идет, а ни результата нет, ни эйфория от выполненной задачи не наступает. Пока вы учитесь, старайтесь выполнять задания без оглядки на то, насколько это решение идеально. Для начала сделайте так, как знаете. В будущем, используя новые знания и навыки, вы сможете выработать более оптимальное решение.   Учить множество языков (бросаться со стороны в сторону) Часто бывает, что новички не сразу определяют “своё” IT-направление, в котором хотят развиваться. В таком случае некоторые начинающие предпринимают решение выучить и первое, и второе, и пятое, и десятое, а там уже будет видно. Так вот этой стратегией лучше не пользоваться, хотя в теории всё звучит более чем логично. Каждый язык программирования требует определенных временных затрат и активных умственных усилий. Поскольку программирование — это в подавляющем большинстве практика, с каждым новым языком вы будете все больше и больше забывать все, что выучили до этого, ведь вы не практикуетесь. Если у вас феноменальные умственные способности, позволяющие учить языки очень быстро и не забывать все выученное — вам это не страшно, однако, среднестатистический человек не потянет такую планку. Плюс каждый из нас хочет достигать своих целей как можно быстрее, а путь с длительным изучением различных языков программирования явно не то, на что вы рассчитываете. Вы постоянно что-то изучаете, пишите код, но с ростом знаний и навыков вы скоро почувствуете, что нуждаетесь в чем-то большем. Чтобы обучение программированию давало свои плоды, оно должно в какой-то момент начать применяться в реальных боевых задачах. Если на этом ответственном этапе вы примете решение бросить язык и переключится на изучение нового, ваши знания и умения касательно текущего языка начнут забываться. Как результат — время потрачено впустую (причем приличный объем времени), а поскольку изученное не было подкреплено реальным боевым проектом, мотивация будет также вас покидать. Вас попросту не хватит для того, чтобы сделать хороший охват всех популярных языков. Гуру программирования могут себе позволить изучение основных принципов нового языка программирования за пару недель, однако у него уже есть недюжинный опыт и знания. Вам, как начинающему разработчику, не стоит предпринимать подобные действия. Но как тогда выбрать свой путь в IT? Все достаточно просто. В сети интернет вы можете найти множество материалов касательно того, где можно реализовать себя в IT. Изучите все возможные сферы и выберите 1-2, которые вам больше всего понравились. Теперь можете поверхностно опробовать инструментарий каждой из них. Опять-таки, углубляться никуда не стоит — вам необходимо понять, все ли вас устраивает, нравится ли вам выбранный язык программирования и те задачи, которые вы будете на нем реализовывать. Когда сделаете окончательный выбор, можете приступать к изучению всех необходимых языков и технологий, оттачивать навыки написания кода и разрабатывать проекты для портфолио. Чтобы изучить предметную область вы можете, к примеру, воспользоваться записанными вебинарами образовательной платформы ITVDN. На момент написания статьи были выпущены следующие вебинары, касающиеся IT-профессий:   Как стать Андроид разработчиком? Как стать Python разработчиком? Как стать C# / .NET разработчиком? Как стать Java разработчиком? Как стать FrontEnd разработчиком?    и другие.     На нашем YouTube канале вы также можете найти множество полезного контента. Если вы хотите узнать о том, какое из популярных направлений в разработке выбрать, можете взглянуть на 3.5-часовой вебинар под названием “Как стать программистом? Frontend, Java, Python или .NET - что выбрать?”. Его автор — Дмитрий Охрименко — CEO CyberBionic Systematics, сертифицированный тренер Microsoft и автор курсов по .NET и FrontEnd разработке с опытом в разработке более 10-ти лет. Следите за нашим каналом и соцсетями, чтобы не пропустить новые вебинары и тренинги! Все полезные ссылки оставим в конце статьи.   Слишком глубоко копаться в языке/технологии vs поверхностное изучение Данный пункт также в определенной степени относится к предыдущему. Но что он подразумевает? Например, если вы решили учить какой-то популярный высокоуровневый язык программирования, не надо лезть к нему под капот. Безусловно, вы должны узнать, на чем держится выбранный язык, что лежит в основе его функционирования, но тщательно изучать его фундамент не надо. Вы не обязаны лезть в глубины, добираться до низкоуровневого Assembler, затем изучать работу процессора в принципе и т. д. Вам это не нужно. Если провести аналогию между программированием и вождением автомобиля, то программист — это водитель. Водитель должен знать, из чего состоит его транспортное средство, но знать всё до мельчайших подробностей нет нужды — это уже работа автомеханика. Задача водителя — управлять машиной, так же само, как задача программиста — писать код. Обратная сторона медали заключается в поверхностном изучении языка программирования и примыкающих к нему технологий. Поверхностное изучение хорошо, когда вы делаете выбор между несколькими языками и желаете узнать, какой вам больше по душе. Но когда вы определились с направлением и языком, прыжки по верхам — то, от чего вы должны отказаться. На данном этапе углубление и тщательное изучение технологий для вас очень важно. Однако, напомним, что уходить в самые низы выбранного языка и технологий тоже не следует.   Избегать общения с IT-специалистами Достаточно важный момент, которому, однако, уделяется мало внимания. Рассмотрим ситуацию с двух сторон: 1) Вы посещаете соответствующие курсы по программированию. 2) Вы самостоятельно обучаетесь. Первый случай. Вы изучаете программирование на курсах, но неактивны с преподавателем и вашими одногруппниками. Это неправильная ситуация. На занятиях всегда возникают вопросы, и их надо задавать. Стесняться ни в коем случае не надо. Один из важных навыков программиста — коммуникабельность; в данной ситуации вы и тренируете свою общительность, и получаете ответы на возникающие вопросы. Кстати, хороший преподаватель всегда рад вопросам от своих учеников. Как результат — ваше обучение более продуктивное, вы чувствуете хорошую отдачу и выносите из каждого занятия действительно ценную информацию, получая больше знаний. Второй случай. Вы учитесь самостоятельно, сами практикуетесь, но вам некому показать результаты своей работы. Никто не может оценить ваши труды. Это также не есть хорошо, ведь теряется обратная связь — вы банально не знаете, а грамотно ли составлена программа, правильно ли выполнена верстка веб-страницы и т. д. На этапе обучения было бы очень здорово иметь собственного ментора — наставника, который занимается профессиональной разработкой в том направлении, которое вас привлекает. Если порыскать в гугле, можно найти сообщества, занимающиеся организацией менторства, или на крайний случай можно просто пользоваться помощью пользователей специализированных форумов. Главное — не задавать глупых вопросов, хорошенько формулировать свои мысли/вопросы и не быть пассивным.   Бросать дело на полпути Популярная среди новичков, школьников и студентов практика из оперы “И так сойдет!”. На самом деле ничего подобного. Вы изучаете программирование для себя, для своего успешного будущего. В ваших же интересах стать хорошим востребованным разработчиком. А как этого достичь, если ваши проекты напоминают, скорее, огрызки, чем полноценную реализацию задуманного? Здесь могут быть 2 варианта: либо вы плохо понимаете какую-то тему и не уделили ей должного внимания (пробел в знаниях), либо у вас дурная привычка, которая мешает вам учиться, а в будущем будет мешать и вашей карьере. С этим нужно бороться и не пренебрегать такой, на самом деле, большой проблемой. В конце концов, в резюме добавлять такие проекты стыдно. Да и на работодателя такая визитная карточка будет действовать отрицательно. Будьте грамотны и всегда доводите свои работы до конца. Это полезный навык для любой сферы жизнедеятельности.           Не искать работу, когда ты уже к ней готов Проблема, возникающая на поздних этапах обучения, когда вы уже в целом готовы подавать резюме в компании, однако, вас сдерживает неуверенность в своих силах. Вашими спутниками становятся такие мысли, как: “А вот, может, это мне еще стоит подучить...”, “Тут надо еще подтянуть”, “Да мне еще проектов так N надо реализовать...”, “Я 100% потерплю неудачу на первом же собеседовании” и другие. Суть в том, что коммерческая разработка — это, фактически, новый этап вашего обучения. Этап, на котором вас ожидают настоящие нагрузки и задачи, ответственность за написанный код, командная работа, митинги с обсуждениями задач и многое другое. Если вы не перейдете на этот этап, то так и останетесь болтаться на предыдущем, теряя мотивацию, а вместе с ней и полученные навыки и знания. Не уверены в своих силах, но весь необходимый материал усвоили и умеете применять на практике? Рискните и подайте резюме, сходите на собеседование —  так вы по крайней мере сможете адекватно оценить свой уровень знаний и умений и уже будете отталкиваться от фактов, а не от собственных страхов и предубеждений. Как определить, что вы уже готовы искать работу? Открываете описание целевых вакансий, смо́трите на требования; если вы, условно, знаете 8 из 10 требуемых фреймворков, значит, полный вперед! “Знаете фреймворки” — это: а) Вы их использовали в каком-либо из своих проектов; б) Эти проекты работают, причем работают нормально.   Незнание английского Английский язык вам понадобится в любом случае — кто бы что ни говорил и как бы вы себя не убеждали в обратном. На этапе обучения вы будете использовать его во время поиска ответов и различных дополнительных сведений о выбранном языке программирования и/или смежных технологиях. Сюда входят как официальные специализированные источники, справочные материалы, книги, так и всевозможные форумы, статьи, заметки и отзывы других разработчиков/учащихся. Русскоязычные ресурсы сильно уступают по своему количеству и насыщенности иностранным, потому все дороги таки приведут вас к зарубежным.  Для успешного взаимодействия с подобными источниками ваш уровень инглиша должен быть не ниже Intermediate. На работе вам также нужен английский: для профессионального развития, подтягивания знаний, их обновления, для того же поиска решений возникающих проблем. Помимо этого, этот язык будет важен при работе на иностранных заказчиков и/или в том случае, когда работаете в команде с иностранцами. Здесь уже желательно обладать английским не ниже уровня Upper Intermediate.   Заключительное слово Надеемся, что данная статья стала ценной находкой для вас. Здесь мы постарались затронуть самые важные ошибки, которые допускают начинающие разработчики. Если вы их устраните, продуктивность вашего обучения гарантировано пойдет вверх и принесет нереальный профит. Старайтесь, прикладывайте усилия и у вас все обязательно получится! Здесь вы сможете отслеживать все самые главные вкусности от ITVDN: FB, VK, Linkedin, Twitter, Instagram, Telegram.   Желаем вам побед в обучении! Обогащайтесь новыми знаниями и скиллами на ITVDN!

Общие знания, которые нужны каждому Python разработчику Что должен знать Python Developer, работающий в сфере Data Science Python BackEnd Developer Python Developer в сфере DevOps Automation QA Engineer (Python) Desktop, Mobile, Game Python Developer Итоги   Добрый день, дорогие читатели блога ITVDN! Предлагаем вашему вниманию новую публикацию в рубрике “Что должен знать разработчик...”, в которой мы пишем о самых популярных IT-профессиях. Ранее уже были опубликованы обзоры по FrontEnd и .NET. В этот раз в центре внимания язык Python. В каких сферах он успешно применяется, а в каких буквально незаменим? Какими знаниями нужно обладать, чтобы стать, к примеру, Python BackEnd разработчиком? Все это вы узнаете в нашей статье. Приятного чтения! В последние годы язык программирования Python стремительно набирает популярность. По данным Stack Overflow Developer Survey 2019, в котором приняли участие более 87 тысяч IT специалистов из разных стран, Python в 2019 году опередил даже таких постоянных и несомненных лидеров как Java, С# и С++. Сейчас он широко используется в Data Science (машинное обучение, анализ данных, визуализация), разработке встроенного программного обеспечения и в реализации серверной части веб-приложений. Также при помощи Python можно создавать игры, десктопные и мобильные приложения, писать тесты для ПО, а также упрощать администрирование ОС. Как видите, сферы применения довольно обширны. Мы постараемся затронуть самые популярные, в которых Python используется в качестве основного средства программирования. Начнем с технологий, которые должен знать любой Python-разработчик вне зависимости от специализации.   Python Многие сходятся во мнении, что язык программирования Python  - один из самых легких для изучения, его часто рекомендуют в качестве первого языка начинающим программистам. В то же время это высокоуровневый язык программирования общего назначения, с большим потенциалом повышения производительности программиста, скорости разработки и читаемости кода. Каждый Python-девелопер должен владеть таким набором знаний: Синтаксис языка Python: типы данных, строки и символы, операции с целыми и вещественными числами, отступы, условные и циклические конструкции, функции, списки, словари, классы, файловый ввод-вывод, логические операции и операции сравнения. Популярные библиотеки и фреймворки. Этот пункт зависит от выбранного IT-направления. К примеру, если вы планируете себя реализовать в веб-разработке, отличным выбором станет библиотека Requests, которая облегчит процессы составления HTTP-запросов, также будут полезны фреймворки Django и Flask. Если же вас увлекает машинное обучение, то Theano, TensorFlow, Keras и другие библиотеки помогут с построением и тренировкой нейронных сетей. IDE и редактором кода. Проекты лучше создавать в интегрированной среде разработки (IDE) или в редакторе кода. Это позволяет сделать написание кода максимально удобным: подсветка синтаксиса, автодополнение, инструменты сборки, возможность отладки код и прочее. Самыми популярными платформами являются PyCharm, WingWare IDE, Komodo.   Открытым остается и вопрос, какую версию Python стоит изучать: 2.x либо 3.х? Согласно информации из официального источника разработчиков python.org, в 2020 году прекращается поддержка Python 2.7. Соответственно, стоит сконцентрировать усилия на изучении именно версии 3.х. Разработчик должен иметь глубокие знания языка Python, понимать и уметь применять на практике принципы объектно-ориентированного программирования (ООП).    Английский язык Знание английского языка - естественное требование для каждого разработчика в IT, поскольку большинство новых сведений о технологиях, курсы, учебные и справочные материалы появляются в первую очередь на английском. Для работы в команде разработчиков обычно знаний языка на уровне чтения технической документации и комментирования кода вполне достаточно, однако если вы планируете самостоятельно вести переговоры и переписку с иностранным заказчиком, ваш уровень должен быть выше.    Git & GitHub Git - наиболее популярная система контроля версий, которая позволяет вести историю разработки проекта с возможностью доступа к каждой сохраненной версии. Помимо этого, стоит уметь работать с сервисом онлайн-хостинга проектов, использующих систему контроля версий. В данном случае это GitHub. В тандеме с Git он позволяет разработчикам сохранять свой код онлайн, а затем взаимодействовать с другими разработчиками в разных проектах. Данные системы позволяют команде программистов работать над одним проектом одновременно, сохраняя внесенные изменения, а также отслеживать выполнение задач каждым членом группы.   Алгоритмы и структуры данных Понимание алгоритмов и структур данных является очень важным для любого программиста. Исключением могут быть разве что FrontEnd разработчики. Данные используются во всех сферах нашей жизни: от банковских счетов и медицинских карт вплоть до списка оплаченных покупок в супермаркете. Знание структур данных поможет вам хранить информацию в упорядоченном виде, что упростит работу с ней. Также это повысит общую производительность ваших программ. Знание алгоритмов позволит вам создавать сложные конструкции для эффективного решения широкого спектра задач.   Методологии разработки Agile/Scrum Методологии разработки - это своеобразные путеводители по процессам эффективной разработки ПО. Их применение помогает организовать максимально продуктивную работу всех участников, которые напрямую или косвенно задействованы в разработке продукта в соответствии с выбранной стратегией.  Agile - семейство гибких методологий разработки программного обеспечения, которое позволяет выпускать продукт небольшими частями, постоянно его дополняя и совершенствуя. При таком подходе технические и бизнес-подразделения работают совместно, ПО постоянно обновляется, обеспечивается быстрое принятие решений и выявление неправильных подходов, приложение проще обслуживать, а качество кода готового продукта более высокое. Agile имеет собственный манифест, который подробно описывает основные принципы, на которых строится гибкая разработка. Scrum является одной из реализаций agile-подхода. Его используют многие команды, поэтому знание особенностей работы со scrum-моделью для разработчика серверного ПО является востребованным и весьма полезным. Итак, мы рассмотрели технологии, которыми должны владеть все Python разработчики, не зависимо от прикладной области, в которой они работают. Теперь давайте рассмотрим наиболее популярные специализации, в которых может себя реализовать Python разработчик, а это: Data Scientist BackEnd Developer DevOps Engineer Automation QA Engineer (Python) Проанализируем каждое направление, затронув основные технологии. Также расскажем, каким образом Python используется в Desktop, Mobile и Game разработке.   Что должен знать Python Developer, работающий в сфере Data Science   Легкий и лаконичный Python нашел себе широкое применение в такой важной сфере разработки, как Data Science. Почему именно Python? Он прост в изучении и способен в несколько строк кода создать искусственный интеллект, который будет способен к самообучению, либо посчитать матрицу внушительных размеров. Data Science подразумевает работу с большими объемами данных и включает в себя сбор, анализ, структурирование и дальнейшую визуализацию информации. Каждый специалист данной области занимается: сбором большого количества неупорядоченных данных и преобразованием их в удобный формат; решением бизнес-задач с использованием данных; программированием на Python, R и других языках; работой со статистикой; использованием Machine Learning, Deep Learning и текстовой аналитике; сотрудничеством с IT и бизнесом в равной мере; изучением современных тенденций, которые могут помочь в разработке, которая ведется на данный момент в компании.    Итак, какими технологиями необходимо владеть, чтобы стать Data Scientist?   Линейная алгебра и математический анализ Data Science - это как раз та область, в которой без знаний математики ну никак. Работа с колоссальным объемом данных предусматривает в обязательном порядке применение аппарата линейной алгебры. А это матрицы, векторы, линейные уравнения, различные алгоритмы классификации и кластеризации, которые широко используются (подробнее в следующих разделах). Также необходимо знать оптимизацию средствами матанализа.   Статистика Наука, которая применяет совокупность методов и приемов по сбору, обработке, представлению и анализу числовых данных, чтобы впоследствии на их основании сделать те или иные выводы. Статистика содержит такие важные разделы, как: выборка, распределение частот, среднее значение, взвешенное среднее значение, медиана, вероятность, распределения вероятностей, тестирование значимости, а также ряд других тем и понятий. В интернете есть множество хороших англоязычных курсов, которые помогут освоить разделы статистики, которые обязательны для специалиста Data Science.   Библиотеки и дополнительные инструменты Python Для всевозможных математических вычислений используется Python, а точнее - его библиотеки. К примеру, Matplotlib и Seaborn используются при необходимости визуализации данных, NumPy для работы с уже упомянутой линейной алгеброй. Для научных вычислений прибегают к использованию SciPy. Pandas позволяет выполнять быстрый анализ, очистку и подготовку данных из разных источников - Excel, SQL, веб-страницы, файлы CSV. Таким образом, библиотеки Python предоставляют отличный набор для анализа данных и визуализации. Среди дополнительных инструментов особого внимания заслуживает Jupyter Notebook, который позволяет создавать очень наглядные и информативные аналитические отчеты путем совместного хранения кода, иллюстраций, комментариев, формул и графиков.    Базы данных Поскольку работа Data Scientist-а плотно связана с обработкой большого количества информации, очевидно, что без баз данных тут не обойтись. Необходимо знать, как извлекать и обрабатывать данные, уметь писать и выполнять сложные запросы. Существуют реляционные базы данных (так называемые, SQL базы данных) которые используют структурированный язык запросов, и нереляционные (NoSQL), которые предлагают динамическую структуру для определения и обработки данных. К системам управления баз данных (СУБД) первого типа относят MySQL, PostgreSQL, Microsoft SQL Server, Oracle. Ко второму типу - MongoDB, Cassandra, BigTable, Redis, RavenDB и прочие. Несмотря на широкое распространение NoSQL, специалисты Data Science все же используют SQL технологии, поскольку зачастую работают именно с упорядоченным множеством данных (медицинские карты пациентов, транзакции клиентов и т. д.). Здесь наилучшим выбором станет PostgreSQL/MySQL/SQL Server.   Машинное обучение Это ответвление искусственного интеллекта, основная идея которого состоит в следующем: компьютер должен не просто использовать заранее написанный алгоритм, а самостоятельно обучаться решению поставленной задачи (например, задачи определения символов по отсканированному изображению текста, опознавания лиц и голосов, подборки видеороликов на YouTube с учетом просмотренных ранее). Минимальный набор базовых алгоритмов машинного обучения, который необходимо знать: линейная регрессия, логистическая регрессия, SVM (метод опорных векторов), random forest (“случайный лес”), дерево принятия решений, Gradient Boosting, РСА (метод главных компонент), k-means (кластеризация методом k-средних), k-NN (классификация методом k-ближайших соседей), ARIMA (интегрированная модель авторегрессии скользящего среднего). Говоря о библиотеках Python, которые применяются в машинном обучении, отметим scikit-learn (работа с классическими алгоритмами машинного обучения), TensorFlow и Keras (работа с глубоким обучением, которое направленное на работу с нейронными сетями). Если подытожить вышеизложенное, вам необходимо знать основные алгоритмы кластеризации, классификации, уметь работать с нейронными сетями, умело использовать указанные библиотеки в ходе решения задач, а также понимать и применять на практике принципы машинного обучения. Затем можно будет переходить к подробному изучению глубокого обучения, искусственного интеллекта и разрабатывать проекты для портфолио.   Что должен знать Python BackEnd Developer   Веб-сервера (Nginx, Apache) BackEnd разработчику необходимо знать общие принципы работы веб-серверов, а также понимать, как в целом работает интернет и каким образом ваш код взаимодействует с серверами, базами данных и вообще с “внешним миром”.  Веб-сервер - это программное обеспечение либо аппаратное средство, которое работает с целью приема HTTP-запросов, их обработки и последующей выдачи НТТР-ответов. На данный момент их существует множество, однако наибольшее распространение получили Nginx и Apache. Этим двум веб-серверам посвящено несметное количество статей, которые рассматривают их плюсы и минусы и благодаря которым вы сможете определиться, какой из них лучше всего подходит под решение ваших задач. Но также отметим, что сами по себе Nginx и Apache способны не только конкурировать, а и эффективно взаимодействовать между собой при правильной конфигурации, создавая мощную, гибкую и высокофункциональную систему с возможностью горизонтального масштабирования.   Базы данных (MySQL, MongoDB) Серверная сторона программного обеспечения предусматривает активное использование серверов (от англ. “to serve” - служить). Это компьютеры, которые выполняют какую-либо сервисную задачу по приему, обработке и предоставлению информации пользователям. Для BackEnd разработчика знание серверов и умение работать с ними является настолько же важным, насколько для FrontEnd разработчика - знание триады HTML, CSS и JavaScript.  Работаете со структурированными данными, а среди ваших приоритетов надежность, окупаемость и совместимость со всеми основными ОС? Выбирайте MySQL. Если же вы ориентируетесь на скорость, гибкость, масштабируемость, удобство в управлении СУБД, либо вы просто не можете определить схему для своей БД, вам стоит сфокусироваться на изучении систем управления нереляционными базами данных. Хорошим выбором станет MongoDB благодаря своей распространенности.      Фреймворки Flask/Django Два данных фреймворка являются самыми популярными в веб-разработке на языке Python. Какому стоит отдать предпочтение? Flask подойдет тем, кто заинтересован в тонкостях настройки проекта, и кто хочет иметь полноту власти над всеми его компонентами. Также данный фреймворк лучше подходит для создания REST API. Минимализм, максимальный контроль составляющих приложения, свобода в управлении каждым элементом - это визитные карточки Flask. С другой стороны, если вы ищете набор готовых инструментов, стоит обратить внимание на Django. Он ориентирован больше на стек готовых решений и конечный продукт, нежели на подробную настройку всех компонентов проекта. Если вас интересует разработка и развертывание приложения в кратчайшие сроки, простота в его создании, масштабируемость, поддерживаемость и наличие очень хорошо структурированной и детальной документации по используемому фреймворку, смело выбирайте Django.   Паттерн MVC (Model-View-Controller) Паттерн MVC достаточно востребован в наше время. Данный шаблон предусматривает разделение приложения на три компонента: Модель, Представление, Контроллер, благодаря чему реализуется концепция разделения и закрепления ответственности за каждым компонентом, что упрощает разработку веб-проектов.    Вспомогательные технологии (Celery, RabbitMQ) Среди известных технологий, которые облегчают жизнь BackEnd разработчику можно отметить Celery. Это инструмент для управления очередями задач, который применяется для фоновой обработки долго выполняющихся задач, снижая нагрузку на процессор. Упомянем также и RabbitMQ - менеджер сообщений, который предназначен для передачи данных (так называемых сообщений) между сервисами и упрощающий работу со сложными ресурсоемкими задачами при помощи очередей.   Что должен знать Python Developer для работы в сфере DevOps   Python особо популярен у DevOps специалистов. DevOps - это методология, которая совмещает в себе разработку (Development) и системное администрирование (Operations) с целью увеличения частоты выпуска релизов. Данные специалисты также должны обладать навыками использования облачных технологий и автоматизации инфраструктуры. DevOps инженеры отдают свое предпочтение Python за его простоту, мощность, надежность, многозадачность, поддержку большого количества специальных пакетов, которые повышают эффективность данного языка программирования и за другие преимущества. Python используют, в основном, вместе с командной оболочкой Bash для упрощения процессов развертывания ПО и автоматизации различных задач системного администрирования (написание скриптов). Что еще должен уметь DevOps инженер, помимо написания скриптов? Понимать устройство ОС Linux/Windows. Знать, как работают компьютерные сети (сетевая модель передачи данных TCP/IP и эталонная модель OSI), понимать инфраструктуру сетей. Знать основные сетевые протоколы (HTTP, HTTPS, SSH, IP, TCP и другие). Работать с популярной облачной инфраструктурой AWS. Применять контейнеризацию (Docker), кластеризацию (Kubernetes), принципы CI/CD (Jenkins), инструменты мониторинга (Zabbix, Nagios), управлять ПО на удаленных серверах (Ansible). Работать с веб-серверами (например, Nginx и Apache), уметь их настраивать. Данный стек технологий вполне достаточный для уверенного старта в качестве DevOps инженера.   Что должен знать Automation QA Engineer (Python)   Python также имеет большую популярность в тестировании. Он применяется для написания скриптов, которые автоматизируют процессы проведения тестов. Помимо классических навыков и знаний тестирования необходимо владеть языком Python, разбираться в принципах ООП и также владеть тестовыми фреймворками (в данном случае - PyTest, Robot Framework, unittest и другие).     Desktop, Mobile, Game Python Developer   Менее популярные сферы использования Python. Для разработки настольных приложений можно использовать библиотеку Tkinter и фреймворк PyQt, который позволяет работать с графическим инструментарием, подобным тому, что использует Visual Studio для создания Windows Forms приложений. Игры на Python также можно создавать - PyGame библиотека в помощь. Однако они будут далеко не уровня ААА. При этом Python успешно используется в таких тяжеловесах гейм-индустрии, как World Of Tanks, Battlefield 2 и EVE Online для запуска скриптовых сцен, реализации пользовательского интерфейса, обработки событий. Если говорить о мобильных приложениях, то там Python применяется разве что для реализации серверной стороны приложения. К примеру, клиент Instagram для iOS написан на языке Objective-C, а сервер — на Python.   Итоги Мы рассказали вам об IT-специальностях, в которых Python пользуется наибольшим спросом. Благодаря своей универсальности, кроссплатформенности, простому синтаксису, читабельности и значительному количеству разнообразных библиотек и фреймворков этот язык программирования значительно облегчает работу программистов и тестировщиков, позволяя существенно сократить время написания кода. Сейчас Python просто незаменим в Data Science из-за своего богатейшего инструментария сбора, анализа, обработки и дальнейшей визуализации данных. DevOps инженеры в несколько строк кода могут с легкостью автоматизировать рутинные и/или масштабные процессы. BackEnd разработчики используют все возможности, которые им предоставляют веб-фреймворки для создания эффективных веб-приложений.    На ITVDN есть подборка видео курсов по языку программирования Python, а также по нескольким самым популярным технологиям, которые должен знать специалист. Комплексная программа обучения состоит из 12 курсов общей продолжительностью более 82 часов. Для формирования практических навыков написания кода мы рекомендуем использовать интерактивные тренажеры по Python. Если вам понравилась эта статья, поделитесь информацией с теми, кому она может быть интересна. Пишите в комментариях, на какие еще вопросы, связанные с выбором специальности и планированием обучения вы хотите получить ответы. Мы постараемся ответить на них в наших новых обзорах.   Смотрите также: Знакомство с Python Как стать Python разработчиком?

Основні технології. Фреймворки та допоміжні інструменти. Необов’язкові технології. Зарплати FrontEnd розробників. DOU. Djinni. Stack Overflow Developer Survey 2023. Чому так багато технологій? Поради новачкам FrontEnd. Підсумки.   FrontEnd – один із найлегших розробницьких напрямків в ІТ. Він вигідно вирізняється тим, що поєднує в собі програмування та творчість, оскільки девелопер працює над оживленням дизайнерського макету та створенням відповідної користувацької логіки. Також перевагою фронтенду є те, що побачити результат своєї роботи можна майже одразу – в будь-якому браузері. Відносна легкість фронтенду породжує велику популярність серед бажаючих потрапити в ІТ, а враховуючи наслідки відкритої агресії по відношенню до України – особливо велику популярність, адже це можливість працювати віддалено (на ІТ-компанію або на фрилансі) і отримувати гарну зарплату. Відповідно, конкуренція серед Trainee/Junior FrontEnd розробників шалена, а тому роботодавці вимушені закручувати гайки і підвищувати вимоги до кандидатів, аби відібрати найкращих.  Тож як стати фронтенд розробником? Якими технологіями необхідно володіти, аби стати Intern/Junior FrontEnd розробником у 2024 році? Проаналізувавши вакансії на українському ринку IT, ми склали список актуальних інструментів, які зазвичай вимагають роботодавці від кандидатів. Їхній перелік – нижче у статті. Frontend developer roadmap. Основні технології HTML5 & CSS3 HTML5 і CSS3 – це фундаментальні технології, без знання яких не обійтися жодному веброзробнику. За допомогою мови гіпертекстової розмітки HTML створюється розмітка (каркас) кожної вебсторінки. Потім мова стилів CSS збагачує візуальне оформлення сайту і надає йому привабливого та ефектного зовнішнього вигляду. Крім цього, необхідно володіти: кросбраузерним адаптивним верстанням, щоб вміти створювати сайти під мобільні пристрої, планшети і широкоформатні екрани та для різних браузерів; семантичним верстанням для підвищення якості розмітки та покращення пошукової індексації сайту; валідним верстанням, яке передбачає повну відповідність коду розробника всім стандартам W3C – організації, яка створює та впроваджує технологічні стандарти для World Wide Web. Приділіть особливу увагу верстанню під мобільні пристрої, тому що сучасний вебспоживач дуже багато часу проводить у смартфоні. Існує навіть спеціальний підхід, при якому спочатку верстається вебсайт під мобільні пристрої, а потім під десктопи – називається Mobile First. Це загальні вимоги щодо верстання. Тепер розглянемо більш детально вимоги безпосередньо щодо мови стилів – CSS. Тут ви повинні знати основні властивості CSS3: фони, градієнти, тіні, анімації, трансформації, переходи, а також технології Flex та Grid, про які ми ще поговоримо. Гарне володіння HTML та CSS вже дозволяє займатися верстанням сайтів та заробляти гроші. Саме з цих двох базових технологій починається шлях до професії FrontEnd розробника. Якісно вивчити HTML та CSS ви зможете за допомогою наступних наших курсів: HTML5 & CSS3 Стартовий; HTML5 & CSS3 Базовий; HTML5 & CSS3 Поглиблений. Flex та Grid CSS Технології верстання надійних адаптивних вебсторінок, які дозволяють легше створювати динамічні сайти та зручніше структурувати їх вміст. На нашому ресурсі є українськомовні відео курси, які гарно пояснюють теми Flex та Grid верстання: CSS Flexbox та Верстання на Grid. CSS-препроцесори CSS-препроцесор — це програма, яка має власний синтаксис, але може згенерувати з нього CSS-код. Найчастіше у вакансіях зустрічаються SASS, SCSS, Stylus, LESS. Препроцесори призначені для: прискорення процесу написання коду; спрощення читання коду та його подальшої підтримки; мінімізації рутинної роботи під час написання коду. Для підвищення ефективності написання CSS-коду достатнім буде вивчення лише одного препроцесора, але у вакансіях часто зустрічаються одразу декілька. Git & GitHub Git – найбільш популярна система контролю версій, яка дозволяє вести історію розроблення проєкту з можливістю доступу до кожної збереженої версії. Крім того, варто вміти працювати з сервісом онлайн-хостингу проєктів, який використовує систему контролю версій. У даному випадку це GitHub. У тандемі з Git він дозволяє розробникам зберігати свій код онлайн у хмарному сховищі, а потім взаємодіяти з іншими розробниками у різних проєктах. Дані системи дозволяють команді програмістів працювати над одним проєктом одночасно, зберігаючи внесені зміни, і навіть відслідковувати виконання завдань кожним членом групи. Git & GitHub — дуже важливі інструменти для будь-якого IT-розробника, вивченням яких слід зайнятися якомога раніше. Ми рекомендуємо вивчати Git на ITVDN за допомогою курсу «Основи роботи з Git». Знання про вебтехнології та мережу інтернет Щоб якісно виконувати свою роботу, фронтенд розробник повинен розбиратися у вебі і розуміти принципи його функціонування. Таким чином, необхідно знати: як працює інтернет; протоколи HTTP/HTTPS, вебсокети; як працюють браузери; що таке DNS та як він працює; що таке доменне ім'я; що таке хостинг. Також буде непогано, якщо ви спробуєте налаштувати сайт на якомусь безкоштовному хостингу, прив'яжете домен до цього хостингу. JavaScript Мова програмування, яка використовується як при розробленні клієнтської сторони веб-застосунку, так і серверної. За допомогою JavaScript (скорочено JS) можна писати навіть настільні та мобільні додатки, використовуючи певні програмні платформи та бібліотеки. Ця мова дозволяє: динамічно змінювати HTML-розмітку; здійснювати інтерактивну взаємодію з користувачем; анімувати зображення; здійснювати валідацію форм; керувати мультимедіа тощо. Іншими словами, JavaScript "оживлює" сторінку та додає їй функціональності. Гарне володіння цією мовою програмування є обов'язковим пунктом для кожного FrontEnd розробника. JavaScript використовує офіційний стандарт ECMAScript (скорочено - ES), який має на увазі певний формальний опис синтаксису, базових об'єктів та алгоритмів. На даний момент існує багато різних версій ES. Роботодавці найчастіше вимагають знання ES6+. Однак спочатку необхідно вивчити чистий JavaScript (vanilla JavaScript) і лише потім вникати в нові стандарти. Як не крути, а класику треба знати. Завдяки гарному володінню JS можна швидко розібратися в будь-якій версії ES, а потім опанувати будь-який фреймворк або бібліотеку. ITVDN надає можливість вивчити JavaScript з нуля до поглибленого рівня за допомогою курсів: JavaScript Стартовий; JavaScript Базовий. JavaScript Core (DOM, AJAX, JSON) DOM (Document Object Model) – об'єктне представлення вихідного HTML-документу. Ключовим є поняття DOM-дерева, яке описує структуру сторінки. За допомогою об'єктної моделі JavaScript отримує повну владу над HTML-документом: можливість редагувати, видаляти та додавати елементи і атрибути HTML, змінювати CSS-код тощо. AJAX (Asynchronous JavaScript And XML) – це синтез технологій JavaScript і XML, який фактично являє собою комбінацію: вбудованого в браузер XMLHttpRequest-об'єкту (щоб запитувати дані з вебсервера); JavaScript та HTML DOM (щоб відображати або використовувати дані). AJAX дозволяє вебсторінкам здійснювати асинхронне оновлення, обмінюючись даними з вебсервером. Завдяки цій технології сторінка не потребує перезавантаження – оновлюється лише конкретна її частина (згадайте стрічку новин у соціальних мережах). JSON (JavaScript Object Notation) – це загальний формат обміну даними. Дозволяє здійснювати обмін інформацією між програмними продуктами, котрі написані різними мовами. Таким чином, клієнт, який використовує JavaScript, може легко передавати дані на сервер, реалізований за допомогою Ruby/Java/PHP. Всі три технології мають особливу цінність для кожного веброзробника та розкривають організацію роботи інтернет-застосунку. REST API API – Application Programming Interface – це набір правил, при дотриманні яких програми можуть між собою взаємодіяти. Розробник створює API на сервері та дозволяє клієнтам звертатися до нього. Красномовним прикладом буде API від Google Maps, котрий дозволяє веброзробнику вказати на гугл мапі розташування певної будівлі (точку видачі інтернет-замовлень, офіс компанії абощо) на своєму сайті. Таким чином програміст позбавляє себе необхідності самому розробляти власну мапу і користується вже готовим рішенням від Google, використовуючи набір правил від API. REST – Representational State Transfer – це архітектурний підхід, котрий регламентує, як саме API мають виглядати. Цьому набору правил має слідувати девелопер під час створення власного застосунку. Простими словами, REST – це звичайний запит виду «клієнт-сервер» з використанням HTTP-протоколу. Фронтенд розробнику необхідно розбиратися у REST API, оскільки ця технологія використовується усюди, де є необхідність працювати з даними від сервера. Алгоритми та структури даних Розуміння алгоритмів та структур даних (ADS, від Algorithms and Data Structures) – обов'язок будь-якого грамотного програміста. До структур даних відносяться: стеки, черги, зв'язані списки, графи тощо. Вивчивши їх, ви зможете керувати складністю своїх програм, роблячи їх більш доступними для розуміння, а також розробляти високопродуктивні програми, які ефективно працюватимуть з пам'яттю. Знання алгоритмів дозволить вам створювати складні конструкції для ефективного розв'язання широкого спектра завдань. Коли говорять про алгоритми, зазвичай мають на увазі алгоритми сортування та пошуку: сортування прямим включенням, прямим вибором, злиттям, пірамідальне, прямий пошук, бінарний, індексно-послідовний та інші. Важливо розумітися і на нотації Big O, яка описує складність кожного алгоритму. Даний механізм допомагає визначити, за яких умов вигідніше використовувати той чи інший алгоритм. Зазначимо, що як новачкові, вам не треба пірнати вглиб цих тем. Буде достатньо: теоретичного володіння ADS; розуміння, де яку структуру даних слід використати; уміння оцінити складність алгоритму (Time Complexity та Space Complexity); уміння написати декілька алгоритмів (найпопулярніші алгоритми сортування та пошуку). Володіння ADS допоможе вам створювати більш якісний та оптимізований код. Крім того, це посилить ваші позиції серед інших кандидатів. Webpack Потужний збирач модулів (bundler), який дозволяє скомпілювати в один файл кілька різних компонентів: від .js та .css файлів до картинок, шрифтів тощо. Використовується для роботи над об'ємними проєктами і досить часто зустрічається у вакансіях. Воно і не дивно – це найпопулярніший збирач, як-не-як. npm Node Package Manager – пакетний менеджер, який є найбільшим у світі реєстром програмного забезпечення (відповідно до витягу з офіційного сайту). Використовує платформу Node.js і дозволяє розробникам з усього світу користуватися вже готовими програмними рішеннями та поширювати власні на основі Node.js. npm використовують для керування залежностями, себто для встановлення, оновлення та видалення тих пакетів (бібліотек та інструментів), які використовуються у вашому проєкті. Незамінна річ для FrontEnd розробників, якою ви обов’язково користуватиметеся. Основи Figma Figma – це популярний дизайнерський інструмент для створення інтерактивних прототипів застосунків або веб-сайтів. З його допомогою дизайнер створює дизайн, який фронтенд-розробник потім верстає за допомогою HTML/CSS і додає інтерактивність при участі JavaScript. Знання основ фігми дозволяє девелоперу зручно взаємодіяти з дизайнерським прототипом: швидко дізнаватися необхідні розміри тих чи інших елементів, робити експорт картинок та іконок тощо. Додатковий плюс – можливість використання браузерної версії Figma. Англійська мова План навчання Front-end повинен обов'язково включати підтягування English. Знання англійської є однією з основних вимог до фронтенд-розробника, оскільки велика кількість корисної інформації знаходиться саме на англомовних сайтах. Рівень читання технічної документації буде достатньо для комфортного користування іноземними ресурсами (Intermediate). Однак чим вищий рівень вашої англійської, тим більші шанси отримати job-офер. Інгліш використовується не тільки при роботі з документацією, а і при комунікації з командою та клієнтами. Серед програмістів побутує вислів: «Яку мову слід вчити першою? Вчи англійську!». Тому не пошкодуйте ваш час і гарненько підтягніть англійську – цілком можливо, що саме гарне володіння нею стане вирішальним при розгляді вашої кандидатури. Підтягнути English ви можете завдяки наступним безкоштовним відео курсам на ютуб-каналі CodeUA: Business English – ви опануєте базову ділову лексику для активної участі у перемовинах англійською, а також ведення ключової документації цією мовою. IT English – акцент на прокачці ділової лексики, граматики, усталених конструкцій та виразів з ІТ-сфери. Фреймворки та допоміжні інструменти Основні фреймворки JavaScript Це інструменти, за допомогою яких створюються динамічні веб/мобільні/десктопні застосунки мовою JavaScript. Вони прискорюють розроблення вебзастосунків та передбачають чітко структуровану організацію коду, підвищуючи його якість та чистоту. Найпопулярнішими high-level інструментами для фронтенд розроблення можна назвати фреймворки Vue.js, Angular та бібліотеку React. Кожен із них призначений для вирішення свого спектру завдань і має різний ступінь складності: Vue.js – найлегший (але й з найменшою спільнотою), React – середньої складності, Angular – високої складності. Варто сконцентруватися на глибокому вивченні одного фреймворку, але в той же час дуже рекомендується знати особливості та сферу застосування всіх перерахованих вище технологій. Який фреймворк все ж обрати? Думки щодо цього розходяться. Інструментарій вибирається індивідуально під проєкт та важко передбачити, які задачі вам потрібно буде вирішувати. На даний момент найбільшою популярністю користується React, оскільки вона збалансована як з точки зору складності, так і з точки зору багатства функціоналу. До того ж найбільша кількість вакансій припадає саме на цю бібліотеку, а значить, що вона цікава не тільки розробникам, а й бізнесу. Кожен із цих трьох інструментів доступний для вивчення на платформі ITVDN. Українськомовні курси за напрямком Angular: Angular Базовий. Тестування Angular-застосунків. За напрямком React: React Базовий. За напрямком Vue.js: Vue.js Стартовий. Допоміжні фреймворки JavaScript Наряду з традиційною трійкою – Vue.js, React та Angular – у вакансіях часто зустрічаються інші фреймворки, створені на їхній базі, наприклад Next.js та Nuxt. Next.js базується на популярному React і дозволяє збільшити ефективність та масштабувати процес створення реакт-застосунків. Він додає шар абстракції над реактом, а одними з найголовніших його нововведень є рендеринг на серверній стороні та генерація статичних вебсайтів. Дуже багато React-вакансій для джунів мають серед вимог та побажань Next.js – якщо ви орієнтуєтеся на реакт, рекомендуємо ознайомитися з даним фреймворком. Nuxt – високорівневий фреймворк на базі Vue.js для масштабованого та інтуїтивно зрозумілого створення FullStack-вебзастосунків та вебсайтів. Зустрічається не часто у вимогах, але його вивчення може вигідно підсвітити вашу кандидатуру. Angular Material Технологія, на яку слід звернути увагу тим, хто планує розвиватися в напрямку Angular. Це бібліотека UI компонентів, яка дає доступ до готових візуальних рішень задля пришвидшення процесу верстання на Ангулярі. Бібліотека сповідує принципи Material Design, запроваджені компанією Google у 2014 році, які передбачають привабливий та інтуїтивно зрозумілий UI дизайн, котрий однаково гарно виглядатиме на різних пристроях. Необов’язкова для вивчення бібліотека, але часто зустрічається у вакансіях – її знання допоможе вам як мінімум виділитися серед інших Angular-кандидатів. TypeScript Кросплатформна строготипізована мова, яка є розширенням JavaScript. Строга типізація дозволяє зменшити кількість потенційних помилок у вихідному коді, написаному на TypeScript. Також ця мова реалізує концепції, які близькі до об'єктно-орієнтованих мов, таких як C#, Java та подібних. TypeScript підвищує швидкість та зручність написання комплексних програм, внаслідок чого їх стає легше підтримувати, масштабувати та тестувати. Відповідно до зарплатної аналітики від DOU (зима 2024), TypeScript обігнав JavaScript за популярністю і посідає перше місце серед українських розробників в категорії “Основна мова програмування”. У вакансіях ця мова зустрічається досить часто незалежно від цільового фреймворку. При цьому для Angular розробників знання TypeScript є обов'язковим. Радимо вивчити дану мову, а зробити це ви можете за допомогою нашого українськомовного курсу “TypeScript”. Інструменти керування станом програми (State Management) Великі вебзастосунки постійно зростають у складності, а тому зберігати дані, які можуть використовуватися в різних місцях, стає все складніше. Для вирішення цієї проблеми були вигадані окремі бібліотеки, що йдуть паралельно з фреймворками — вони служать для управління глобальним сховищем даних усього веб-застосунку і називаються менеджерами станів. Їх застосування вже стало стандартом у FrontEnd розробленні. Для девелоперів, які використовують Vue.js, це VueX, для React-розробників – Redux і MobX, для Angular-девів – RxJS, NgRx. Необов’язкові технології (але дуже корисні)   Патерни проєктування JavaScript Це найкращі практики, які описують типові способи вирішення поширених завдань, що виникають під час проєктування програмного забезпечення. Знання шаблонів проєктування дозволяє писати більш чистий, зрозумілий і читабельний код, а також уникати "винайдення велосипеда". Більше того, володіння патернами показує вашу грамотність як розробника і підвищує вашу цінність в очах роботодавця, що допоможе виділитися на тлі конкурентів. CSS-фреймворки Інколи у вакансіях для FrontEnd-початківців можна зустріти вимоги до володіння CSS-фреймворками. Найпопулярнішими є Bootstrap і Tailwind. Вони допомагають суттєво прискорити створення верстання за рахунок низки вбудованих можливостей. Bootstrap – результат старань команди з Twitter, який вийшов у світ в далекому 2011. Є повністю безкоштовним, має відкритий вихідний код і дозволяє створювати гнучкі, адаптивні вебінтерфейси під різні пристрої, використовуючи вже готові шаблони кнопок, форм, таблиць тощо. Tailwind більш сучасний та трендовий – 2017 року випуску, і при цьому відомий своїм високим ступенем кастомізації (на відміну від Bootstrap). Він не дає набору готових шаблонів (доступно тільки в платному Tailwind UI), проте дозволяє швидко створювати власні рішення за рахунок особливого синтаксису. В будь-якому випадку, рекомендуємо спробувати обидва інструменти, аби відчути їхню потужність, переваги та недоліки. GraphQL GraphQL є моделлю даних, яка часто використовується для побудови API для застосунку. Головна перевага перед REST API – наявність лише однієї точки входу, що дозволяє більш динамічно та гнучко визначати взаємодію з даними. Також GraphQL має такий синтаксис, який дозволяє працювати з будь-якою мовою програмування як на клієнті, так і на сервері – лишається тільки підключити необхідну бібліотеку до вашого проєкту для інтеграції GraphQL. На момент написання статті кожна шоста вакансія на Djinni у розділі “JavaScript / FrontEnd” з досвідом від 0 до 1 року мала серед обов’язкових або бажаних технологій GraphQL. jQuery Невелика, швидка та багатофункціональна JavaScript-бібліотека, для роботи з якою необхідно володіти HTML, CSS та JavaScript на базовому рівні. Вона покликана спростити програмування мовою JS. Дана бібліотека представляє об'ємні рішення поширених завдань у вигляді методів, що викликаються одним рядком коду. Незважаючи на те, що jQuery вже давно покинула зеніт популярності, поступаючись місцем фреймворкам JS, велика кількість сайтів все ще використовує цю бібліотеку, а деякі роботодавці вказують її серед вимог для Junior, особливо для джунів-верстальників. Лінтери Інструменти, які дозволяють аналізувати якість JavaScript-коду відповідно до стандарту ES. Вони вбудовуються в середовище розроблення і вказують на наявність невідповідностей стандарту коду, якщо такі є. Даний механізм корисний як для одноосібного розроблення (для самоконтролю), так і для командного, коли кожен розробник повинен слідувати тим самим мовним конструкціям, аби на виході отримати єдиний, цілісний проєкт. Один із найвідоміших лінтерів – ESLint. Це необов’язковий інструмент для роботодавця, але він дуже корисний для веброзробників у силу його можливостей з контролю якості коду. Тестування Jest та Cypress – головні інструменти модульного тестування, яке покладається на плечі розробника. Але що це таке? Unit тестування (воно ж – модульне тестування) – процес, який полягає у створенні тестів для перевірки працездатності окремих ділянок написаного програмістом коду. Виконується безпосередньо автором коду. Яку користь приносить Unit тестування: суттєве скорочення багів у коді; спрощення рефакторингу коду; забезпечення якісного відокремлення інтерфейсу від реалізації; краще розуміння написаного коду; можливість протестувати найдрібніші ділянки коду. Усі інструменти вчити не треба — достатньо навчитися працювати лише з одним із них. Gulp / Grunt Системи збирання, які автоматизують рутинні завдання розробників: мініфікацію коду, оптимізацію зображень, тестування, аналіз якості коду та інше. Підходять для розроблення невеликих проєктів. SVG Мова розмітки масштабованої векторної графіки. Зображення на сторінці, зроблені за допомогою SVG, коректно відображаються на екранах з різною роздільною здатністю, не втрачаючи при цьому своєї якості, на відміну від традиційних растрових .jpeg, .png та інших. SOLID принципи SOLID – це принципи, які є своєрідним ременем безпеки для тих, хто працює відповідно до парадигм об'єктно-орієнтованого програмування. Вони були створені з метою убезпечити ООП-орієнтованого розробника від незрозумілого, заплутаного спагеті-коду, який також ще й дуже важко підтримувати. SOLID – це акронім, який складається з п'яти букв, що кодують п'ять основних принципів: S - Single Responsibility Principle (принцип єдиної відповідальності) O - Open-Closed Principle (принцип відкритості-закритості) L - Liskov Substitution Principle (принцип підстановки Барбари Лісков) I - Interface Segregation Principle (принцип розділення інтерфейсу) D - Dependency Inversion Principle (принцип інверсії залежностей) Володіння цими принципами дозволяє грамотно проєктувати та розробляти такі програмні системи, які з великою ймовірністю зможуть тривалий час розвиватися, розширюватися та підтримуватися. Хоча SOLID принципи написані переважно для ООП, їхні ідеї цілком застосовні і до сучасного JavaScript розроблення, що допоможе фронтенд розробникам створювати більш чистий та лаконічний код. Зарплати FrontEnd розробників DOU Звернемося до вже згаданої зарплатної аналітики від української IT-спільноти DOU за зиму 2024 року. Медіанна зарплата всіх українських розробників, які взяли участь в опитуванні (а їх 5959), наступна: Intern Software Engineer – 350 USD; Junior Software Engineer – 950 USD; Middle Software Engineer – 2500 USD; Senior Software Engineer – 4738 USD. Тепер поглянемо на медіанну ЗП FrontEnd розробників: Junior – 900 USD; Middle – 2400 USD; Senior – 4600 USD. На всіх позиціях зменшення винагороди у порівнянні з аналітикою півроку тому. Виходить, медіана фронтендників майже на всіх тайтлах трохи менша, ніж загальна медіана, проте розрив досить невеликий. Djinni Тепер перейдемо до зарплатної аналітики українського сервісу Djinni і оберемо розділ “JavaScript / FrontEnd” та розглянемо попит за останні 6 місяців. Маємо 17818 кандидатів, зарплатні очікування яких становлять від 600 USD до 3000 USD при зарплатних вилках вакансій 2000-3300 USD. На 1 вакансію в середньому припадає 114.4 відгуки, а кількість пропозицій на кандидата – 0.2. Stack Overflow Developer Survey 2023 Погляньмо, скільки заробляє цей фахівець за межами України. У цьому нам допоможуть результати опитування Stack Overflow Developer Survey 2023 (понад 90 000 респондентів із США, Індії, Німеччини, Канади, Великої Британії та інших країн). Ця цифра – 59 970 USD на рік (приблизно 5000 USD на місяць). При цьому буде важливо сказати, що фронтендники з даного опитування мають у середньому 8 років професійного кодингу – і це один із найнижчих показників. Нижче за них розташовуються лише Data Scientist / ML Specialist – 7.9 років досвіду, а також студенти, які мають трохи більше 2.8 років досвіду у професійному створенні коду. Чому так багато технологій? Поради новачкам FrontEnd Український ринок FrontEnd дуже сильно перегрітий кандидатами. Роботодавці, звісно, користуються цією ситуацією: виставляють більше вимог до кандидатів і паралельно знижують рівень ЗП. Таким чином вони хочуть відфільтрувати слабких кандидатів і отримати якомога скіловішого фахівця за якомога нижчою ціною, оскільки в Junior-девелопера треба вкласти значну кількість часу та грошей, доки він вийде на таку продуктивність, яка приносить хоч якісь прибутки.  Наша стаття враховує ці нюанси, а тому ми відобразили максимальну кількість технологій, які ви з великою ймовірністю зустрінете у більшості вакансій. Не всі інструменти потрібно знати та вчити, але чим багатший ваш інструментарій, тим більші шанси на працевлаштування. Декілька порад для початківців, які вирішили підкорити FrontEnd: Робіть пет-проєкти і публікуйте їх на GitHub. Створюйте застосунки, які вирішуватимуть ваші повсякденні задачі, і намагайтеся застосувати в них якомога більше вивчених вами технологій. Це дозволяє підтвердити ваші знання на практиці та демонструє потенційному працедавцеві ваші навички кодингу. Використовуйте ШІ. Штучний інтелект буде корисний в низці задач: прискорення розроблення; генерування ідей для пет-проєктів; пояснення складних тем; асистенція при написанні коду тощо. Розвивайте власний бренд. Чим більша ваша популярність в ІТ-спільноті, тим більші шанси запрошення на співбесіду. Для цього найкраще підходить LinkedIn – соціальна мережа для встановлення робочих контактів, але також можна підключити Instagram, YouTube тощо. Публікуйте пости з корисною інформацією, діліться вашими досягненнями, дієвими порадами та особистими враженнями щодо вивчення FrontEnd, і т. д. За вами стануть спостерігати багато ІТ-фахівців, які можуть самі завітати до вас із пропозицією роботи або порекомендувати вас комусь. Не нехтуйте вивченням англійської мови. English є супер важливим в умовах перегрітого ринку джунів – треба обов’язково мати B1. Якщо є декілька сильних кандидатів, які приблизно однакові за soft & hard скілами, роботодавець обере того, хто краще знає англійську. Також згадана аналітика DOU доводить – чим краще знаєш англійську, тим на більшу ЗП можеш претендувати. Менторинг. Максимально вдале рішення – знайти собі ментора. Він буде наглядати за вашим навчанням та прогресом, підкидати задачі/проєкти, давати корисні поради, відповідати на питання тощо. А наприкінці вашого навчання навіть може запропонувати вільне місце в компанії або ж порекомендувати знайомим айтівцям. Відточуйте навички програмування у Codewars або LeetCode. Це спеціальні сервіси для програмування, де ви обираєте собі задачу (є різні рівні складності) та виконуєте її, розвиваючи навички кодингу необхідними мовами. Дуже зручно і корисно, враховуючи, що на співбесіді можуть бути схожі live-coding завдання, а також, що LeetCode використовують девелопери, які готуються до інтерв'ю в топових ІТ-компаніях (Facebook, Google, Amazon тощо). Також на ITVDN є спеціальний інтерактивний практикум, де ви можете “набити руку”. Колаборація з розробниками-початківцями. Долучайтеся до команд однодумців, де ви працюватимете спільно над проєктом, аби отримати навички роботи в команді. Звісно, це не дорівнює комерційному досвіду, який прагнуть побачити у вас роботодавці, але дозволяє попрацювати в умовах, що максимально наближені до реальних. Відвідуйте тематичні ІТ-події в офлайн форматі. Там ви зможете поспілкуватися з іншими девелоперами, показати себе і розширити свою мережу корисних знайомств. Контактувати з ІТ-фахівцями на таких івентах обов’язково! Інакше ви просто дарма витратите час та гроші. Пройдіть пробне інтерв’ю за донат. Ви можете місяцями не отримувати запрошення на співбесіду, через що страждатиме ваша мотивація та впевненість. Аби не падати духом і дати собі об’єктивну оцінку, домовтеся про інтерв’ю з якимось FrontEnd спеціалістом, який проведе вам технічну співбесіду за донат і надасть свої поради щодо подальшого кар’єрного шляху – наразі це популярна тема. Пробне інтерв’ю з рекрутером. Можливо, проблема відсутності запрошень криється у вашому CV або погано оформленому LinkedIn-акаунті? Із цим допоможе розібратися рекрутер або кар’єрний консультант, який надасть свої послуги за гроші або відповідний донат на збройні сили. Стосовно двох останніх пунктів – на ITVDN всі студенти, котрі навчаються у форматі онлайн занять із тренером у групі (Live Online), безкоштовно отримують персональну допомогу щодо подальшого працевлаштування, а саме: індивідуальну консультацію задля визначення персональних цілей; допомогу в складанні CV (резюме) та Cover Letter (супровідного листа); допомогу з оформленням LinkedIn-акаунту; проведення тестового інтерв’ю з розгорнутим фідбеком; формування стратегії пошуку роботи; надання додаткових корисних матеріалів. Підсумки FrontEnd розробник – досить універсальний боєць у світі веброзроблення. Він повинен вміти і верстати, і створювати логіку роботи клієнтської частини, і розуміти роботу серверної частини вебзастосунку. Для опанування такого великого інструментарію варто запастися часом, терпінням та завзятістю. Зазначені у статті засоби розроблення сайтів також мають аналоги, оскільки для вирішення різних завдань підходять різні вебінструменти. Однак ми вибрали найпопулярніші та найефективніші з них. Якщо у вас є бажання опановувати цю професію і ви хочете самостійно “помацати”, чим займається фронтенд розробник, на ITVDN створено комплексну програму навчання у форматі відео навчання, яка включає 51 відео курс. Якщо ж вам більше до вподоби живе онлайн навчання з тренером та у групі з іншими учнями, пропонуємо формат Live Online для вивчення спеціальності FrontEnd (Angular або React напрямки). Бажаємо вам успіхів у досягненні ваших цілей! Залишайтеся з ITVDN!

Дорогие друзья! Предлагаем вашему вниманию перевод статьи, опубликованной на DOU.ua 21 декабря 2020 года. Оригинальная версия на украинском языке доступна по ссылке. На этот раз предлагаем ознакомиться с актуальными вопросами, которые задают на технических интервью по JavaScript. Естественно, мы говорим о широком спектре специализаций, поэтому выбирайте свое направление и готовьтесь.   Junior Общие: 1. Какие методы HTTP-запросов вы знаете? 2. Какие версии HTTP-протокола вам известны? 3. Какие знаете коды ответа (состояния) HTTP? 4. Что такое Cross-Origin Resource Sharing? Как устранить проблемы с CORS? 5. Что такое cookie? 6. Какой максимальный размер cookie? 7. Что означает директива use strict? 8. Чем JS отличается при работе на front-end и back-end? 9. Что такое статическая и динамическая типизации? 10. Как клиент взаимодействует с сервером? 11. Что такое REST? 12. Объяснить понятие мутабельность/иммутабельность? Какие типы являются мутабельными и наоборот? 13. Как искать ошибки в коде? Используете ли вы дебаггер? 14. Каких известных людей из мира JS знаете?   JS Core 15. Какие существуют типы данных в JS? 16. Как проверить, является ли объект массивом? 17. Как проверить, является ли число конечным? 18. Как проверить, что переменная равна NaN? 19. Чем отличается поведение isNaN() и Number.isNaN()? 20. Сравните ключевые слова var, let, const. 21. Что такое область видимости? 22. Что такое деструктуризация? 23. Для чего предназначены методы setTimeout и setInterval? 24. Сравните подходы работы с асинхронным кодом: сallbacks vs promises vs async / await. 25. Можно ли записывать новые свойства / функции в прототипы стандартных классов (Array, Object и т. д.)? Почему нет? В каких случаях это делать можно? Как обезопасить себя, если нужно расширить прототип? 26. Назовите методы массивов, какие помните, и скажите, для чего они нужны. 27. Какие методы перебора массива знаете? В чем их отличие? 28. Как работают операторы присваивания / сравнения / строчные / арифметические / битовые и т. д.? 29. Опишите назначение и принципы работы с коллекциями Map и Set. 30. Что означает глубокая (deep) и поверхностная (shallow) копия объекта? Как сделать каждую из них? Ответы на некоторые из этих вопросов вы можете найти в видео курсе JavaScript Стартовый (урок 3, урок 5, урок 10), JavaScript Базовый (урок 3, урок 13, урок 19), ECMAScript 6 (урок 6).   Функции: 31. Какая разница между декларацией функции (function declaration) и функциональным выражением (function expression)? 32. Что такое анонимная функция? 33. Расскажите о стрелочных функциях (arrow function). В чем заключаются отличия стрелочных функций от обычных? 34. Что такое и для чего используют IIFE (Immediately Invoked Function Expression)? 35. Что такое hoisting, как он работает для переменных и функций? 36. Что такое замыкание (closure) и какие сценарии его использования? 37. Как вы понимаете замыкания? Что будет выведено в консоли в этом случае? var f = function() {   console.log(1); } var execute = function(f) {   setTimeout(f, 1000); } execute(f); // что выведет в консоль и почему f = function() {   console.log(2); } 38. Что такое рекурсия? 39. Что означает ключевое слово this? 40. Что такое потеря контекста, когда происходит и как ее предотвратить? 41. Методы функций bind / call / apply - зачем и в чем разница? Ответы на некоторые из этих вопросов вы можете найти в видео курсе JavaScript Стартовый (урок 11, урок 12) и JavaScript Базовый (урок 13, урок 14).   Front-end 42. Что такое DOM? 43. Сравните атрибуты подключения скрипта async и defer в HTML-документе. 44. Какая разница между свойствами HTML-элементов innerHTML и innerText? 45. Опишите процесс всплытия (bubbling) событий в DOM. 46. Как остановить всплытие (bubbling) события? 47. Как остановить дефолтную обработку события? 48. Чему равен this в обработчике событий (event handler)? 49. Что такое LocalStorage и SessionStorage? Какой максимальный размер LocalStorage? 50. Как получить высоту блока? Его положение относительно границ документа? 51. Что такое webpack? 52. Чем отличается dev-сборник от prod? Ответы на некоторые из этих вопросов вы можете найти в видео курсе JavaScript Базовый (урок 1, урок 6, урок 7, урок 8, урок 17) и ECMAScript 6 (урок 1).   Верстка 53. Что такое блочная модель CSS? 54. Какие способы центрирования блочного контента по горизонтали и вертикали знаете? 55. Какие подходы в верстке вам известны (float, flex, grid, etc.)? 56. Как сделать приложение responsive? 57. Какие есть принципы семантической верстки? 58. Зачем нужны префиксы для некоторых CSS-свойств (-webkit-, -moz- и т. д.)? 59. Как упростить написание кросс-браузерных стилей? 60. Практические задачи: прокомментировать и исправить пример плохого CSS или HTML. 61. Что такое CSS-препроцессоры? С какими работали? Что нового они приносят в стандартный CSS? Ответы на некоторые из этих вопросов вы можете найти в видео курсе HTML5 & CSS3 Стартовый (урок 5, урок 6), HTML5 & CSS3 Углубленный (урок 4). Курсы Верстка сайта на CSS Grid и Верстка сайта на FlexBox CSS дадут комплексные знания и практические навыки применения технологий FlexBox и Grid.   Angular 62. Перечислите основные компоненты фреймворка (модуль, роут, директива и т .п.). 63. В чем разница между компонентом и директивой? 64. Расскажите о жизненном цикле компонента. 65. Перечислите часто используемые хуки жизненного цикла компонента и расскажите, для чего они нужны? 66. В чем разница между конструктором и ngOnInit-хуком? 67. Как защитить роут от несанкционированного доступа? Какие механизмы предоставляет для этого фреймворк? 68. Что такое Lazy loading, как и для чего используется? 69. Какое назначение RouterOutlet? 70. Как компоненты могут взаимодействовать друг с другом? 71. Как создать two-way binding свойство для компонента? 72. Какие типы форм у фреймворка? В каких случаях и что лучше использовать? 73. Какие состояния у формы и как это можно применить? 74. Зачем нужны сервисы? Как с ними работать? 75. Что такое singleton-сервисы? Каково их назначение? Способ создания? 76. Какие есть способы объявления сервисов? 77. Для чего нужны модули? Сколько их должно быть в проекте? 78. Зачем нужны общие модули (shared)? 79. Какие преимущества типизации в TypeScript? 80. Какие возможности TypeScript можно использовать для типизации (здесь имеются в виду интерфейсы, типы, enum и т. д.)? 81. Какая разница между интерфейсом и классом? 82. В чем разница между интерфейсом и абстрактным классом? 83. Какая разница между интерфейсом и типом? 84. Что такое RxJS? Как он используется во фреймворке? Какие компоненты фреймворка тесно связаны с ним? 85. Чем отличаются Observable и Promise? 86. Для чего нужны Subjects? Какие типы Subjects существуют? 87. Как сделать несколько последовательных запросов к API с помощью HTTP-сервиса и RxJS? 88. Какая разница между switchMap, concatMap, mergeMap? 89. Как можно конфигурировать Angular-приложение? 90. Зачем нужны environment-файлы? Когда их лучше не использовать? 91. В чем разница между «умным» (smart) и «глупым» (dumb) компонентами? В каких случаях применяется каждый из них? 92. В чем разница между NgForm, FormGroup и FormControl и как их применяют для построения форм? 93. Зачем нужен и как работает async pipe? 94. Как следить за развитием фреймворка? Каких известных людей, связанных с Angular, знаете / читаете? Ответы на некоторые из этих вопросов вы можете найти в видео курсах Angular Базовый и Angular Углублённый.   React 95. Работали ли вы с классовыми компонентами? В чем их особенность? 96. Какие данные лучше хранить в состоянии компонента, а какие передавать через пропсы? Приведите пример. 97. Ознакомлены ли вы с хуками? В чем их преимущества? Приходилось ли делать свои и с какой целью? 98. Знакомы ли вы с фрагментами и порталами? Зачем они нужны? 99. Когда и для чего используют рефы? 100. Какие вы знаете методы жизненного цикла компонента? 101. В каком методе жизненного цикла компонента лучше делать запросы на сервер? Почему? 102. В каком методе жизненного цикла компонента лучше делать подписку и отписку от листенера? Почему? Зачем отписываться? 103. Был ли опыт работы с контекстом? Когда его стоит использовать? 104. В чем особенность PureComponent? 105. Работали ли вы с мемоизоваными селекторами (memoized selectors)? Для чего их используют и какой принцип работы? 106. В чем видите преимущества библиотеки React? 107. Почему библиотека React быстрая? Что такое Virtual DOM и Shadow DOM? 108. Зачем в списках ключи? Можно ли делать ключами индексы элементов массива? Когда это оправдано? 109. В чем основная идея Redux? 110. Работа со стилями в React. 111. React - это библиотека или фреймворк? Какая разница между этими двумя понятиями. 112. Можно ли использовать jQuery вместе с React? Почему да / нет? 113. Что такое codemod? 114. Приходилось ли вам настраивать проект React с нуля? С помощью каких инструментов вы это делали? 115. Перечислите все библиотеки, которые использовали в связке с React. 116. Что самое сложное вам приходилось реализовывать с помощью React? Ответы на некоторые из этих вопросов вы можете найти в видео курсах React Базовый и React Углублённый.   Back-end 117. Что такое REPL? 118. Что такое streams в Node.js? 119. Что такое middleware? 120. Для чего используют функцию setImmediate? 121. Зачем нужен app.param() в express? 122. Что такое token based authentication?   Базы данных 123. Напишите простой запрос для вычисления трех авторов, у которых больше всего книг. 124. Напишите запрос, который выбирает последние три комментарии для конкретного пользователя для двух таблиц: комментарии и пользователи. 125. Спроектируйте простую схему базы данных для библиотеки. 126. Для чего используют SQL-оператор HAVING? 127. Зачем используют SQL-оператор LEFT JOIN? 128. Чем отличается embed- от reference-связи в MongoDB? 129. В одном проекте программисты сохраняют данные в MongoDB-коллекции комментариев, используя такие типы данных (смотрите ниже). Что плохого в этом решении? id: ObjectID text: string author_id: string created_at: Date 130. В проекте понадобилось внести изменения в структуру таблиц, добавить несколько полей и индексы. Как программисты будут делать это на продакшене? Ответы на некоторые из этих вопросов вы можете найти в видео курсе SQL Базовый.   Инструменты 131. Каждый раз, когда вы делаете pull, почему-то случается конфликт в последней строке во всех файлах, которые вы редактировали. Что происходит? 132. Что делает команда git fetch? 133. Какой git hygiene подходы вы знаете? 134. Что такое CI / CD? Для чего это нужно?   Практические задания 135. Расскажите, какие есть способы копирования простого объекта типа obj = {a 1, b 2, c 3} 136. Напишите deep clone для объекта. 137. Назовите различные способы, как поменять местами значения двух переменных. 138. Менеджер попросил в задаче поменять статусы из «active, inactive» на «active, removed», но в коде фигурируют только цифры и непонятно, какой статус соответствует какой цифре. Как помочь будущим программистам не лезть в документацию по коду? Вопрос ставят на конкретном примере с кодом. 139. Необходимо сделать мини проект - список пользователей с формой создания / редактирования пользователя: Для хранения пользователей используйте Firebase (это бесплатно). Для стилизации используйте Bootstrap. Минимальный набор полей пользователя: имя; фамилия; электронная почта; телефон (в формате +380 (XX) XXX-XX-XX) дата рождения; будет плюсом - добавление аватара и возможность crop-картинки. Пользователи должны иметь возможность фильтрации и пагинацию. Проект должен содержать README-файл с шагами для запуска.   Middle Общие 1. Расскажите о пирамиде тестирования. 2. Какие типы автоматизированных тестов выпадала возможность писать? Какие библиотеки при этом использовали? Каким инструментам отдаете предпочтение и почему? 3. Что такое unit-тесты? Какое место в пирамиде тестирования занимают unit-тесты? 4. Что такое code coverage? Обязательно 100% покрытие тестами кода? 5. Как запретить браузеру отдавать кэш на HTTP-запрос? 6. Что такое XSS (Cross-Site Scripting)? 7. Расскажите о паттернах Observer, Pub / Sub. Какая между ними разница? Приведите примеры реализации этих паттернов в известных фреймворках / библиотеках / браузерных API. 8. С какой целью может быть использован event listener события fetch self.addEventListener ( 'fetch', event => {})? 9. Что такое Event loop и как он работает? Расскажите о микрозадачах и макрозадачах.   JS Core 10. Какие типы данных бывают в JavaScript? Какой будет результат выполнения кода? let firstObj = { name: 'Hello' }; let secondObj = firstObj; firstObj = { name: 'Bye' }; console.log(secondObj.name); 11. Что такое temporal dead zone? 12. Как работает boxing / unboxing в JavaScript? 13. В чем разница между оператором in и методом hasOwnProperty? 14. Опишите, с помощью чего в JS реализуются такие ООП-парадигмы, как инкапсуляция, полиморфизм, абстракция? 15. Что такое прототип? Как работает прототипное наследование в JS? Объясните работу кода. function Main () {} Main.prototype = { protected: true }; const obj = new Main(); Main.prototype = { protected: false }; console.log('Object protection: ', obj.protected); 16. Какая разница между композицией и наследованием? 17. Почему не стоит использовать конструкторы типа new String? 18. Расскажите о базовом устройстве и механизме работы Event loop. 19. Что такое записи (records) и кортежи (tuples)? Чем они отличаются от обычных объектов? 20. Какие различия в поведении ES5 функции-конструктора и ES2015 класса? 21. Как реализовать паттерн «Модуль»? 22. Почему typeof null возвращает object? 23. Что такое приведение (преобразование) типов в JS? 24. Что такое явное и неявное приведение (преобразование) типов данных в JS? Как происходит преобразование типов в следующих примерах: {}+[]+{}+[1] !!"false" == !!"true" ['x'] == 'x' 25. Что такое Garbage Collector? 26. Опишите основные принципы работы «сборщика мусора» в JS-движках (engines). 27. Опишите назначение и принципы работы с коллекциями WeakMap и WeakSet? Чем они отличаются от коллекций Map и Set соответственно? 28. Чем отличается Observable от Promise? 29. Что такое Promise? Назовите порядок выполнения then и catch в цепочке. Promise.resolve(10)   .then(e => console.log(e)) // ??   .then(e => Promise.resolve(e))   .then(console.log) // ??   .then(e => {     if (!e) {       throw 'Error caught';     }   })   .catch(e => {     console.log(e); // ??     return new Error('New error');   })   .then(e => {     console.log(e.message); // ??   })   .catch(e => {     console.log(e.message); // ??   }); 30. Расскажите о последовательном и параллельном выполнении асинхронных функций. В чем разница между Promise.all() и Promise.allSettled()? 31. Что такое дескрипторы свойств объектов? Расскажите об их практическом применение. 32. Назовите несколько способов создания постоянного (неизменного) объекта в JavaScript. 33. Как создать свойство у объекта, которое нельзя будет изменить? 34. Зачем нужен конструктор Proxy? Приведите пример использования. 35. Что такое ArrayBuffer? В чем разница между Uint32Array и Float32Array? Каков результат выполнения кода? const uint32Array = new Uint32Array(); Array.isArray(uint32Array); 36. Каким будет результат сравнения? const url = “HTTPs://xyz.com/path<to>page.html”; encodeURI(url) == encodeURIComponent(url); 37. Расскажите о генераторах и итераторах. 38. Объясните, что делает приведенный ниже код: function * fn(num) {   for (let i = 0; i < num; i += 1) {     yield console.log(i);   } } const loop = fn(5); loop.next(); loop.next(); 39. Расскажите о типе данных Symbol и его практическом применении. Как перевести число с 10-разрядной системы в 16 (2,8) разрядную систему счисления? Ответы на некоторые из этих вопросов вы можете найти в видео курсе JavaScript Стартовый (урок 3, урок 4, урок 13, урок 14) и JavaScript Базовый (урок 18, урок 19),  ECMAScript 6 (урок 6).   Функции 40. Объясните, что означает currying. Приведите пример использования на практике. 41. Приведите пример функции с мемоизацией. Когда следует применять эту технику? 42. Что такое чейнинг функций? Напишите пример с использованием этого подхода. 43. В чем разница между function и arrow function? Каким будет результат выполнения кода? const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj) const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res) const unfold = (f, seed) => {   const go = (f, seed, acc) => {     const res = f(seed)     return res ? go(f, res[1], acc.concat([res[0]])) : acc   }   return go(f, seed, []) }   Front-end 44. В чем принципиальная разница между событиями mouseleave и mouseout? 45. В каком порядке обрабатываются пользовательские события в DOM (click, mouseover и т .д.)? FIFO или LIFO? 46. Что такое Event bubbling и Event capturing? 47. Сравните методы объекта event stopPropagation и stopImmediateProparation. 48. Какие есть подходы оптимизации производительности веб-страницы? 49. Как реализован механизм same-origin policy в браузере? На какие браузерные API он распространяется? 50. Назовите способы хранения данных в браузере. Сравните их. 51. Web worker`ы. Опишите особенности передачи данных между worker`амы и основным потоком, между разделенными worker`амы. 51. Что такое Transferable-объекты? 52. Расскажите о способах оптимизации выполнения ресурсоемких операций JS для улучшения производительности рендеринга контента на странице. 53. Почему ResizeObserver вызывает события изменения размера до воспроизведения элемента, а не после? 54. Расскажите, как вы понимаете Web Accessibility? 55. Опишите алгоритм создания функционала, который обеспечивает чтение содержимого .txt файла при перетаскивании его из файловой системы в окно браузера. 56. Что такое Virtual DOM? Ответы на некоторые из этих вопросов вы можете найти в видео курсе HTML5 & CSS3 Углубленный (урок 3), JavaScript Базовый (урок 1, урок 2, урок 3).   Верстка 57. Объясните разницу между единицами измерения px, em, rem. 58. Для чего нужны CSS-переменные? Приведите несколько примеров использования. 59. Что произойдет при добавлении следующего селектора? * {Box-sizing: border-box; } 60. Как адаптировать страницу для печати? 61. Опишите особенности кастомизации стилей стандартных элементов форм. 62. Что такое progressive рендеринг? Какие подходы используются? 63. Назовите несколько способов реализации lazy-loading медиаресурсов на странице. 64. Назовите популярные шаблонизаторы для фронтенд-разработки. Опишите особенности их использования. 65. Назовите популярные CSS-методологии и их различия. 66. Как работает CSS Grid? 67. Какие форматы изображений поддерживают анимацию? 68. Как отследить прогресс / окончание CSS @keyframes анимаций или плавных переходов, реализованных с помощью transition, в JS? 69. Какие CSS-свойства могут быть обработаны непосредственно через GPU? Что такое композитные слои и почему большое их количество может привести к аварийному завершению работы браузера на мобильных устройствах? 70. Как переиспользовать Инлайн SVG-элементы на странице? 71. Опишите способы оптимизации SVG-файлов. 72. Как реализовать иконочный шрифт из определенного набора SVG-файлов? 73. Что такое ложное жирное или ложное курсивное (Faux) начертание шрифтов? 74. Что такое #shadow-root в инспекторе HTML-страницы? 75. Зачем нужны Custom Elements? 76. Почему удаление лишних символов пробелов / символов переноса в HTML не отражается на конечной производительности загрузки страницы? 77. Что такое контекст отображения canvas? Какие существуют типы контекста для рендеринга двумерной и трехмерной графики? Ответы на некоторые из этих вопросов вы можете найти в видео курсе HTML5 & CSS3 Углубленный.   Angular 78. Как работает Dependency injection? Зачем это нужно? Расскажите об использовании кастомных инжекторов. 79. Что такое zone.js? Для чего Angular использует зоны? С какой целью можно использовать NgZone-сервис? 80. Как работает Change detection? Как можно оптимизировать компонент с помощью схем Change detection? Какие еще есть приемы для оптимизации рендеринга (связанные с Change detection)? 81. Как выполнить конфигурацию HTTP-сервиса? Зачем она нужна? Обработка HTTP-ошибок? 82. Какие есть подходы к организации работы с данными? 83. Как подготовить сборник к деплою? 84. Что такое NgRx? Когда стоит использовать? 85. В каких случаях лучше использовать Renderer-сервис вместо нативных методов? И наоборот? 86. Как работают и для чего нужны резолверы? Как получить данные, загруженные резолверами? 87. Как работают и зачем нужны динамические компоненты? Приведите примеры их целесообразного использования. 88. Какая разница между @ViewChild и @ContentChild? 89. Что делает код и как иначе можно связать класс компонента с переменной? @HostBinding ( 'class.valid') isValid; 90. Как можно кэшировать данные, используя сервисы или RxJS? 91. Что такое асинхронная валидация форм? Когда применяется и как реализуется? 92. Зачем нужна forRoot-функция модуля? 93. Какая разница между декларированием и экспортом компонента из модуля? 94. Почему плохо «провайдить» сервис с shared-модуля в lazy-loaded модуль? (Вопрос о scope модулей.) 95. Что такое :: ng-deep и для чего используется? 96. Какие тесты можно запустить для Angular-программы? Какие инструменты используют для тестирования Angular-программы? 97. Как протестировать API-сервис? Ответы на некоторые из этих вопросов вы можете найти в видео курсах Angular Базовый и Angular Углублённый.   React 98. Что такое JSX? Что лежит в его основе? 99. Как работает алгоритм Virtual DOM? 100. Для чего нужно свойство key во время рендеринга списков? 101. В чем разница между функциональными и классовыми компонентами? 102. Зачем и когда нужно передавать props в super() при использовании классовых компонентов? 103. Почему нужно использовать setState() для обновления внутреннего состояния компонента? 104. В чем заключается принцип «подъема состояния»? 105. Какие библиотеки менеджмента состояния React-приложения вы знаете? Зачем они нужны? 106. Когда следует использовать Redux? Какие есть альтернативы? 107. Redux vs Mobx? 108. Расскажите о базовом принципе работы React Hooks. 109. В чем разница между createRef и useRef? 110. Когда следует использовать React refs? Когда не стоит? 111. Какие недостатки библиотеки React видите? 112. Какие паттерны используете вместе с React? 113. Как относитесь к типизации вместе с React? 114. Как построить хорошую архитектуру React-проекта? 115. Оптимизация React-приложений? Как измерить производительность программы? 116. Можно ли приложение на React встроить в другое приложение на React? Ответы на некоторые из этих вопросов вы можете найти в видео курсах React Базовый и React Углублённый.   Back-end 117. Почему Node.js однопоточный, а не многопоточный? 118. Что такое event driven development? 119. Сравните fork() и spawn() методы. 120. Расскажите о Node.js фреймворках, которые использовали. Какая между ними разница? 121. Опишите словам код ендпоинта, который должен сохранить с клиента файл размером 4 гигабайта и положить его на S3 или другой CDN. 122. Что такое микросервисы, зачем их используют? 123. В каких случаях вы бы выбрали монолит, а в каких - микросервисы? 124. Как понять, что приложение в определенный момент работает исправно? 125. Как понять, что приложение за последние три дня работал исправно? 126. Как происходит проверка правильности пароля при использовании bcrypt? 127. Что такое JWT? 128. Джуниор прислал код на ревью. Что здесь не так? Как исправить? router.post ( '/ users', async (req, res, next) => {   const user = await db.createUser (req);   if (user) {     return res.json (users);   }   res.json ({error: "can not create user"}) })   Базы данных 129. Что такое Redis и для чего его используют? 130. Какие базы данных использовали? Какая разница между SQL и NoSQL? 131. Для двух таблиц - комментарии и пользователи - напишите запрос, который выбирает последние три комментария для каждого пользователя. 132. Я как заказчик прошу выбрать вас базу данных для нового проекта. Ваши действия?   Инструменты и другое 133. Для чего нужен package-lock.json? 134. В чем разница между npm install и npm ci? 135. Для чего нужны бандлеры? 136. Расскажите о модульном подключении скриптов. Приведите пример использования загрузчиков / бандлеров модулей. 137. Чем различаются git merge и git rebase? 138. Что такое staging area в git? 139. Опишите процесс code review. Назовите основные правила, способы разрешения конфликтов и споров во время его проведения.   Практические задания 140. Напишите функцию Sleep (ms), которая останавливает выполнение async-функции на заданный промежуток времени. 141. Реализуйте один из методов массива (например, splice). 142. Напишите функцию с RegExp для нахождения всех HTML-ссылок в строке. 143. Реализуйте функцию, которая исполнит callback для всех элементов определенной ветви DOM-дерева. 144. Реализуйте таблицу с виртуальным скролом. 145. Реализуйте функцию преобразования URL query строки в JSON.   const inData = "user.name.firstname=Bob&user.name.lastname=Smith&user.favoritecolor=Light%20Blue"; function queryObjectify(arg) { // ?? } queryObjectify(inData) /* Результатом виконання для вхідного рядка, повинен бути наступний об’єкт {   'user': {     'name': {       'firstname': 'Bob',       'lastname': 'Smith'     },     'favoritecolor': 'Light Blue'   } }; */ 146. Реализуйте функцию нахождения пересечения двух массивов. const first = [1, 2, 3, 4]; const second = [3, 4, 5, 6]; function intersection (a, b) { // ?? } intersection(first, second) // -> [3, 4] 147. Реализуйте функцию / класс для генерации HTML. const HTMLConstruct = {}; HTMLConstruct.span('foo'); // -> <span>foo</span> HTMLConstruct.div.span('bar'); // -> <div><span>bar</span></div> HTMLConstruct.div.p( HTMLConstruct.span('bar'), HTMLConstruct.div.span('baz') ); // -> <div><p><span>bar</span><span>baz</span></p></div> 148. Если есть проект с ограниченными сроками и некритичной производительностью, чем будете руководствоваться при выборе библиотек, подходов? Или все же будете обращать внимание на производительность? Или наоборот: сроки нелимитированные, производительность важна. Ваши действия?   Senior Общие 1. Расскажите о функциональном программировании. 2. Что такое TDD (Test Driven Development) / BDD (Behaver Driven Development)? 3. Расскажите подробно о работе HTTPS. 4. Какой стек технологий можно выбрать для реализации клона какого-нибудь известного проекту и почему? 5. Имеется проект на старых технологиях, необходимо в него вносить изменения. Как это сделать лучше всего? 6. Если у кандидата есть опыт работы с несколькими фреймворками: какой будете использовать для следующего проекта? Какие факторы будут влиять на выбор? 7. Что такое V8 Engine?   JS Core 8. Реализация паттерна Class Free OOP (HTTPs://observablehq.com/@bratter/class-free-oop). 9. Патерн async disposer (HTTPs://advancedweb.hu/what-is-the-async-disposer-pattern-in-javascript). 10. использование регулярных выражений. Когда приемлемо / неприемлемо? Как они работают? Как можно сделать читабельный код?   Front-end 11. Как браузер определяет, можем ли мы общаться между вкладками? 12. Что такое Content Security Policy? 13. Как избежать загрузки кэшированных файлов скриптов и стилей? 14. Что такое requestAnimationFrame? 15. Расскажите о микросервисной архитектуре Front-end App. 16. Что такое Shadow DOM? 17. Сравните nextElementSibling и nextSibling. 18. Какие знаете метрики веб-сайта?   Angular 19. Как проводится конфигурация NgZone-модуля? Когда это необходимо? 20. Что раздражает в фреймворке? Что бы вы изменили? 21. Если бы вы решали, что добавить в следующем релизе фреймворка, какая фича это была бы? 22. Писали ли вы кастомные декораторы? Если да, то зачем? 23. Сделать ревью кода и дать замечания по архитектуре. 24. Расскажите, как бы вы делали такие фичи. Опишите архитектуру фичи в приложении.   Back-end 25. Сравните Common.js с AMD Modules и ES6 Imports. 26. Какой фреймворк выбрали бы для бэкенда, почему? 27. Опишите своими словами, как работает OAuth v2. 28. Есть проект с источниками памяти, как их обнаружить, устранить и предотвратить это в будущем? 29. Есть проект с performance issues, как их обнаружить, устранить и предотвратить в будущем?   Базы данных 30. Какие альтернативные виды баз данных используете? 31. Что такое RDS и почему он иногда не подходит? 32. Что такое SQL Injections и как их избежать? 33. Почему для запросов в БД надо использовать плейсхолдеры? 34. Как спроектировать кластер на MongoDB? 35. Для чего используют MongoDB Aggregation framework? 36. Расскажите о GraphQL.   Инструменты 37. Можете ли вы описать суть методологии git flow в двух словах? 38. Что означает требование делать squash commits во время rebase? 39. Каково ваше мнение об альтернативных системы контроля версий (Version Control System)? 40. Какие конвенции знаете и используете для git? 41. Расскажите о своем опыте использования / внедрения CI / CD. 42. Необходимо настроить деплой проекту на несколько сред. Расскажите, как бы вы построили процесс? Какие инструменты использовали бы?   Практические задания 43. Реализуйте асинхронный метод filter для Array (должны работать await). 44. Реализуйте функцию reduce при помощи рекурсии. 45. Как можно было бы сделать toggle-компонент, как в iPhone, без использования JS?   Благодарим за помощь в подготовке статьи Вячеславу Колдовскому, Ивану Рыженку, Николаю Галкину, Александру Бурмистрову, Владу Балабашу, Андрею Шумаде, Ивану Кувацкому, Андрею Кладочному.