Мир сегодня с "Юрий Подоляка"

Труха⚡️Україна

Переглянути

Николаевский Ванёк

Переглянути

Мир сегодня с "Юрий Подоляка"

Переглянути

Труха⚡️Україна

Переглянути

Николаевский Ванёк

Переглянути

Дивовижний світ веброзробки

Дивовижний світ веброзробки — тепер і в твоєму телеграмі. Анонси відео з YouTube-каналу «Сергій Бабіч та Дивовижний світ веброзробки», стріми, авторські статті та цікаві знахідки.
youtube.com/@babichweb
З питань реклами та інтеграцій: @babich_ss

Рейтинг TGlist

ТипПублічний

Верифікація

Не верифікований

Довіреність

Не надійний

Розташування

МоваІнша

Дата створення каналуКвіт 15, 2025

Додано до TGlist

Квіт 17, 2025

Я власник каналу

Історія змін

Прикріплена група

ДС

Чат

Статистика Телеграм-каналу Дивовижний світ веброзробки

Детальніше

Підписників

547

24 год.

142.6%Тиждень

17948.6%Місяць

17948.6%

Індекс цитування

0

Згадок2Репостів на каналах0Згадок на каналах2

Середнє охоплення 1 допису

303

12 год.323

6.6%24 год.3030%48 год.1580%

Залученість (ER)

12.21%

Репостів2Коментарів0Реакцій35

Залученість за охопленням (ERR)

55.7%

24 год.

1.15%Тиждень

19.3%Місяць0%

Охоплення 1 рекл. допису

303

1 год.9631.68%1 – 4 год.6722.11%4 - 24 год.309.9%

Детальніше

Під'єднайте нашого бота до каналу і дізнайтеся стать аудиторії цього каналу.

Всього дописів за 24 години

1

Динаміка

Останні публікації в групі "Дивовижний світ веброзробки"

Всі дописи

23.04.202505:33

На полі — заміна! Ну або не на полі, а в DOMі. У будь-якому разі іноді виникає потреба замінити один елемент у DOM на інший — не змінити його вміст, не оновити клас, а саме повністю підмінити.

Поширеним, так би мовити "bulletproof" підходом уже тривалий час є використання методу replaceChild у батьківського елемента:

parent.replaceChild(child, newChild);

Сьогодні ж є куди краший спосіб — replaceWith. Це метод, який викликається напряму на елементі й дозволяє одразу вказати, чим його потрібно замінити:

child.replaceWith(newChild);

Метод працює і для вставки кількох елементів одночасно, наприклад:

child.replaceWith(newChild1, newChild2);

Або навіть просто тексту:

child.replaceWith('Привіт!');

Головне — памʼятати, що replaceWith() видаляє елемент, на якому викликається, і вставляє на його місце все, що передано в аргументах. Якщо цей елемент ще не в DOM — метод не має жодного ефекту.

Використовується він у всіх основних браузерах ще з 2019 року й входить у Baseline, працює стабільно, читається просто. Якщо ви ще досі видаляєте елементи вручну й потім вставляєте нові — спробуйте replaceWith.

До речі, вам уже випадала нагода використати replaceWith у себе, чи ще тримаєтесь за remove і append? Напишіть у коментарях.

Корисно? Цікаво? З вас вподобайка і репост.

MDN

@babichdev

22.04.202506:58

Чи доводилось вам коли-небудь відчайдушно хотіти, аби в природі існував querySelector "навпаки"? А для пошуку потрібного батька не треба було б робити нескінченні while { el.parentElement… }?

Якщо я вам скажу, що таке уже дуже давно існує?

closest() — це метод DOM API, який дозволяє знайти найближчий елемент-предок (або сам елемент), що відповідає заданому CSS-селектору. Він перевіряє спочатку сам елемент, потім піднімається до батька, і так далі догори по DOM-ієрархії до кореня документа.

Якщо елемент знайдено — повертається він. Якщо ні — null.

Ось таким чином можна впевнено ловити клік саме на потрібному елементі, навіть якщо фактично ми клікали десь на його дочірні елементи:

container.addEventListener('click', (event) => {

Найчастіше closest() допомагає при делегуванні подій через контейнери, при роботі з вкладеними елементами або ж коли потрібно визначити належність елемента до певного блоку.

Цікаво? Постав серденько та пошир цей допис серед друзів. Це дуже цінно для ровитку каналу.

Важливі нюанси:
• Якщо сам елемент підходить — він і повертається.
• Пошук тільки догори (не вниз).
• Якщо немає збігів — повертається null.
• Працює тільки для елементів, що фактично знаходяться в DOM.

Трохи історії: ідея closest() давно використовувалась, до прикладу, у jQuery (версія 1.3, ~2009 рік). Метод $(el).closest(selector) працював за тією ж логікою: спочатку елемент, потім його батьки. У бравзерах closest() зʼявився в стандарті Selectors API Level 2 і підтримується скрізь із 2015 року.

Тож сьогодні це надійний і швидкий спосіб шукати потрібний контекст без зайвого перебору руками.

А ви як, користуєтесь closest, чи досі перебираєте усіх батьків руками? Напишіть обовʼязково в коментарях!

MDN

@babichdev

19.04.202506:29

#цього_тижня
Глянули одним оком на @layer і поговорили про порядок застосування стилів.

Дізналися, як не писати padding-left і padding-right за допомогою CSS Logical Properties.

Розглянули, як стилізувати батьківські елементи за допомогою :has та без допомоги JavaScript.

Згадали про :empty та дізналися як вибирати справді порожні елементи.

А ще дивилися прямий етер з лайвкодингом, на якому разом з гостем робили менеджер завантажень на чистому JS.

Підписуйся: @babichdev

***
Усім гарних вихідних та смачної паски! Зустрінемось після свят!

18.04.202510:02

Коментарі вбивають ютуб. Точніше — їхня відсутність. Точніше — не весь ютуб, а мій канал конкретно.

У ютуба взагалі цікаве уявлення про те, що кому рекомендувати, і активність під відео — не останній в тому фактор. Чим вона менша, тим відео "нецікавіше", і тим швидше ютуб кладе на нього алгоритмічний пісюн.

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

Обіцяю відповісти на усі ваші відгуки!

https://youtube.com/live/DNOe80KVurI

P.S. В описі під відео вже є посилання на репозиторій!

17.04.202518:04

КОРИСНІ ОГОЛОШЕННЯ
з етеру Лайвкодинг! Менеджер завантажень на чистому JS

***
Наймасштабніша зустріч української IT-спільноти: понад 2500 учасників, 120+ спікерів, більше 30 партнерів. На вас чекають доповіді, панельні дискусії, воркшопи в семи треках — від архітектури та розробки до AI, тестування та продакт-стратегій.

Будуть нові треки, секретні зони, круглі столи, афтепаті та інтерактивні стенди.

Квитки вже у продажу — приєднуйтесь!

DOU Day 2025 — зустрінемось у Києві 16–17 травня!
https://dou.ua/goto/w4iy

---
Знайомтеся з Мейлтрап — українською імейл-платформою, створеною під потреби розробників.

Високі показники доставки, SMTP i API з набором найпопулярніших бібліотек та найкраща в галузі аналітика.

Скористайтесь промокодом BABICH і отримайте знижку 20% на усі тарифні плани Мейлтрап: https://l.rw.rw/serhii_babich_3

***
А також не забудьте дати відповідь на Питання від партнера та отримати нагоду виграти мишку MX Anywhere 3 від Logitech!

17.04.202515:55

Чистий JS, ніякої магії і виключно крафтовий код на противагу вайбовому — саме це чекає на вас уже за пʼять хвилин у мене на ютубі!

А ще подарунки від партнера, куди ж без них. Долучайтеся до нас з Олегом на прямому етері з лайвкодингу!

https://youtube.com/live/DNOe80KVurI

17.04.202511:13

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

Як ви вже могли здогадатися, сьогодні тема дня — псевдоклас :has(), який фактично додає можливість стилізувати батьківські елементи залежно від того, чи мають вони в собі той чи інший елемент або чи перебуває він у певному стані.

Приклад:

.card:has(input:checked) {

Тло .card зміниться, якщо всередині буде увімкнений чекбокс.

Або ще:

form:has(:invalid) {

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

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

Та справжня сила :has() розкривається у поєднанні з CSS Nesting.

Ось дещо розширений приклад із картинки:

.card {

Якщо .card має клас active, тоді батьківський section, що містить цю .card, отримає рамку. А якщо .card просто існує всередині article — то цей article отримає колір тексту lime.

Варто звернути увагу на кілька моментів.

По-перше, ми описуємо це з точки зору самої .card. Саме .card ініціює правило, а не батьківський елемент.

По-друге, & — це посилання на сам елемент .card у вкладеному CSS. Тобто ми можемо всередині одного правила описати, як наявність або стан елемента впливає на зовнішній світ навколо нього.

Тож це правило читається так: "знайди section, який містить нащадка .card із класом active, і знайди article, який містить нащадка .card, незалежно від стану".

Що найголовніше — усе це працює без JavaScript, без дублювання стану і без костильних класів.

Підтримується у всіх сучасних браузерах: Chrome, Safari, Edge, а також у Firefox, починаючи з версії 121.

А ви вже пробували використовувати :has() у своїх проєктах? Якщо ще ні — кліпніть двічі, ми вишлемо когось вас визволяти. Але однак напишіть у коментарях.

MDN

@babichdev

16.04.202517:47

Твій CSS працює тільки тому, що твій користувач теж читає зліва направо. Але що буде, коли доведеться підтримувати арабську, іврит або вертикальний текст?

Сьогодні тема дня — CSS Logical Properties, набір властивостей, що описують просторові характеристики елементів не через фіксовані сторони (left, right, top, bottom), а через напрям потоку контенту: блоковий (block) і лінійний (inline). Вони автоматично підлаштовуються під мовні налаштування: наприклад, працюють справа наліво в арабській або зліва направо в українській — без додаткової логіки.

І замість цього:

padding-left: 1rem;

пишемо просто:

padding-inline: 1rem;

Відступ буде з обох боків — але залежно від напрямку тексту. Те саме з вертикальними відступами:

margin-block-start: 1rem;

Це працює замість margin-top та margin-bottom, адаптуючись під вертикальні або змішані потоки.

Для позиціонування можна замінити left або right на логічну альтернативу:

inset-inline-start: 0;

Це означає «притиснути до початку рядка», незалежно від того, це left у LTR чи right у RTL.

А для вирівнювання тексту:

text-align: start;

Це працює як left або right, залежно від мови інтерфейсу, і допомагає уникнути дублювання стилів у багатомовних проєктах.

Цей підхід значно спрощує підтримку інтерфейсів, які мають адаптуватися до RTL, вертикального письма чи просто бути однаково коректними у глобальних продуктах. Менше дублювання, менше умов, менше edge cases.

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

До речі, напрямок буває не лише зліва направо чи справа наліво. Є ще вертикальний — згори донизу, наприклад у японській чи китайській розмітці. Якщо ж десь існує система письма з напрямком знизу вгору — напишіть, я такого ще не бачив.

Підтримується в усіх сучасних браузерах. Якщо проєкт має працювати в кількох мовних середовищах — логічні властивості варто починати використовувати вже зараз.

Особисто я користуюсь ними не так, аби давно, але мені ця фіча надзвичайно подобається (хоча зізнаюсь — переважно аби не писати окремо left і right). А ви вже використовуєте logical properties? Якщо ще ні — цікаво, що стримує. Напишіть у коментарях.

MDN

@babichdev

P.S. За вподобайки і поширення буду вдячний як білочка за горішок.

15.04.202511:43

@layer

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

Можна створити шари з іменами reset, base, components, utilities і зафіксувати їхній порядок:

@layer reset, base, components, utilities;

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

Це особливо важливо в масштабних проєктах, де на один елемент можуть впливати стилі з різних джерел — наприклад, базові стилі, компоненти, утиліти або сторонні бібліотеки. Без @layer доводиться або боротися зі специфічністю, або покладатися на порядок підключення, що часто веде до неочікуваних результатів. @layer усуває цю невизначеність.

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

MDN

@babichdev

.

Всі дописи

Рекламувався22 години

19.04.202506:48Той самий Бабіч

3.9K

Блоги

Рекламувався0 секунд

17.04.202515:57Той самий Бабіч

3.9K

Блоги

Рекламувався17 годин

16.04.202517:43Той самий Бабіч

3.9K

Блоги

Рекламувався7 годин

15.04.202509:10Той самий Бабіч

3.9K

Блоги

Детальніше

Рекорди

23.04.202523:59

547Підписників

18.04.202523:59

200Індекс цитування

10.04.202518:37

427Охоплення 1 допису

17.04.202523:59

427Охоп рекл. допису

22.04.202514:52

12.21%ER

17.03.202518:37

116.03%ERR

Розвиток

Детальніше

Підписників

Індекс цитування

Охоплення 1 допису

Охоп рекл. допису

ERR

Детальніше

Дивовижний світ веброзробки

Статистика Телеграм-каналу Дивовижний світ веброзробки

Підписників

547

Індекс цитування

0

Середнє охоплення 1 допису

303

Залученість (ER)

12.21%

Залученість за охопленням (ERR)

55.7%

Охоплення 1 рекл. допису

303

1

Останні публікації в групі "Дивовижний світ веброзробки"

Рекорди

Розвиток

Популярні публікації Дивовижний світ веброзробки

Останні публікації в групі "Дивовижний світ веброзробки"

Популярні публікації Дивовижний світ веброзробки

Статистика Телеграм-каналу Дивовижний світ веброзробки

Підписників

547

Індекс цитування

0

Середнє охоплення 1 допису

303

Залученість (ER)

12.21%

Залученість за охопленням (ERR)

55.7%

Охоплення 1 рекл. допису

303

1