Дивовижний світ веброзробки – Telegram
Дивовижний світ веброзробки
2.91K subscribers
83 photos
7 videos
1 file
183 links
Дивовижний світ веброзробки — тепер і в твоєму телеграмі. Анонси відео з YouTube-каналу «Сергій Бабіч та Дивовижний світ веброзробки», стріми, авторські статті та цікаві знахідки.

youtube.com/@babichweb

Реклами та інтеграції обговоримо
Download Telegram
Товариство!
Я проведу 4 індивідуальні технічні співбесіди для junior–senior фронтенд-розробників у грудні.

Як це відбувається і що ви отримаєте?

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

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

3. Проводимо співбесіду. Базовий усний фідбек — одразу на дзвінку.

4. Я ховаюсь у печеру і готую розширений письмовий фідбек: сильні сторони, зони для розвитку, висновки та рекомендації — як працювати з перевагами, закривати прогалини і планувати ваші подальші кроки.

Вартість — 200$.

Якщо вам важливо тверезо й неупереджено оцінити свій рівень та зрозуміти подальший напрям — надсилайте заявку.

Форма:
forms.gle/5R5TPTKUmzUMnz6p9

P.S. Це не ютуб )
🔥366
#партнерський_допис
Товариство, завтра, 10 грудня, компанія Growth Factory та Ед Мяус запрошують вас на практичний воркшоп, де ви можете закласти фундамент для вашої IT-компанії.

Цей воркшоп — логічне продовження минулого майстеркласу "Як почати працювати напряму із замовниками і стартувати власний IT-бізнес".

Ед Мяус — підприємець з 20+ річним досвідом, фаундер IT-компанії MeGaDev, Grade. app, інвестор та адвайзер у 15+ компаніях.

На воркшопі ви:

1) Оберете назву для своєї IT-компанії, нішу та послуги;
2) Дізнаєтесь, як запустити сторінку компанії у LinkedIn і налаштувати LinkedIn фаундера/компанії під чек клієнта;
3) Навчитесь формувати канали залучення клієнтів;
4) Пропишете ваші сильні сторони як IT-фаундера;
5) Підготуєте основу для першої виручки.

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

https://bit.ly/3XIAbb3

P.S. 100% коштів за розміщення допису спрямовано на потреби ЗСУ.
👍53
#мислення_розробника
Патерни! О, скільки в цьому слові… Сльози, плач, нерозуміння, довгі ночі, червоні очі, лемент і крик…

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

Чи треба знати патерни, тим паче джуну, себто початківцю? (я тут нещодавно зрозумів, що чисто по дідівськи вважаю початківцями всіх, хто менше пʼяти років у фаху, капєц). Свого часу я створив опитування в лінкедині, і думки авдиторії розділилися фактично порівну. Коментатори висловлювали різні думки з цього приводу, а я робив у своїй голові ретроспективу свого ставлення до цього питання, і зрозумів, що воно змінилося прямо протилежно, від "однозначно не треба" до "однозначно треба", але, як і завжди, з одним "але".

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

Щодо доцільности вивчення високих матерій умовними джунами, маю відразу зазначити, що у мене для вас погані новини (вкотре), і нинішній джун, який дійсно потрібний ринку, це приблизний відповідник мідла пʼяти–семирічної давности за рівнем теоретичних знань. Це не привід заломувати руки і лементувати, а навпаки — привід задуматись, по-перше, а чи так воно вам то все треба, а по-друге, усвідомити що воно таки треба і почати системно вчити.

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

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

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

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

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

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

@babichdev
34🔥7👍4
#анонс
Товариство!
Цієї суботи буду записувати онлайн новий подкаст на дуже цікаву тему — "Шлях крізь найм: як пройти машини, людей і очікування".

Будемо говорити про те, як пройти ATS і AI-фільтри, які бувають фатальні помилки в рекрутингу і як вони впливають на кандидатів, як зрозуміти зрілість компанії та її реальні наміри, і як адаптуватися до стилю співбесід в США, Європі та ЛатАМ.

У мене в гостях буде Ольга Базуріна — Global Talent Acquisition Manager з десятирічним досвідом рекрутингу в США, Європі, Україні та LATAM, яка будує та масштабує технічні й C-level команди для компаній рівня Fortune 500. Вона — співвласниця міжнародної рекрутингової агенції та експертка з HRTech і Talent Intelligence, яка поєднує технічну експертизу, бізнес-орієнтований підхід і створює стандарти оцінки команд.

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

Запис планується на 18:00.

Запишіть собі десь, посилання на студію я опублікую в каналі в суботу.

Ще раз:

Запис подкасту "Шлях крізь найм: як пройти машини, людей і очікування"
13 грудня, 18:00
Онлайн


Сподіваюсь, моя камера вибрикуватись не буде, і відео я змонтую й викладу швидше, аніж минулого разу, бгг.
🔥207
Доброго ранку.
На Ламповий мітап №2 у Львові лишилося усього 8 квитків.

Цього разу — ні слова про ШІ.

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

Еля Неплохова поділиться тим, як насправді працює LinkedIn та поділиться порадами щодо оформлення профілю, щоб ваша сторінка була привабливою для рекрутерів і піднімалась у пошуку.

— А Вʼячеслав Павлюк пояснить простими словами, що таке мікрофронтенди, які задачі вони вирішують, як можуть допомогти в розробці, та як ними можна вистрілити собі в ногу.

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

Зустрінемось СЬОГОДНІ, 11 грудня в офісі компанії Sigma Software на вул. Науковій, 7д.
Двері відкриваємо о 18:30.
Приходьте, буде цікаво, весело і точно буде лампово! Як і обіцяли.

P.S. 100% прибутку з квитків буде спрямовано на потреби ЗСУ.
🔥91👍1
ПРЕМʼЄРА

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

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

Про це та багато чого іншого я говорив з Артемом Биковцем (@agile_bykovets_smpl) — одним із найбільш досвідчених практиків і тренерів Agile & Scrum в Україні, який працює з Agile з 2010 року, з OKR — з 2015-го, консультує компанії від індивідуального рівня до C-level, заснував конференції Simplicity Day, є гостьовим лектором КМБШ і постійно експериментує з новими форматами, зокрема стендап-комедією.

ПРЕМʼЄРА ВІДЕО
Сьогодні, 12 грудня,
19:00

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

Тисніть дзвіночка і приємного перегляду ;)
🔥189👍7
#партнерський_допис
Хотіли дізнатися, що у LLM під капотом? Чим визначається їхня "поведінка"? На які метрики звертати увагу для визначення якості та потенціалу різних моделей, і як застосовувати ці знання для створення надійних, керованих і масштабованих рішень?

Fwdays Academy запрошує на воркшоп Deep Dive into LLM APIs від Олександра Краковецького!

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

Коли: 15 та 16 грудня, 18:30–21:00
Де: Онлайн, Zoom (запис буде доступний)
Реєстрація та деталі: https://bit.ly/4irJPbP

ПРОМОКОД НА 10%: Babich

Ментор: Олександр Краковецький, AI Expert, CEO в DevRain, CTO в DonorUA, автор книг про генеративний штучний інтелект.

Почніть впевнено працювати з LLM APIs разом з Fwdays Academy!

P.S. 100% коштів за розміщення допису спрямовано на потреби ЗСУ.
👍83
Media is too big
VIEW IN TELEGRAM
Запостив я отакий шорт на ютубі в підтримку останнього відео і отримав у коментарях наступний діалог:

Коментатор: а в кінці місяця, без тікетів , вирішити хто працював ,а хто штани протирав?
Я: Бгггг. Чи це серйозне питання було?)

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

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

***
Тут як. Колись дійсно тікети в джирі багато хто використовував для обліку робочого часу. Я сам таку практику застав. Відверто — це херня. Бо це нічого не дає, крім можливості підкручувати собі години.

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

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

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

Але в даному фрагменті мається дещо інше на увазі. Тут Артем казав про ситуацію, коли ми маємо безініціативного виконавця, який ніби й буде робити задачу, але тільки тоді, коли ХТОСЬ інший ЙОМУ зробить тікет. Вирішить за нього усі питання, уточнить незрозумілості, і на тарілочці подасть фінальний документ. І аж тоді наш програміст підніме дупцю і піде шось там кодірувать.

Колись такий підхід працював. Зараз — не дуже. Чому? Бо нам потрібна відчутно менша за розміром команда ініціативних людей, які можуть самостійно розібратися в домені, контексті задачі, які можуть самотужки налагодити потрібну комунікацію, які можуть керувати невизначеністю. На противагу команді видатних кодогенераторів, які пальцем не ворухнуть, поки їх не натицяють носом в усе готове.

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

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

Якось так.

***
Ви вже подивилися це відео? Це просто відвал сраки, наскільки воно вийшли цікаве та круте.
https://www.youtube.com/watch?v=oyswnHaq_3E
🔥238👍8
Таска в жирі — страва традиційної айтішної кухні. Може мати шкідливий вплив на тиск та призводити до передчасного вигоряння.

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

Іноді повну миску тасок в жирі ще називають беклогом.
😁3313
#html_in_action
Автодоповнення списків використовується в користувацьких інтерфейсах давно. Проте в більшості випадків для цього застосовуються кастомні, доволі складні компоненти. Але в HTML5 існує нативний елемент, який забезпечує такий функціонал без JavaScript, виключно засобами HTML.

Мова йде про datalist. Це надзвичайно простий елемент, який водночас забезпечує саме те, що від нього очікується — виведення списку підказок при введенні тексту у поле введення.

Виглядає це так:
<label for="city">Місто</label>
<input list="cities" name="city" id="city"/>

<datalist id="cities">
<option value="Київ" />
<option value="Львів" />
<option value="Харків" />
<option value="Одеса" />
</datalist>


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

При виборі елемента списку в інпут буде підставлено значення з атрибуту value і викликано стандартні події поля вводу, тому немає технічної можливості дізнатися, як саме значення було введено.

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

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

Щодо відмінності поведінки в бравзерах, тут, звичайно, доведеться прийняти стан справ як є.

Наприклад, Chromium та Webkit бравзери зараз покажуть і значення з атрибуту value, і текст між тегами option у випадайці. А от Firefox покаже лише підпис. Взагалі, саме у Firefox datalist має доволі обмежену імплементацію. До прикладу, логіка пошуку по списку суттєво відрізняється, якщо у option є і атрибут value і текст.

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

Ну або вішайте табличку "Найкраще працює в Chrome/Edge", ми це вже проходили.

Що почитати:
MDN: <datalist>

Що почитати душнілам:
HTML Living Standard — <datalist>

@babichdev

P.S. Якщо не поставите вогник чи серденько — я дуже засмучусь. Ви ж не хочете, аби я засмутивсь? Правда? ПРАВДА?
🔥7511👍2
#анонс
Товариство, тут в четвер буде просто зашкалююча концентрація крутості на одному стримі )

Я йду в гості на ютуб, до Сергія Немчинського. Ви тільки погляньте, в якій компанії проведемо час: будуть і Артем Биковець, і Ілля Климов! Згадаємо, яким був IT-2025 — що здивувало, що дратувало, що смішило. Трішки зазирнемо в 2026-й, поділимось відчуттями, прогнозами й думками.

Одним словом — потеревенимо. Приходьте.

18 грудня, о 15:00

Стрим буде за ооооось цим посиланням:
https://www.youtube.com/watch?v=Jeudw2EeDrI
🔥41👍116👏1
#css_in_action
Поставити box-sizing: border-box і забути. Ну якось так сьогодні виглядає перший рядок CSS на проєкті. Але чи всі знають, що це таке та на що впливає? Давайте глянемо.

box-sizing визначає, в який спосіб буде розраховано значення розмірів у box model – тобто як бравзер рахує фактичний розмір елемента в макеті. Давайте пригадаємо, з чого складаються фактичні виміри:

— content: розміри вмісту всередині елемента;
— padding: внутрішні відступи між вмістом та бордером;
— border: товщина рамки навколо елемента;

Ці три значення й визначають фінальний розмір. А от як саме — визначає та сама box model.

За замовчуванням усі блочні елементи використовують content-box, і це означає, що властивість width застосовується до content box, тобто до внутрішньої зони.

Таким чином фінальний розмір визначається формулою:
total = content + padding + border;

де content це значення width або height, залежно від виміру. Саме тому, якщо задати елементу width: 100px, padding: 4px та border-width: 1px ми отримаємо фактичну ширину в 110 пікселів.

А що робить border-box? Він змінює підхід до розрахунку. І тепер формула набуває іншого вигляду:
content = total - padding - border;


Тепер width описує розмір усього елемента, а внутрішній content автоматично підлаштовується.

Чому ми надаємо перевагу саме border-box? Причина проста: розміри стають передбачуваними. Якщо ми кажемо, що ширина має бути 100 пікселів, вона й буде 100 пікселів, незалежно від падінгів та бордерів.

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

До речі, колись у Firefox існував ще експериментальний padding-box, в якому значення width задавало суму content та padding, лишаючи border поза формулою. Але це не прижилося. Може й на краще.

І ще важливо, що margin ніколи не входив, не входить і, сподіваюсь, не входитиме до box-model, адже це не вимір елемента, а його відступ від навколишніх елементів в макеті.

border-box у стандарті зʼявився не відразу, перші робочі драфти було опубліковано на початку 00-х. А от широкої підтримки це значення набуло десь так в 2012 році.

Цікавий факт: саме така поведінка box model була в IE5-IE6, але не через прогресивне мислення розробників бравзера, а через банальний баг. І багато хто вважав, що така поведінка є інтуїтивнішою, ніж стандартна.

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

Що почитати
MDN: box-sizing

***
@babichdev
38🔥10👍8
#анонс
Товариство, пишемо новий покдаст!

Цієї суботи, 20 грудня, о 19:00 відбудеться запис нового випуску подкасту "Подкаст у нас вдома", на якому разом з Уляною Білінською-Шута поговоримо про "Американську мрія: як працює найм в США".

Будемо говорити про американський ринок не тому, що туди «обовʼязково треба йти», а тому що саме там найчіткіше видно, як працює зрілий tech-найм. У США довші процеси, вища конкуренція й більша ціна помилки, тому рішення про найм рідко ухвалюють навмання. Цей ринок швидко знімає ілюзії й показує, що компаніям важливо не лише що ти знаєш, а як ти думаєш, говориш і береш відповідальність.

Для багатьох українських спеціалістів складність США — не в рівні знань, а в очікуваннях і підході до інтервʼю. Тому ця розмова не про релокацію чи мрію переїзду, а про розуміння системи: як читають кандидатів, чому відмовляють сильним інженерам і які сигнали насправді мають значення. Навіть якщо ви ніколи не плануєте працювати в США, цей досвід допомагає тверезіше дивитись на будь-який зрілий ринок.

Моя гостя —Senior Manual Quality Assurance Engineer, ex- Uber,ex- Linkedin. 7 років назад з юристки перевчилась на тестувальницю у Кремнієвій Долині, і з тих пір працює в професії. Також, Уляна — QA Mentor і допомагає як новачкам, так і досвідченим QA рухатися карʼєрною драбиною.

Запис відбудеться онлайн, посилання на студію прикріплено до події в календарі. Додавайте собі, буду радий бачити усіх вас!

ДОДАТИ ПОДІЮ СОБІ В КАЛЕНДАР

@babichdev
🔥185🤔1
#css_in_action

Для майже останнього допису у цьому році я обрав тему, про яку збирався розповісти дуже давно. І от, 9 грудня цього року, непомітно для усіх, сталася моя особиста подія року у веброзробці.

Firefox нарешті додав підтримку @scope.

Проблема ізоляції селекторів в CSS стара як світ. В першу чергу через те, що механізм каскаду не передбачає ізоляції, лише перевизначення. Специфічність, порядок, !important врешті решт.

Люди всіляко намагалися це вирішити, кидаючись з крайнощі в крайнощі — то богопротивний БЕМ, то дияволоугодний CSS-in-JS.

Аж ось, 2021 року, зʼявилася цікава специфікація — @scope. Вона окреслювала механізм "області видимості" стилів, який давав можливість дійсно ізолювати селектори. Перша реалізація не забарилася, і вже 2023 року підтримка зʼявилася у Chrome/Edge, з наступного року у Safari, ну а до Firefox її нам підвезли майже під ялиночку.

Чому це важливо? По факту, механізм @scope працює не на ізоляцію селекторів, а на їхню область видимості. За замовчуванням усі селектори в CSS глобальні. А от @scope дозволяє сказати, що .noscript всередині .card поводиться ось таким чином. І якщо ми визначаємо певне "обмежене" правило, то стилі будуть застосовуватися виключно до елемента всередині області видимості. А поза нею до такого ж селектора — не будуть.

Працює воно, з однієї сторони, просто, з іншої — не дуже. Давайте поглянемо на простий приклад:

<div class="card">
<h2 class="noscript">Превіт</h2>
</div>
<h2 class="noscript">Світ</h2>


@scope (.card) {
.noscript { color: lime }
}
.noscript { color: red }


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

Логічне питання: може це тому, що @scope додає специфічности? Але відповідь — ні, не додає. Ви можете перевірити це в Dev Tools.

Хоча зі специфічністю таки є нюанс — якщо я замість просто .noscript напишу h2.noscript в останньому правилі поза @scope, то цей стиль таки перебʼє наш зелений колір. "Специфічність, безсердечна ти сука", як сказав би Шелдон Купер.

Можна, звичайно ж, написати звично:

.card .noscript { … }


Але. В такий спосіб зʼявиться додаткова специфічність, якої зі @scope немає. Специфічність селектора в @scope визначається самим селектором, а не специфічністю селектора, яким задається область видимості. Тому навіть така конструкція матиме специфічність (0,1,0):

@scope (#card.override) {
.noscript { color: lime }
}


На відміну від #card.override .noscript, яка матиме специфічність (1,2,0).

А ще області видимості можна задавати явно і початок, і кінець:

@scope (.parent) to (.child) { ... }


Це значить, що область видимості діє всередині .parent, але не поширюється на піддерево, коренем якого є .child.

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

Таким чином я можу спокійно мати щось на кшталт:

<h2 class="size-xxl"></h2>
<div class="card size-xxl"></div>


і описувати ось цей size-xxl всередині відповідного скоупа в один простий селектор замість бавитися у "Вгадай специфічність":

@scope (:is(h1, h2, h3)) {
.size-xxl { … }
}
@scope (.card) {
.size-xxl { … }
}


Способів застосування є безліч насправді. І якщо грамотно побудувати домовленості в команді, то просте використання @scope дозволить вам без особливих проблем писати дійсно ізольовані стилі без використання різного ступеню кучерявости костилів.

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

Що почитати:
MDN: @scope

Що почитати душнілам:
W3C: Scoping Styles: the @scope rule

Вогник, серденько, цьом у лобіка.

@babichdev
🔥3515👍4👏1
#партнерський_допис
Ринок ІТ зараз турбує багатьох — особливо питання, як у ньому не потонути й усе-таки дійти до офера.

Саме про це Вікторія Захарова проведе завтра, 23 грудня, практичний воркшоп на 2–3 години. Буде про конкретні речі:

— Як поводитися та як готуватися в процесі пошуку: аналіз ринку, резюме, супровідні листи, профіль в LinkedIn, нетворкінг;

— Що робити зі своїми емоціями: звідки взяти дисципліну, як не зневіритися в пошуку а також які софт-скіли взагалі очікуються роботодавцями;

— Практичні поради, зведені у воркбук: як ним користуватися, аби були дійсні зміни і як їх контролювати.

Якщо коротко — це спроба зібрати цілісну картину пошуку роботи: від старту до офера з урахуванням реалій ринку 2026 року.

Корисно буде і тим, хто тільки починає пошук, і тим, хто вже давно в процесі.

Зустріч безоплатна, реєстрація тут:
https://bit.ly/workshop_strategy2026

🗓 Коли: 23 грудня о 19:00
📌 Формат: Google Meet + підтримка в Telegram
⌛️ Тривалість: 2–3 години


P.S. 100% коштів за розміщення допису спрямовано на потреби ЗСУ.
👍8🔥71
Зі святами, товариство!

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

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

Я ціную те, що поруч зі мною найдорожчі моєму серцю: сім'я, друзі, та й ви, мої любі ).

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

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

З Різдвом та Новим роком!

Побачимось після свят ;)
79🔥5👍2