Не технічний пост.

Часом цікаво зазирнути на чужі робочі місця 👀, а на Workspaces повно крутих сетапів від інших людей. Дивлюсь – і одразу з’являється мотивація покращити свій простір: для продуктивності чи просто, щоб було приємніше працювати. 💻✨

Користувались Postgres на бекенді? Круто! 🚀 А чули про його порт для браузера?

PGlite – це WebAssembly (WASM)-порт Postgres для вебу від ElectricSQL, ще одного Sync Engine. 🔄

Його основне призначення – працювати з частковою реплікою бази даних у браузері, яка потім синхронізується з основною на сервері. Але PGlite можна використовувати і без компоненти синхронізації! ⚡

Сьогодні знову про Canvas, але в доволі цікавому виконанні. 🎨🖱️

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

Ідея проста: прозорий Canvas поверх сторінки, трекання позиції курсору й застосування різних 2D-ефектів. А весь код відкритий – копіюй та користуйся! 🚀

Зараз усе більше працюю з Lexical і навіть підчитую їх Discord, щоб знайти типові рішення задач. Загалом, він мені все більше подобається. ✨

Натрапив на цікаву статтю про те, як Lexical оновлює свій стейт, вираховує зміни й застосовує їх до DOM.

Нагадує, як працює React, чи не так? 🤔🔄

Завжди вражає, як швидко розвивається React Native. 🚀 Колись Meta хвалилася, що частина Instagram зроблена на ньому, але працювало це не завжди ідеально. 😅

А зараз з’являється все більше крутих пакетів, які дозволяють робити 120 FPS анімації, складні жести та багато іншого.

До вашої уваги – набір готових анімацій для вашого проєкту, але за вагому плату:
👉 Animate React Native 🎬✨

🖌 Деталізована стаття про CSS Relative Colors – як вони працюють і чому варто ними користуватися (як мінімум для покращення a11y).

📊 Інтерактивні приклади + детальний опис – що ще потрібно для розуміння?

Якщо ви часом помічали oklch у CSS, ця стаття теж пояснює, що це таке і навіщо воно вам. 🎨✨

🔺 У компанії-трикутника знову проблеми! Цього разу – вразливість CWE-285 (Improper Authorization), пов’язана з їхнім middleware.

Тред: https://x.com/javasquip/status/1903480443158298994

💥 Vercel знали про проблему у Next.js щонайменше 5 днів, але мовчали й виправили її тихо, без попередження спільноти. Через це інші платформи, зокрема Cloudflare та Netlify, змушені були екстрено реагувати, хоча могли б підготуватися заздалегідь. Така непрозорість підриває довіру до Next.js і ставить під загрозу користувачів, які навіть не знали, що їхні додатки були вразливі.

💬 У коментарях, звісно, є відповіді від представників Vercel, але це не дуже згладжує ситуацію.

📈 Все більше людей хочуть мігрувати з Vercel на інші платформи, зокрема Cloudflare – навіть з’явилися скрипти для автоматичної міграції.

⚡ Біжіть онолювати свої проєкти!

🔥 TypeORM, Sequelize... але чи чули ви про Drizzle ORM?

Багато хто знайомий з популярними ORM для роботи з базами даних, але чи звертали ви увагу на Drizzle ORM? Це проєкт, яким можна пишатися 🇺🇦 – його розробляють українці, а визнання вже світове.

https://orm.drizzle.team/

⭐ 25K зірок на GitHub, постійні згадки у Twitter і навіть жарти про те, чому варто користуватися конкурентом – Prisma. А ще 1 мільйон скачувань на день у NPM! 🚀

📈 Це визнання заслужене – Drizzle ORM пропонує:
✅ Високу типізацію
✅ Неінтрузивне API
✅ Максимальну продуктивність

💡 Якщо хочете дізнатися більше, на DOU є стаття про Андрія Шермана, одного з core-розробників Drizzle. Він повернувся в Україну 🇺🇦 зі Швеції під час війни – навіть писав про це у Twitter.

👀 Спробуйте Drizzle!

🔥 Топовий блог про CSS, який варто читати!

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

🎯 Рекомендую глянути його статтю про CSS Container Query – як завжди, там купа інтерактивних прикладів, які суттєво покращують розуміння матеріалу. А ще можна одразу підглянути код на живих прикладах!

📚 Крім блогу, у Josh є безкоштовна книга та кілька платних курсів.

🇺🇦 Окремий плюс – автор публічно підтримує Україну. Щоправда, нещодавно він пішов із Twitter на Bluesky, тож слідкую трохи менше.

Вартий уваги контент – обов’язково зацініть! 🚀

🚀 Ще один український open-source проєкт, який варто зацінити!

Нещодавно помітив у Twitter Валерія Стрільця, українського розробника, який активно контриб’ютить в open-source. Приємно бачити, як усе більше наших співвітчизників створюють круті продукти!

💡 Сьогодні поділюся одним із його проєктів – Permix.

🔑 Permix – це менеджер прав доступу, який працює з будь-яким фреймворком, як на клієнті, так і на сервері. API виглядає зручним та очевидним, а автор обіцяє гарну типізацію.

🔥 Виглядає як чудова альтернатива купі if/else блоків у коді.

Я ще не використовував його в продакшені, але документація виглядає солідно. Тож якщо шукаєте зручний спосіб керувати правами доступу – спробуйте Permix! 💪

🚀 За AI важче встежити, ніж за новими фреймворками!

Якщо ви працюєте з розробкою, то абревіатура MCP вам точно траплялась на очі.

🧠 Що таке MCP (Model Context Protocol)?
Компанія Anthropic, яка стоїть за моделлю Claude, кілька місяців тому випустила у відкритий доступ MCP – фактичний стандарт інтеграції LLM у продукти. А зараз кількість інтеграцій набрала шалених обертів.

📌 Простими словами:
MCP дозволяє конвертувати текстові запити користувачів у конкретні дії та повертати відповідь у потрібному форматі.

🔗 Як це працює?
💡 У MCP є три основні компоненти:

MCP клієнт – вхідна та вихідна точка для користувача (як API).

MCP сервер – обробляє промпти та виконує запити.

Інструменти – ресурси, до яких сервер має доступ (наприклад, Slack, база даних тощо).

🎥 Додаю коротке відео з мінімальним прикладом. Навіть без знання англійської все зрозуміло з коду та промптів! 🚀

(зображення: Matt Pocock)

Окрім веб розробки, я ще захоплююсь мікроконтролерами.

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

Завжди використовую ESP32 – це мікроконтролер із вбудованим Bluetooth та Wi-Fi. Він швидкий, відносно простий у використанні, але має величезний потенціал. Можливо Ви вже його використовуєте в якиось зі своїх приладів, наприклад 3D принтер Bambulab.

📖 Нещодавно натрапив на велику статтю, де автор “хакнув” пристрій на базі ESP32, щоб інтегрувати його в Home Assistant.

🤯 Стаття справді вражає!
Рівень знань, необхідний для цієї роботи, колосальний, і автор чітко пояснює всі нюанси з наочними прикладами.

⚡ Без спойлерів, але рекомендую до вечірнього читання! Як мінімум, для загального розвитку.

🔥 Гарячий пиріжок у твіттері сьогодні – Silk!

Про нього вже написав автор Tailwind, також підтримку висловили автори Parcel, React Aria та інші відомі розробники.

🤔 Що таке Silk?
Це набір компонентів для sheet-style модалок. Одразу варто зазначити – продукт комерційний (потрібно платити 💸), але безкоштовний для некомерційного використання.

Мені дуже сподобався "Speet with Depth" – ефект, схожий на iOS. Виглядає гладко, ніби не підвисає, і видно, що автор вклав багато зусиль у доведення деталей до ідеалу.
А от документація в Notion, на мою думку, не найкраща ідея.

https://silkhq.co/

🎉 Нарешті! Стилізація Select у Chrome 135 🎉

Починаєш новий проєкт, накидуєш компоненти – все гаразд. Але коли доходить до Select, починаються проблеми. Знайома ситуація? 🤯

Є купа готових бібліотек, кожна по-своєму вирішує проблему нестилізованого селекта. Розробники вигадували справжні акробатичні трюки, щоб отримати красивий Select із нормальною підтримкою клавіатури, a11y та задоволеними користувачами.

🔥 І ось гарні новини! Команда Chrome дарує нам можливість стилізувати Select – підтримка викочується починаючи з Chrome 135.

А якщо глянути останні демо з відео, то це взагалі фантастика! 🚀

А в коментарях додам приклад ⬇️

Побачив в твіттері прикольний анімований текст. Автор пише що згенерував код з Grok, вийшло непогано.

Код можете знайти тут, а також додаю пост автора.

О, Dan Hollick – це прям знахідка для тих, хто любить візуально зрозумілі та круто оформлені технічні статті! 🎨

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

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

📖 Стаття коротка, проста, написана зрозумілою мовою. Навіть Google Translate впорається, якщо потрібно.

Якщо тобі цікаві графіка, візуальні ефекти або просто хочеш розширити кругозір – точно варто зацінити! 🚀

Декілька місяців тому натрапив на класну рекомендацію на YouTube — канал Core Dumped, де автор розповідає про роботу комп’ютера на рівні, близькому до апаратної частини.

Якщо ви навчалися на спеціальностях, де ці теми розглядалися, то канал допоможе пригадати матеріал. Але навіть якщо ви з цим не стикалися і почали з високорівневих мов — не біда! Усі відео автора містять вичерпні, анімовані ілюстрації 🎥.

Одне з відео, яке мені найбільше запам’яталося, — це пояснення, чому потрібні потоки, навіть якщо процесор має лише одне ядро. У ньому ви краще зрозумієте, що таке Concurrency (це загалом корисно знати 😉), як потоки ділять ресурси, хто їх переключає і контролює. А також — отримаєте прикладні ситуації, які допоможуть легше це усвідомити.

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

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

Тому сьогодні поділюся, увага, україномовним відео (і каналом) на цю тему! Лабораторія Самостійності — відносно невеликий канал, проте його контент дуже корисний, особливо для новачків.

https://www.youtube.com/watch?v=00xUYc4L0As

Додаю відео про той самий ESP32, але на каналі ви можете знайти й інші цікаві матеріали. А ще вони проводять стріми 🎙️ — інколи слухаю на фоні й теж дізнаюся щось нове!

Я думав, що всі вже це знають, але практика показала зворотне.

На GitHub можна відкрити будь-який репозиторій, натиснути клавішу крапки (.) (на macOS і, напевно, на Windows теж) — і репозиторій відкриється у вбудованому VS Code!

Постійно користуюся цим, коли потрібно розібратися, як працює якась бібліотека всередині. Ультразручно 🤩.

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

Знали про цю фічу? 😉

Airbnb опублікували статтю про міграцію ~3500 тестів з Enzyme на React Testing Library за допомогою LLM. Ручна міграція зайняла б півтора року, автоматизація скоротила її до шести тижнів.

Це вражає 🤯, адже Enzyme і RTL мають різну структуру та філософію тестування.

Якщо коротко, Airbnb використали LLM у циклічному процесі:
1️⃣ Виконувалась міграція
2️⃣ Система сама себе валідувала
3️⃣ LLM виправляв знайдені помилки

Цікава ідея, і, схоже, добре спрацювала. Хоча я трохи менше довіряв би таким тестам 🤔.

З власного досвіду: ми теж інколи використовуємо LLM для рефакторингу, зокрема з jscodeshift.

Наприклад, якщо потрібно перенести імпорти, які були локальними, але код мігрував у пакет 📦. Простий пошук не допоможе, бо імпорти можуть бути розбиті між файлами. А jscodeshift усе правильно оновить.

Користуєтесь Storybook? Я — так! 🎨📖

У нас на проєкті багато тестів безпосередньо в Storybook. Там використовується та сама React Testing Library, але тести виконуються всередині сторі з візуальним відображенням.

Ці тести ми також запускаємо в CI, щоб відловити регресії 🐛. Проте чим їх більше, тим важче запускати, бо CI використовує headless-браузер (без інтерфейсу). Навантаження накопичується, і деякі тести починають падати через нестачу ресурсів.

Рішення? Я підглянув його в Playwright, який Storybook використовує під капотом. Тести можна розбивати на шарди (shards) й запускати кілька CI-процесів для рівномірного розподілу навантаження ⚡.

У підсумку всі тести, які запускалися разом, тепер розбиваються на N шардів і виконуються паралельно.

Рішення просте й зручне, але трохи дорожче, якщо не кешувати артефакти типу node_modules 📦.