#партнерський_допис
Товариство, запрошую вас цієї пʼятниці, 18 вересня, на найкулуарнішу конфу України — Party Hard #12.
Цього року конфа буде про стартапи, ШІ, продукти, найм та, звичайно ж — про спілкування. Нетворкінг на цій конфі просто шальоний.

Особисто я теж дуже-дуже постараюсь там бути, бо пора б вибратись зі свого лісу і вийти до людей.

Я прям дуже рекомендую відвідати Party Hard, тим паче маю для вас знижку у 7%.

Деталі події за посиланням:
https://yoy.events/lviv-12-promo-babich

Оце я, канєшна, провтикав.
Конфа завтра, 19 вересня.
Ще встигаєте взяти квиточок.

Який ШІ найкращий для навчання?

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

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

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

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

І я навмисно кажу "інформації", а не знань, бо знання — це коли ви знаєте і вмієте застосувати те, що дізналися.

І тут неважливо, що у вас — ChatGPT, Perplexity, Claude чи ще якась китайська модель. Важливо те, що ви з нею робите.

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

Особисто я активно використовую ШІ для пошуку нової інформації — від нових рецептів і білдів в Diablo IV до абсолютно нових для себе проблем в розробці, програмуванні чи якихось інших професійних аспектах. Про самі підходи до того, яку інформацію шукати, і як навчитись їй не довіряти — це, певно, тема для двогодинного монологу.

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

До речі, один приклад я таки наведу. На так давно я почав активно працювати над Python задачами на проєкті, проте сам Python я знаю на рівні "ну, це пайтон, ну, я плюс-мінус здатний осягнути що тут написано". Але далеко не на 100%. І от коли я зустрічав в згенерованому коді не зовсім зрозумілі фрагменти, я часто просив ШІ пояснити їх мені на прикладі JavaScript. Тобто я брав конкретну необізнаність і накладав її на свою обізнаність. І це було прям дуже помічне.

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

В першу чергу вчіться вчитися.

***
До речі, нагадую, що збір на авто для 21 ОМБр нікуди не дівся, тож буду дуже вдячний за кожну вашу гривню.

🔗 send.monobank.ua/jar/AeXQ6YRf2X
💳 5375411202918178

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

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

На ділі що setTimeout, що setInterval не виконують ваш код через заданий проміжок часу. Вони ставлять його в чергу. Це суттєва різниця. Тобто це не "виконай через точно 1000ms", а радше "я тут вам задачку залишив, запусти за нагоди, але не раніше ніж 1000ms". Це якщо прям дуже приблизно. Я не буду вдаватися в деталі, там вам і улюблений event loop, і черги, і так звана однопоточність.

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

Перше, що прийде нам в голову для такого лічильника, — запустити setInterval:

setInterval(() => doMagic(), 1000);

Це найнаївніший спосіб. setInterval намагається запускати callback із заданою періодичністю, але не гарантує момент його фактичного виконання. Якщо main thread зайнятий, виклик відбудеться пізніше. Якщо ж ми просто робимо seconds++, то починаємо вимірювати не час, а кількість викликів — і рано чи пізно ці дві величини можуть розійтися.

Кращим підходом буде запускати лічильник, коли попередня ітерація точно відпрацювала. Але просто переробляти на рекурсивний setTimeout не треба, бо він так само накопичуватиме затримку:

const tick = () => {
  …
  setTimeout(() => tick(), 1000);
}
tick();

Краще розраховувати наступний таймаут як залишок до бажаного моменту в майбутньому:

let next = performance.now() + 1000;
const tick = () => {
  next += 1000;

  const delay = Math.max(0, next - performance.now());
  setTimeout(tick, delay);
}
setTimeout(tick, 1000);

Оцей delay буде трошки менше за 1000ms, бо враховує похибку попередньої ітерації.

Це працює в ідеальних умовах, коли основний потік нічим суттєво не зайнятий. Але setTimeout не гарантує, що callback виконається саме в заданий момент. Якщо main thread зайнятий JavaScript, layout, rendering чи іншою роботою, callback чекатиме. Якщо потік буде заблокований більше секунди, ми можемо взагалі проскочити момент оновлення інтерфейсу.

А оскільки нам зрештою треба не просто щось порахувати, а намалювати нове значення, можна передати останній крок requestAnimationFrame. Він не робить таймер точнішим і не обходить заблокований main thread — він просить браузер виконати оновлення перед наступним repaint.

let next = performance.now() + 1000;

const tick = () => {
  console.log('tick');

  next += 1000;

  const delay = Math.max(0, next - performance.now());
  setTimeout(() => requestAnimationFrame(tick), delay);
};

setTimeout(() => requestAnimationFrame(tick), 1000);

Тут requestAnimationFrame розвʼязує не проблему точності, а іншу: якщо результат треба показати користувачу, ми можемо синхронізувати DOM-update з наступним кадром браузера. Аби не перескакувати секунди, варто ще знати, скільки часу пройшло з останнього виконання:

let previous = performance.now();
let seconds = 0;

const tick = (now) => {
  // Ось тут визначаємо, скільки реально минуло секунд
  // і на скільки нам треба "стрибнути" вперед
  const elapsed = now - previous;
  previous = now;
  seconds += elapsed / 1000;
  …
  setTimeout(() => requestAnimationFrame(tick), 1000);
};

requestAnimationFrame(tick);

Такий підхід дозволяє максимально точно рахувати "тіки". Але є одне але, якого ну ніяк не уникнути — якщо ваш UI таки важкий, то іноді лічильник буде прострибувати значення не через рівні проміжки часу, наприклад 0.5с > 1с > 3с. Але при цьому показуватиме точний час. Це вимушений трейдоф через завантажений основний потік. Але це вже проблема не лічильника, а ваша — бо чого це у вас така важка сторінка, га?

Що почитати:
MDN — setTimeout()
MDN — requestAnimationFrame()

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

---

Збір на авто для 21 ОМБр триває, зібрано 22 200грн з необхідних 271 500грн.

🔗 send.monobank.ua/jar/AeXQ6YRf2X
💳 5375411202918178

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


Збір на авто для 21 ОМБр триває, зібрано 22 524грн з необхідних 271 500грн.

🔗 send.monobank.ua/jar/AeXQ6YRf2X
💳 5375411202918178

#збір_на_авто_для_21
Товариство, почнімо тиждень з доброго діла.

Я би дуже хотів, аби ми цього тижня змогли довести суму хоча б до 45 000, аби віддати бодай 1к$ за авто для 21 ОМБр. Тому кожна, буквально кожна гривня надзвичайно важлива.

Зібрано 22 625 з 271 500 грн

🔗 send.monobank.ua/jar/AeXQ6YRf2X
💳 5375411202918178

Товариство, запрошую вас цієї суботи, 3 жовтня, на Fwdays Tech Summit — онлайн конференцію про те, як стягувати це життя в епоху ШІ.

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

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

– Олександр Савченко (Мінцифра) розповість про інфру та безпеку для мільйонів.
– Олександр Денисюк (Укрпошта) поділиться досвідом переходу архітектури на 24/7.
– Ілля Клімов (GitLab) рознесе хайпові графи і self-improving loops.
– В’ячеслав Колдовський (Dev AI) прийде до вас із мануалом по Agentic Software Factories.

🎟 Квитки тут: https://bit.ly/47p9Nrt
Промокод для своїх на знижку 15% – 0B522A86D8

Так, товариство, важлива заява.

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

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

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

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

***
А поки нагадаю вам про збірна авто для 21 ОМБр, який рухається ще повільніше, ніж мій пошук роботи.

Зібрано 26 100 з 271 500 грн

🔗 send.monobank.ua/jar/AeXQ6YRf2X
💳 5375411202918178

Вітаю товариство! Написав новий допис на Лінкедині, попрошу трошки вашого активу і душнільства в коментарях )

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

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

***
А поки нагадаю вам про збір на авто для 21 ОМБр, який рухається ще повільніше, ніж мій пошук роботи.

Зібрано 29 200 з 271 500 грн

🔗 send.monobank.ua/jar/AeXQ6YRf2X
💳 5375411202918178

Товариство, хто має час і бажання побути глядачами запису наступного випуску "Вайбкод ревʼю", то ми його пишем вже )
Заходьте на стрим!

https://riverside.com/studio/-s-studio-3uCyp

Товариство, це вам!

Військові з 21 ОМБр щиро дякують вам за авто, яке вже виконує свої бойові задачі!

А нам лишилося лише закрити збір за це авто.
Зібрано 30 000 з 271 500 грн

🔗 send.monobank.ua/jar/AeXQ6YRf2X
💳 5375411202918178

ДЯкую за кожну гривню!

Я тут трохи від нудьги вирішив залізти в мобільну розробку, і почав колупати React Native.

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

До речі, дуже класний проєкт для того, щоб не дати собі отупіти з ШІшкою — я просто час від часу ручками рефакторю після Жан Клода, десь компонент перепишу, десь новий зроблю, десь оптимізую. Воно корисно і для розібратися з самим React Native, і пальці з мізками добре розминає.

У мене типу 50/50 вайбкодинг, бо це PoC, нема часу і бажання налаштовувати повноцінний SDLC, але як хомʼячок для вивчення — чудово працює. Бо воно шось там крутить, генерірує, а я потім читаю і питаю — "А це шо таке? А оце? А чому тут так? ДЕ ҐРІДИ, Я ТЕБЕ ПИТАЮ?!". В загальному підхід до опанування робочий, бо постійно є до чого доколупаться.

Ну а якшо все з цим PoC вийде, як я собі уявляю, крутячись у ліжку — це буде мегабімба. Але то поки мрії…

Це не трекер калорій, якшо шо.

***
На авто для 21 ОМБр зібрано 32 650 з 271 500 грн

🔗 send.monobank.ua/jar/AeXQ6YRf2X
💳 5375411202918178

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

Товариство, попрошу знову трошки вашої активності на Лінкедині. Подушніть там, розкажіть шо я неправий і вопше )

А ще нагадую про збір на авто для 21 ОМБр. Він вкляк намертво. Давайте якось хоча б до 50 000 до понеділка добʼєм, чи шо. Бо у мене враження, що я роботу знайду швидше, ніж ми той збір закриєм.

Зібрано 32 830 з 271 500 грн

🔗 send.monobank.ua/jar/AeXQ6YRf2X
💳 5375411202918178

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

"…Орієнтовно процес триватиме щонайменше протягом листопада…"

…а в 2015 я за один тиждень отримав три офери…

Піду покричу на хмари, чи шо.

P.S. Єслі шо, цей процес триває місяць вже.

Доброго ранку, товариство!
Знову запрошую вас трохи полайкати і покоментити під моїм черговим дописом в Лінкедині.

А ще нагадую про збір на авто для 21 ОМБр. На який від пʼятниці ми зібрали аж цілих нуль гривень!
Давайте тако, якщо до вечора накидаєте 5к, то я запощу той допис тут в розширеній версії, а якщо 10к — то завтра ще понию про співбесіди і несправедливе життя з пошуком роботи.

Наразі зібрано 32 830 з 271 500 грн

🔗 send.monobank.ua/jar/AeXQ6YRf2X
💳 5375411202918178

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

В чому різниця між фанатами ігор серії Elder Scrolls і веброзробниками?

Ми бавимось з ES6 з 2015 року.

ЗБІР НА АВТО ДЛЯ 21 ОМБР

Наразі зібрано 33 560 з 271 500 грн

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

🔗 send.monobank.ua/jar/AeXQ6YRf2X
💳 5375411202918178

ДЯКУЮ ЗА КОЖНУ ГРИВНЮ!

#я_не_знаю_html
Пора нарешті розібратися з тим, чому p вичавлює з себе div, а головне — що ніхто нікого нікуди не вичавлює.

Одна з моїх "улюблених" поведінок HTML — це коли в .html файлі написано

<p>Hello,<div> </div>world</p>

а в DOM чомусь раптом зʼявляється ось таке:

<p>Hello,</p>
<div> </div>
world
<p></p>

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

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

Для бравзера при обробці HTML розмітки не існує такого поняття як "div всередині p". Усе, що він бачить, це наступний відкривальний тег, і якщо цей тег входить до "чорного списку", то бравзер автоматично закриє p. І це пояснює, чому раптом div "випадає" з параграфа:

<p>Hello,</p>
<div> </div>

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

"А чому ж тоді не загорнути в <p></p> весь текст, що йде після <div>?" спитаєте ви. Бо бравзер не знає про існування того бродячого </p> поки не натикнеться на нього. А повертатися назад і вгадувати, що саме мав на увазі автор, він не буде. Характер Алгоритм такий. Тому й world буде створено як звичайнісіньку текстову ноду в DOM, бо отакий от наступний токен для бравзера.

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

Усе це може виникнути через те, що реальна структура в DOM буде відрізнятися від написаного HTML. І так, блочність в розумінні CSS тут абсолютно ні до чого. Бо, нагадую, це перетворення відбувається під час побудови DOM-дерева з HTML-коду. Тому якщо ви навіть задасте вашому div display: inline, це не спрацює, бо на цьому етапі до render-tree ще як до неба рачки. Так само, якщо дати span display: block, його не "виштовхне".

А от що цікаво, так це те, що ми спокійно можемо вставити div в p за допомогою DOM API. Ось це спрацює і ніхто оком не змигне:

p.append(document.createElement('div'));

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

Що почитати:
Inside look at modern web browser (part 3)

Що почитати душнілам:
HTML Living Standard: The "in body" insertion mode

@babichdev