Очікувано, в браузерах потрохи більше розширюється АІ функціонал.

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

Відео вкрав тут: https://x.com/BHolmesDev/status/1954179936249376962

Сьогодні приніс вам цікавий приклад прив’язки скролу до відео.

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

Цікаво, бо саме відео рендериться не в плеєрі, а через canvas.

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

https://x.com/konstipaulus/status/1954539977812980030
https://github.com/diffusionstudio/webcodecs-scroll-sync/tree/main

Вдалого тижня, шановні трудоголіки

Інколи відкриваю LinkedIn з цікавості — хтось додається чи пише і тд.

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

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

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

Так, побачив недавно Tauri, але для хейтерів Rust.

MōBrowser — обгортка для побудови десктопних додатків на C++.

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

Але, з цікавого:

1. Продукт платний
2. Виглядає, що це роблять в основному українці.

https://teamdev.com/mobrowser

Сьогодні отримав неочікуваний репост мему на досить великий канал — приємно і мотивує.

А в списку ідей для постів якраз мав статтю на тему з мему.

Vibe code is legacy code. Згодні? Я — так (принаймні поки що). І стаття це гарно аргументує. Бо код, якого ніхто не розуміє, а тим більше автор, стає legacy. Це технічний борг, у якому дуже ймовірно є і баги, і якісь сек’юріті-проблеми, ще щось.

От уявіть, ви прийшли на проєкт, над яким уже хтось добряче попрацював. А там купа коду не найкращої якості. Біля 5 різних рішень для однієї й тієї самої проблеми, декілька бібліотек зі схожим функціоналом і загадкові конструкції. Нууу, таке й без вайб-кодингу зустрінеш інколи. Але як продовжувати підтримувати такий код? Розширювати його важко, бо він складний, сильно зв’язаний між собою, заплутаний. Переписати його теж важко, бо через свою складність можлива втрата функціоналу (не вірю, що на таких проєктах є тести). Ну, коротше, ситуація неприємна. А ще колега, який це написав (ну, типу АІ), кожен раз має інше пояснення свого ж рішення з минулого, бо в нього провали в пам’яті.

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

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

https://blog.val.town/vibe-code

Уф, 300+ підписників на каналі 💅

Дякую, що читаєте!

Хлопці з Drizzle релізнули свіжий пакет, називається Waddler 🦆. Це SQL template тег для простого використання бази даних, хоча можливості виглядають суттєвими.

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

Підіть, покладіть їм зірочку на GitHub!
https://waddler.drizzle.team/

Помітив як цікаво в документації TanStack зроблений зміст (ToC), одразу підсвічує всі секції які видно на екрані.
А якщо зменшити вікно то і звузиться превю на ToC.

Красиво 💅

https://tanstack.com/router/latest/docs/framework/react/overview

Як легко відтворити пікер емоджі (такий як в notion чи slack)

Беремо React Aria (хто не чув, рекоменую глянути, потужна ліба), дивимось в оцей приклад і копіюємо 🧑‍🍳

Тай взагалі, Devon, кор-розробник React Aria часто в твіттері публікує круті штуки, є що підглянути.

Приклад: https://stackblitz.com/edit/react-aria-emoji-picker?file=src%2FEmojiPicker.tsx

Джерело: https://x.com/devongovett/status/1956014690338734479

Ось до чого довели перегляди тіктоків...

Черговий лінтер з’явився на районі. Зустрічайте Rslint. Написаний на, неочікувано, Go.

До чого тут тікток? Бо лінтер релізнула WebInfra — команда в компанії ByteDance, яка стоїть за TikTok.

https://github.com/web-infra-dev/rslint

Обіцяє best effort compatibility з ESLint, працює в монорепо, в першу чергу націлений на TypeScript-код, ну і має бути швидким.

Отже, зараз вже можна вибирати між ESLint, Biome, Oxlint і, може, ще когось забув.

Все, дивіться трохи більше рілсів в інстаграм, може Мета теж якогось лінтера накодить.

Хто ваш дизайнер?

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

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

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

Ну, наприклад, бракує всіх інших стейтів, типу focus, active. Дизайнер накинув лиш один колір кнопки, але ви знаєте, що потрібно мати декілька кольорів. Ну ок, додамо інші кольори і використаємо такий же hue, типу [red-4, blue-4, green-4]. Але знову ж таки, це не завжди працює, бо кольори мають мати правильний контраст. І комбінація red-4 для фону та red-11 для тексту може бути ок, але blue-4 і blue-11 вже може мати недостатній контраст або виглядати всрато.

Короче, приклади тут можна наводити ще довго, а це я лиш про просту кнопку говорив.

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

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

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

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

https://vercel.com/blog/design-engineering-at-vercel

https://blog.jim-nielsen.com/2024/the-case-for-design-engineers-pt-ii/

https://marcel.io/posts/becoming-a-design-engineer

Сьогодні за справами послухав дуже цікавий подкаст про Cloudflare Durable Objects, D1 та воркери від Aaron Francis та Josh Howard.

Aaron має досить якісь формат відео, декілька курсів, включно з SQLite. А Josh працює в Cloudflare і дуже гарно пояснює як в них все працює.

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

https://www.youtube.com/watch?v=C5-741uQPVU

Музична павза

Пісня іноземця про пузату хату, дякую за увагу

https://youtu.be/hxmAh5hGtSE