Чи може фронтенд-розробник зробити просто сайт?

Натрапив на просторах тредсу на допис, у якому авторка дещо висміює свою обізнаність про ІТ фразою "…спитала у front-end developer: «А в тебе є хтось, хто сайти робить?🤦‍♀️»". І подумав — так це доволі собі нормальне питання. От я не зможу.

Ну як «не зможу». Ручками лендос зверстаю. Чи там для себе якийсь статичний блоґ на якомусь реактоподібному фреймворку. А от так шоб «під ключ», на вордпресі, щоб клієнт не смикав мене за кожну зміну в тексті — тверде й рішуче ні.

Сфера веброзробки уже давно переросла просто сайти. Ба більше, те, що ми можемо щось відкрити в бравзері, зовсім не значить, що це щось — саме сайт. Це може бути цілком собі повноцінний застосунок з офлайн режимом і так далі.

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

Але при цьому і «старі» напрямки нікуди не діваються. І, повірте мені на слово, їхня частка не збирається падати. Усілякі реакти, анґуляри, вʼю — це, звичайно, чудово й цікаво, але вони часто не є рішенням проблеми. А іноді вони є її причиною. Тому досі процвітають і джумли, і вордпреси, і жиквері не збирається йти зі сцени. Бо існують величезні галузі, потреби яких чудово закриваються цими інструментами.

І я особисто в цих інструментах — дуб дерево хвойне. Мої глибокі (але далеко не повні) знання вебплатформи дозволяють мені бути хорошим, а іноді навіть компетентним розробником у своїй галузі — складних вебзастосунках, вебінтерфейсах і так далі.

Щодо цього у мене постійно крутяться недоречні аналогії, але давайте спробую навести хоч одну. Уявімо собі галузь, припустимо, кораблебудування. Ніби ж просто — човен є човен, його задача — плисти. Але от один проєктувальник спеціалізується на вантажних кораблях, а інший — на вітрильниках. І от питання — чи зможуть вони виконати роботу один одного?

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

Тобто ззовні ж воно як: тут ніби шо то, шо то — корабель, у нас ніби шо то, шо то — сайт. Але якщо копнути бодай трошечки глибше, на світ божий вилізе стільки нюансів, що доведеться знову назад закопувати те кубло.

Спеціалізація — це добре. Але, як я завжди кажу — лише на рівні галузі. Спеціалізацію на рівні React vs Vue я вважаю смішною і безглуздою (це так, шоб ви не забували, з яким душнілою маєте справу).

Тому так, «А в тебе є хтось, хто сайти робить?» — це абсолютно правильне і слушне питання до веброзробника.

@babichdev

#анонс
Співбесіда на сцені — Frontend Tech Lead

Хотіли побачити, як відбувається технічне інтервʼю такого рівня зі сторони? Цікаво, чи питають техлідів що таке івентлуп? Про що взагалі розмовляють на таких співбесідах?

28 лютого у Львові відбудеться запис нового випуску співбесіди на сцені, цього разу — з Frontend Tech Lead. Співбесіда обіцяє бути насиченою, цікавою і місцями несподіваною. Всіх карт не розкриватиму, але кандидат вас здивує ще до початку )

Партнером події є OBRIO — IT-компанія, що будує Nebula — продукт №1 в ніші spiritual wellness. Це продукт №1 у своїй ніші, який росте щороку х2 і вже завоював довіру 70+ мільйонів користувачів.

https://secure.wayforpay.com/payment/fe_tech_lead_interview

🗺️ Львів, вул. Ів. Франка 3, Львівський Університет Крафтового Пива ім. Св. Христофора.

⏰ 28 лютого, 12:00

***
Ексклюзивно для вас, товариство, відкриваю перші 10 квиточків за спеціальною ціною — 150 грн. Наступні 15 штук будуть вже по 170. А далі — хто зна ).

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

Тож не вагайтеся, розбирайте квитки і зустрінемось за тиждень з хвостиком )

#dom_in_action
DOM Node у вакуумі.

DOM API дозволяє нам створювати вузли, що не приєднані до документа. І поки ми їх туди не вставимо, вони просто висять у памʼяті та не впливають на рендеринг сторінки.

Тому будь-який вузол може перебувати фактично у двох станах — приєднаний до живого DOM та, очевидно, відʼєднаний. І так, ми можемо саме відʼєднати елемент, не знищуючи його.

Для цього навіть існують спеціальні методи: removeChild(childNode) аби прибрати з дерева дочірній вузол, та node.remove() для самоусунення. Що важливо — вузол при цьому залишається в памʼяті.

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

Є й інший бік медалі. Уявімо, що у вас є елемент і два скрипти. Один, до прикладу, змінює властивості його батька, додає й прибирає дочірні елементи. А другий, припустимо, тримає постійне посилання саме на цей вузол і читає розмір та розташування елемента на сторінці.

І от якщо перший скрипт для оптимізації вилучає елемент з DOM для операцій, а другий у цей час намагається прочитати його геометрію, то результат буде дещо передбачуваним. Скрипт не впаде — він має посилання на вузол, тож усе буде чудово. Просто розміри й розташування будуть часто нульові — наприклад, у getBoundingClientRect(). Халепа?

Може й так, але запобігти їй можна за допомогою однієї-однісінької властивості будь-якого DOM-вузла — Node.isConnected. Цей ґеттер повідомляє нам, чи вузол зараз знаходиться в живому DOM, а чи теліпається в памʼяті.

І, що особливо зручно, isConnected працює й для вкладених вузлів. Тобто це не заміна !!Element.parentElement, повноцінний сигнал — піддерево, у якому знаходиться вузол, зараз не вDOMа. І додавши перевірку на те, чи елемент приєднаний до DOM, ми можемо знати, чи варто в цей момент здійснювати обчислення.

Ось тут невеличка стіна консольлогів, яка демонструє, як працює isConnected:

console.group('1. Create element in memory:');
const element = document.createElement('section');
console.log(`element.parentNode: ${!!element.parentNode}`);
console.log(`element.isConnected: ${element.isConnected}`);
console.groupEnd();

console.group('2. Add child:');
element.innerHTML = '<div><p>Hello</p></div>';
const p = element.querySelector('p');
console.log(`p.parentNode: ${!!p.parentNode}`);
console.log(`p.isConnected: ${p.isConnected}`);
console.groupEnd();

console.group('3. Append element to live DOM:');
document.body.appendChild(element);
console.log(`p.isConnected: ${p.isConnected}`);
console.groupEnd();

console.group('4. Remove p:');
p.remove();
console.log(`element.isConnected: ${element.isConnected}`);
console.log(`p.isConnected: ${p.isConnected}`);
console.groupEnd();

Ставте 🔥, якщо дізналися про isConnected лише сьогодні, і ❤️, якщо знали про це давно.

@babichdev

P.S. І заберіть уже ті кілька квитків на запис нової Співбесіди на сцені.

float
Побутує думка, що CSS float — це щось дуже застаріле, а його використання вважається ледь не богохульством. Ну бо для лейауту ж маємо і flex, і grid. І частково з цим можна погодитись — для лейауту це дійсно моветон.

Але й в епоху свого розквіту цей підхід теж був не best practice, а банальним костилем через відсутність притомних інструментів.

Справжнє ж призначення float просте як дрова — відтворювати типографський принцип "обтікання" зображення текстом. І все.

Принцип дії також не складний — float-елемент приклеюється до лівого або правого краю контейнера, а будь-який наступний вміст бравзер намагатиметься відобразити поруч із ним. На "новий рядок" наступний вміст перенесеться з однієї з трьох причин: текстовий вміст досягне нижньої межі float-елементу, блочний елемент не вміщатиметься в доступну ширину, або ж якийсь із наступних елементів матиме відповідний clear.

У сучасній верстці використання float цілком собі виправдане. Але, як завжди, за умови одного суттєвого "але" — для відтворення друкарських принципів. Для створення лейауту, як уже зазначалося вище, є спеціальні інструменти.

Чого ж тоді його взагалі використовували для цих задач? Це були темні часи. Таблиці впали в немилість, сходила зірка CSS 2.1, дизайнери вигадували нові, досі небачені структури сторінок, але над усим цим бовваніла одна величезна проблема — стандарти досі сприймали html-сторінки як документи, а не як інтерактивний інтерфейс для взаємодії з вебом.

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

Однак усе не було таким райдужним, як уявлялося. Навіть простенький лейаут на дві колонки міг несподівано розʼїхатись, якщо сумарна ширина колонок виходила бодай на нанопіксель більшою за 100%. Рахувати і прописувати ширини колонок потрібно було вручну, і розробники часто йшли безпечним шляхом, недотягуючи до 100%. Особливо підступним це було для трьох рівноширинних колонок. 33.33% — це найкраще, що ми могли запропонувати світу.

Є проблеми й окрім цього — наприклад, батьківський контейнер за замовчанням не підхоплює висоту float-елементів. І для вирішення цієї проблеми зʼявилися нові хаки: так званий clearfix, чи танці з overflow.

З іншого боку оця вся чудасія з float та спроби на їх основі будувати гнучкі й динамічні лейаути стали одним із чинників, що врешті призвели до появи flex, а згодом і до grid. Саме в епоху float зʼявилися CSS-фреймворки, які принесли у розробку поняття "12-колонкова сітка", що стала основою для макетів безлічі сайтів, і де-факто золотим стандартом дизайну.

Отут можна глянути як воно працює.

Якщо ви в очі не бачили float, і верстаєте виключно з flex та grid, ставте 🔥, ну а як ви такі самі динозаври, як і я, та провели не одну безсонну ніч, намагаючись зверстати той самий "священний Ґрааль", то ставте ❤️ і не забудьте випити таблетки від тиску ;)

Що почитати:
MDN — float
MDN Learn — floats

Що почитати душнілам:
W3C — CSS 2.1 Floats
W3C — CSS Display Module 3

@babichdev

P.S. Квитки на нову "Співбесіду на сцені" скоро здорожчають. Заберіть вже.

#нагадування
Співбесіда на сцені №2
Квитки закінчуються.

В суботу, 28 лютого, у Львові, в пабі Христофор. о 12:00 буде запис нового випуску.
Будуть забави, розіграші всяких приколів за донати, ну і очевидно, сама співбесіда на сцені.
Цього разу — з Frontend Tech Lead.

КВИТКИ ЗАКІНЧУЮТЬСЯ, КАЖУ

#партнерський_допис
Товариство, найбільший ярмарок вакансій в Defense Tech «Арсенал талантів» повертається!

https://arsenal.talantiv.in.ua

DOU та Lobby X знову збирають ключових гравців оборонної індустрії та фахівців, які прагнуть працювати у сфері оборонних технологій. 

🗓 Коли: 14 березня 
📍 Де: Київ, точну локацію ми надішлемо зареєстрованим учасникам в день події на пошту

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

👉🏻 Щоб відвідати «Арсенал талантів» заповнюйте форму та залишайте донат від 333 грн у фонд «Повернись живим». Одна транзакція = один квиток: https://arsenal.talantiv.in.ua/

Після цього триває обов'язкова безпекова перевірка (донат не гарантує її проходження). У випадку підтвердження квиток надійде на електронну пошту, яку ви вказали при реєстрації.

Товариство!
Просто зараз стрим на каналі DOU, де я покажу, як можна зробити дійсно інтерактивний інтерфейс без жодного рядочка JS.

https://www.youtube.com/watch?v=gL9GN8906FU

Лишилося усього 12 квитків.
Завтра, о 12:00, чекаю на вас на записі нового випуску "Співбесіди на сцені" з Frontend Tech Lead!

🗺️ Львів, вул. Ів. Франка 3, Львівський Університет Крафтового Пива ім. Св. Христофора.

⏰ 28 лютого, 12:00

https://secure.wayforpay.com/payment/fe_tech_lead_interview

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

Ще встигаєте узяти квиток на запис "Співбесіди на сцені" ;)

https://secure.wayforpay.com/payment/fe_tech_lead_interview

Дякую усім, хто прийшов на запис цього випуску! Сподіваюсь, вам сподобалось )
Діліться враженнями )

А от і фото підвезли ) Розбирайте на аватарки )
https://15837-mariia-gnip.gallera.io/563289-spivbesida-2

Нове відео на каналі!
Я стільки чекав на цей реліз, що не можу й передати. "Одне питання — три відповіді" — це спроба довести усім, і в першу чергу собі, що цілком реально провести технічну співбесіду за одним і тим самим планом фахівцям різних рівнів.

Пілотний випуск я записував з фахівцями компанії appflame — української продуктової IT-компанії, що вже 7 років працює на ринку, має 500+ спеціалістів в команді. ТОП-5 у рейтингу найкращих роботодавців за версією Forbes Ukraine та robota_ua у 2025 році.

Тож до вашої уваги — пілотний випуск цього формату. Ставте вподобайки, лишайте коментарі, і обовʼязково дайте знати, чи сподобався вам такий формат.

Приємного перегляду!

https://youtu.be/eOK11Pvc2RM

Бабіча багато не буває )
https://youtu.be/bhQnXtKHDIg?si=POSEAupf7t_j2ZSx

Товариство, я тут зрозумів, що вже давно не проводив старих-добрих публічних онлайн-співбесід. Ну тих, де ви позоритесь в прямому етері )

Оці всі подкасти, офлайн-розваги і нові формати це все, звісно, дуже добре, але не варто й забувати, звідки ростуть ноги у мого каналу )

Тому ось вам посилання на форму, де можна лишити заявку на участь в онлайн-співбесіді. Чекатиму з нетерпінням!

https://forms.gle/ytgXa619bE8xy1mBA

#js_in_action
В кожній мові програмування існує безліч способів вистрілити собі в ногу, і JavaScript — не виключення. Буквально днями мені пригадався один з таких способів, який я навіть колись (дуже давно) використовував в продакшн-коді.

Мова йде про оператор with.

const user = { name: "Elvira" };

with (user) {
  console.log(name); // Elvira
}

Якщо спробувати пояснити це явище швидко й просто, то нічого не вийде. Але я спробую. В першу чергу нам потрібно пригадати поняття scope chain. Це ланцюжок контекстів, у якому рушій шукає змінну, до якої ми звертаємось у коді.

І зазвичай мова йде про лексичні скоупи, створені або функціями, або іншими блоками коду за допомогою фігурних дужок. А with просто ніби "пристібає" свій обʼєкт у ланцюжок пошуку імен, тому всередині блоку прості звертання можуть неочікувано резолвитись у властивості цього об’єкта.

with втручається саме в звертання до простих імен. Усередині такого блоку JavaScript спочатку намагається трактувати name як властивість переданого об’єкта, і лише потім шукає це ім’я далі по scope chain. Звертання через явний об’єкт, як-от user.name, цієї проблеми не мають.

const user = { name: "Elvira" };
const name = "Oliver";

with (user) {
  console.log(name);
}

У цьому прикладі буде виведено "Elvira", а не "Oliver", тому що with змушує JavaScript спочатку шукати name у user.

Вам уже мало стати очевидним, що with має набагато більше недоліків, аніж сумнівних вигод. І це правильне відчуття. Він вносить сумʼяття на усіх рівнях: людині важко зрозуміти, що ж мав на увазі автор — чи локальну змінну, чи властивість, чи змінну глобальну; рушій не може оптимізувати такий код, бо не може безпечно припускати, до чого саме посилається кожне імʼя всередині with; лінтери й інші інструменти також можуть сумніватися в тому, до чого саме звертається просте ім’я всередині блоку.

Яскравим прикладом є потенційне перекриття глобальних та локальних імен:

const user = { name: "Elvira", console: true };

with (user) {
  console.log(name);
}

Проблема тут полягає в тому, console буде резолвитись як user.console, а не як глобальний об’єкт console. Насправді, існує механізм обходу глобальних імен через [Symbol.unscopables], але розібратися з ним я залишаю моєму цікавому читачу.

Хоч with і не вилучено зі специфікації ECMAScript повністю, його використання, мʼяко кажучи, не заохочується. В strict mode він заборонений, і лишається лише як частина зворотньої сумісності.

Якщо вважати, що призначенням with було спрощення доступу до властивостей обʼєкту на письмі, то нині у нас є набагато кращі й надійніші способи спрощено звертатися до таких властивостей, наприклад, та сама деструктуризація:

const user = { name: "Elvira"};
const { name } = user;
console.log(name);

Попри добрі наміри, with виявився конструкцією, що втручається в один із фундаментальних механізмів JavaScript — пошук ідентифікаторів через scope chain. І через це привносить неочікувану невизначеність, через що код стає неочевидним і складним для аналізу.

Що почитати:
MDN: with statement
MDN: JavaScript Guide — Working with objects

Що почитати душнілам:
ECMAScript: with statement
ECMAScript: Object Environment Records
ECMAScript: GetIdentifierReference

P.S. Навіщо я взагалі вирішив розповісти про таку стародавню й дивну чудасію? Бо одним з моїх принципів є чергове складне речення: "треба знати не лише як правильно, але і як не правильно, щоб не писати неправильно, не знаючи, що це неправильно".

@babichdev

#css_in_action
Навіть у 2026 році люди не перестають дивуватися, що відносні (тобто відсоткові) вертикальні margin та padding насправді рахуються не від висоти, а від ширини (насправді ширини containing block) елемента). 100% розуміння, 0% засудження — свого часу для мене це теж стало неприємним відкриттям.

Тож чому так? Насправді, це один з моїх улюблених випадків, коли "так історично склалося". Той факт, що ця поведінка зафіксована в CSS2.1, не означає, що вона просто прийшла комусь в голову і її затвердили по приколу. Річ у тім, що цей документ значною мірою був радше не оновленим стандартом, а таким собі "зліпком" того, що коїлося в дивовижному світі веброзробки на той час. І саме така поведінка була вже усталеною.

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

Відверто, дуже багато речей, які здаються нелогічними чи незрозумілими в CSS, насправді спричинені ось такими непростими рішеннями, бо на світанку веброзробки доводилося шукати шляхи, аби обійти нестачу обчислювальних ресурсів та недосконалість алгоритмів. От такий hack driven development.

Попри те, що такий підхід досить контрінтуїтивний, він усе ж спромігся породити бодай одне непогане рішення (читай — хак): попередника aspect-ratio, що дозволяє втілити співвідношення сторін за допомогою вертикального падингу. Про нього я вже колись розповідав.

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

Але лишається відкритим питання — чи можемо ми усе ж задавати відносні відступи залежно від висоти? Відповідь — нуууууууу… майже.

Відносно самого елемента? Тверде ні. Відносно чогось іншого? До вибору, до кольору.

Як мінімум, тепер можна використовувати vh та dvh. Так, це відносно висоти вʼюпорту, і я не дуже уявляю, кому треба такий падинг чи маржин, але суть від того не змінюється — це відносна величина, яка рахується від потрібної нам вісі.

І, звичайно, сьогодні ми маємо контейнерні одиниці. cqh, cqb, cqi, cqw. Цікавлять нас cqh — 1% від висоти контейнера, та cqb — 1% від блочного розміру. За замовчуванням ці напрямки співпадають, але є нюанси при зміні напрямку письма.

Проте з cq* одиницями є надзвичайно важливий момент — вони рахуються від найближчого query container, а не від безпосереднього батьківського елемента. Це, якщо спрощено. Взагалі, тема container queries доволі цікава, і беззаперечно потребує окремого допису. Що скажете?

Однак на даний момент саме container query units виглядають як найбільш надійний спосіб вирішити давню проблему — задавати вертикальні відступи відносно вертикальної вісі. І щодо підтримки перейматись не варто, згідно Can I Use це майже 95% сучасних бравзерів.

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

Хотів би написати "…рішення, що робить хак непотрібним", але ми усі розуміємо, що це не так. В деяких випадках, як з aspect-ratio, хак дійсно розчиняється в небутті, але часто, як із cq* одиницями, ми отримуємо рішення, що лише частково закриває початкову проблему. Але при цьому — дозволяє вирішити ще низку проблем, про які ми й не здогадувались.

Що почитати:
MDN — Layout and the containing block
MDN — padding
MDN — CSS container queries

Що почитати душнілам:
W3C — CSS 2.2 Box model
W3C — CSS Containment Module Level 3

@babichdev

Я тут планую записати нову співбесіду для Ютубу. В ідеалі цей випуск виглядав би так:

— Відважний трейні або сміливий джуніор. А ще краще — відважна трейні чи смілива джуніорка.

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

— Хотів би зняти випуск наступного або тамтого тижня.

Відчуваєте, що це саме ваша нагода спозоритись на весь інтернет? Заповніть формочку:

https://forms.gle/ytgXa619bE8xy1mBA

#збір_на_РЕБ
Товариство, прийшов час нового збору для ЗСУ.
Цього разу нашої допомоги попросили в 115 ОМБр 3МБ.

Ми збираємо на засіб радіоелектронної боротьби "Писець" та приладдя до нього.
Наразі мета збору — 300 000 грн.

Дякую за кожну гривню! Разом ми робимо великі речі!

🔗Посилання на банку
https://send.monobank.ua/jar/46FX59UkXS

💳Номер картки банки
4874100026432743

P.S. Розіграш за минулий збір для ЖВІ вже проведено, і артбук поїхав до нового власника. А в коментарях до допису додам скрин з підтвердженням, що стоматкабінет вже працює на повну.

#нове_відео
Товариство, запрошую до перегляду нового випуску "Подкасту у нас вдома". Цього разу розмовляв з Уляною Білінською-Шутою — QA-менторкою й тестувальницею з досвідом роботи в Uber та LinkedIn.

Говорили про усяке — де добре, де не дуже, хто наші конкуренти на закордонних ринках, які внутрішні тємки є в великих компаніях, і чи взагалі є шанс для українців працювати на американське ІТ.

Приємного перегляду!

З вас комент під відео, вподобайка і поширення. Дякую!

https://youtu.be/yyoNw2g2VHM

Дякую за довіру та підтримку, товариство!