#про_співбесіди
У мене вчора трошки пригоріло від одного допису в Threads. Якщо коротко: історія про співбесіду, де кандидат класно відповідає на питання, розповідає кейси, і взагалі повний метч. Але аж тут, при завершенні тімлід раптом питає: "А що більше, 5² чи 2⁵?' Кандидат розгубився, просить калькулятор. І висновок мене вбив: "Це не про математику. Це про базову уважність, реакцію, спокій під тиском."

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

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

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

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

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

Підсумовуючи, залишу просто дуже влучну цитату з коментарів: "В гуглі всі знають, чому люки круглі, але чомусь досі пишуть код з null exception".

Все, ніби випустив пару. Не будьте душні, одним словом.

@babichdev

Товариство, хто хоче стати зіркою наступної співбесіди на ютубі? Яка, до речі, відбудеться наступної пʼятниці, 1 серпня.

Заповнюйте анкету і хапайте нагоду попозоритись показати свої знання в прямому етері!

https://forms.gle/T8SKFTpuCbY1vK8E6

Чекаю на ваші заявки до вечора неділі. Всім гарного вечора пʼятниці!

#партнерський_допис
Товариство, а ви чули? ШІ стукає в наші таски! І як він змінить роботу фронтенд-розробників у найближчі роки — говоримо на панельній дискусії appflame talks!

📅 31 липня, 18:00–20:00, онлайн
Спікери з appflame, WIX, Softsich. Модератор — щиро ваш Бабіч.
Ця подія — і для розробників і тімлідів, які хочуть розуміти, куди рухається індустрія.

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

🔗 Реєстрація: http://bit.ly/4lszyfW

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

Одним зі способів подолати цю проблему є фіксування розмірів елементів зображень, наприклад, задаючи в HTML width та height. Однак, якщо у вас адаптивний дизайн, і картинки мають динамічні розміри, цей підхід просто не спрацює.

І тоді людство згадало про так чудову річ, як пропорції, і почало "резервувати" місце під зображення, поки сам файл вантажиться. Найнадійнішим способом тривалий час був так званий padding-top hack — коли за допомогою внутрішнього відступу, абсолютного позиціонування і такоїто матері вдавалось таки забезпечити сталі пропорції. Але якою ціною?

<div class="box">
  <img class="fixed-ratio">
</div>

<style>
.box {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 9 / 16 = 0.5625 → 56.25% */
  overflow: hidden;
}

.fixed-ratio {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
</style>

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

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

Хто не поставить серденько — втратить доступ до каналу через 3… 2… 1…

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

.fixed-ratio {
  aspect-ratio: 16 / 9;
}

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

.fixed-ratio {
  aspect-ratio: 1.77777778;
}

А, що ще важливо — очевидно, що aspect-ratio працює для усіх блочних елементів, не лише для зображень.

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

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

🌐 MDN: aspect-ratio

А ви як, слідкуєте, аби ваші сторінки не цибали вверх-вниз, як дикі гібони, чи покладаєтесь на волю богів та швидкий інтернет у юзера?

@babichdev

Товариство, хочу вам нагадати, що триває збір на Mavic для 184 навчального центру.

І ще хочу нагадати, що Росія — кончена країна кончених людей. Якщо, звичайно, вам не вистачає її власних нагадувань.

Дякую за кожну гривню.

***
На Mavic для 184 навчального центру

🎯 Ціль: 80 000 ₴

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

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

Доступність, семантика, дизайн-системи: існують.
В той же час Threads:

Опитування!

Tailwind — ви за чи проти?

Голосуйте донатами та вказуйте в примітках на чиїй ви стороні. Один голос — 5 гривень.
Завтра спробую підбити підсумки.

https://send.monobank.ua/jar/AeXQ6YRf2X

P.S. Донати йдуть на збір на Mavic для 184 навчального центру.

Ох, вже ті новачки з шилом в дупі!

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

Це нормально. Нам краще в комфортних умовах, і для нової людини комфортні умови це саме ті, в яких вона працювала раніше. І абсолютно природнім для неї буде спробувати відтворити ці умови на новому місці, аби мінімізувати стрес від переходу, від адаптації до нових порядків. Бо якщо натомість завести свої порядки, то й адаптуватися не треба.

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

По-перше, в команді має бути нормальний онбординг. Я не говорю зараз про те, коли вам видають ноутбук, пароль до корпоративної пошти і роблять один дзвінок з HR на пів години на тему "шо ти голова".

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

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

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

Команда теж має бути відкрита до таких пропозицій. Не варто будувати робочі процеси за принципом "мій дід надвір ходив, то й ми будем". Якщо ви не хочете бути завалені "законодавчим спамом", визначте чіткі правила для таких випадків: який формат пропозала, яка аргументація, за і проти. І розглядайте не для галочки, а дійсно сприймайте це як потенційні покращення.

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

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

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

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

@babichdev

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

@babichdevchat

Долучайтеся.

Співбесіда з трейні наживо вже за кілька хвилин!
Готуйте пиво, чай, чи що кому до смаку і гайда до перегляду!
https://youtube.com/live/nRf43EVT2Ow

Що ж, за підсумками учорашньої співбесіди було прийнято рішення зробити рубрику "Бабіч знов спозоривсь на ютубі" регулярною, і вже в понеділок чекайте на детальний розбір теми "Приведення типів та оператор + в JavaScript "

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

Коли ми використовуємо + з числовими типами, він поводиться рівно так, як ми й очікуємо ще зі школи — додає два значення, продукує суму. Є, щоправда, маленький нюанс з BigInt, той занадто гордий, аби товаришувати з іншими типами і займається арифметикою лише з іншими BigInt.

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

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

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

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

{} + 1 // 1
1 + {} // 1[object Object]

Виглядає цілком переконливо. Але є нюанс. {} на першому рядочку не сприймається інтерпретатором як літерал обʼєкта. Знаходячись на початку рядка, {} сприймається як пустий блок коду. І в цьому випадку вираз перетворюється на + 1, що й дає в результаті одиницю.

Якщо ж ви цей же вираз присвоїте змінній, усе встане на свої місця:

let x  = {} + 1 // [object Object]1

Поки ви геть не заплутались, хто кому куди плюсує, втуліть вподобайку цьому допису, не зволікайте

А що це за вираз такий + 1, і чому він валідний? Все просто — в такому записі оператор + робить ще одне перевтілення, і стає унарним плюсом. В такій іпостасі оператор намагається перетворити операнд на число. З перемінним успіхом, звичайно, якщо ваш рядок не є репрезентацією числа. І тут би пасувало глибше розібратися, що таке ця "репрезентація числа", але мені б хотілося, аби для вас це зробили більш глибоко обізнані в цій темі люди.

Я ж просто познайомлю вас з цим дивовижним явищем. Отже, перше поверхневе припущення може звучати так: "Рядок може бути приведеним до числа, якщо він містить лише цифри, ʼ+ʼ, ʼ-ʼ і десятковий роздільник, та не містить літер". Логічно.

+"1000" // 1000
+"43.5" // 43.5

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

+"0x10" // Шістандцяткове 16
+"0b1010";  // Двійкове 10
+"0o16" // Вісімкове 14
+"10e2" // Науковий запис 1_000
// але 
+"1n" // NaN, хоча 1n це BigInt

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

Ви помітили, що при початку пояснення унарного плюса я в прикладі написав пробіл після плюса, а потім вже ні? Так от, обидва записи рівноцінні: "+ 1" і "+1".

І саме цю особливість використовують в іншому прикладі "сМіШнОгО jS", створюючи банан з допомогою барана:

("b" + "a" + + "a" + "a").toLowerCase()
> "banana"

Причина криється саме в поведінці оператора +, а саме в цьому фрагменті: + + "a". Хоч він і записується з пробілом, але обробляється ось так: + +"a", де вже унарний плюс спробує привести рядок "a" до числа, в чому зазнає невдачі і поверне той самий NaN.

Вираз тепер набуде виду "b" + "a" + "NaN" + "a" і спокійнісінько конкатенується в baNaNa, який потім майстерно приховають з .toLowerCase.

Ну і хто тепер баpнан, ненависники JavaScript, га?

Товариство, а ви як, дивуєтесь плюсу, чи знаєте усі його нюанси назубок? ;)

@babichdev

#коштозбір
Товариство, яка ситуація з мавіком для 184 навчального центру — завтра ми вносимо заставу в 1 000$, і матимемо два тижні, аби дозібрати та внести ще 850$.

А тепер увага, чому цей мавік суперважливий.

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

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

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

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

Цьом вам у лобіка.

Товариство, знову завтра у Львові здибанка!
Приходьте від 19 години до пабу "Горобець", що за адресою Театральна 23, та й поспілкуємось!

Беріть з собою хороший настрій, друзів та колег.

До зустрічі!

https://news.1rj.ru/str/it_lampa/14

Пропоную наступний челендж:
1. Прочитати статтю: https://blog.logrocket.com/css-if-function-conditional-styling.
2. Охрініти.
3. Вихрінити.
4. Задонатити кілька гривень на Mavic для 184 навчального центру.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вчіться читати чужий код. Не просто очима, а пропускати його через фільтри недовіри, сумнівів, скепсису та власної технічної і не тільки експертизи. І тоді ніякий ШІ нікого не замінить.

До речі, а ви що думаєте з цього приводу?

@babichdev

Товариство, вітаю вас з початком нового тижня, а себе — з початком відпустки.

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

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

З прекрасним настроєм
Цьом вам у лобіка.

Ваш Бабіч.

З днем народження мене! Ну а шо, без мене цього каналу б не було )
Надзвичайно вдячний долі, що маю нагоду святкувати своє 38-річчя, та ще й в такій достойній компанії!

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

Тож дякую вам за вас, товариство, і прямую стрімголов в новий рік життя! Побачимо, на які здобутки він нас із вами надихне ;)

Якщо ж ви відчуваєте бажання привітати мене зі святом, ви можете зробити це донатом на Mavic 3 для 184 навчального центру. Можна 38 гривень, можна 12, можна 8, можна 1208, можна 1987, можна й 2025 ) Буду вдячний за кожну гривню!

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

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