Крута стаття від одного з контриб'юторів Expo, де він описує створення власного Flex Layout рушія для Canvas! 🚀🎨

Багатьом відомо, що Facebook має власний рушій для React Native — Yoga, основна частина якого написана на C++. Автор намагається частково повторити базові елементи цього рушія та детально пояснює:

📌 Як усе працює
🌳 Якою буде структура дерева елементів
🔄 Як відбувається проходження по дереву та рендер у Canvas

🔥 Імплементація виконана на TypeScript.

Якщо вам цікава ця тема — дуже рекомендую до прочитання! 📖💡

До речі, автор, Томаш, підтримує Україну!

🎨 Blendy — UI-бібліотека для анімованих переходів елементів. Популярний патерн із мобільної розробки нарешті отримав цікаве рішення для вебу.

⚙️ Рішення не є фреймворк-залежним, частина API побудована на data-* атрибутах, що мінімізує конфлікти із сторонніми бібліотеками.

🤔 Спробували б таке у своєму проекті?

У цьому відео один із розробників Automerge, Martin Kleppmann, розповідає про проблеми з CRDT (Conflict-free Replicated Data Types). Я нещодавно трохи зачіпав цю тему, але більше можна дізнатися тут.

Кожен приклад у відео чудово проілюстрований 🎨, що робить пояснення дуже наочним. А проблем у CRDT чимало—деякі з них досі не вирішені.

Я переглянув цей запис, бо знову почав цікавитися цією темою й маю певний інтерес випробувати Automerge, який, схоже, є одним із найпередовіших алгоритмів для CRDT. Також подивився інші презентації Мартіна—і це дуже мотивує, адже він дійсно вміє пояснювати складні речі простими словами.

Рекомендую до перегляду! ✅ Навіть якщо ви не плануєте працювати з CRDT, це точно буде цікаво.

Минулого тижня нарешті отримав доступ до бета-тесту Notion Mail 📧.

Давно користуюсь Notion 📝, а також календарем Cron 🗓️, який минулого року викупили Notion, і загалом задоволений якістю цих продуктів. Але для пошти використовував Spark (український продукт 🇺🇦) у версії Classic. Це вже трохи застарілий клієнт, тож було цікаво спробувати новий продукт від команди Notion—записався на бета-доступ.

За тиждень користування не встиг випробувати всі функції, але загалом клієнт працює швидко ⚡ і видно, наскільки він схожий із самим Notion. Чого не скажеш про календар, який вони лише трохи адаптували під себе.

Поки не готовий рекомендувати, але спробувати точно варто! ✅

Нещодавно я вирішив трохи освіжити свої навички в React Native після тривалої паузи й усвідомив, наскільки звик до зручності веб-інструментів. Tailwind, на мою думку, неймовірно ефективний, особливо в комбінації з CVA/SVA бібліотеками.

На щастя, багато з цих рішень вже адаптуються під React Native, зокрема NativeWind – інструмент для використання Tailwind у RN. 🎨📱

Майже все, що обіцяє NativeWind, працює відразу 🚀, і лише деякі моменти можуть здатися неочевидними при переході з web на RN.

У комбінації з CVA Tailwind Variants було легко налаштувати потрібні інтерфейси, тому можу рекомендувати! ✅

Solito – мрія веб-розробника з амбіціями в native чи черговий фреймворк із завищеними очікуваннями? 🤔 Давайте розглянемо цю бібліотеку, яка обіцяє легку інтеграцію Next.js проєкту в React Native.

На мій погляд, це цікаве рішення, яке має право на існування. Хоча я завжди скептично ставлюсь до підходів, що одночасно намагаються працювати і для web, і для мобільних застосунків (привіт, Flutter Web 👋), цього разу мені хочеться вірити.

Автор бібліотеки каже, що якщо у вас є Next.js проєкт, то немає жодних причин не спробувати Solito. А для стилів вже можна використати NativeWind, про який я раніше писав. 🎨🔥

Інколи знаходжу в Твіттері цікаві перли, а нещодавно – простий Sync Engine поверх Dexie. 🔄 Як ви могли помітити, ця тема мені особливо цікава.

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

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

Часом цікаво зазирнути на чужі робочі місця 👀, а на 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.

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

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