Розробка третьої хвилі

Окрім веб розробки, я ще захоплююсь мікроконтролерами. Хоча не можу похвалитися глибокими знаннями в цій сфері, мені вдалося зробити кілька ламп із керуванням через Apple HomeKit. Завжди використовую ESP32 – це мікроконтролер із вбудованим Bluetooth та Wi-Fi. Він швидкий, відносно простий у використанні, але має величезний потенціал. Можливо Ви вже його використовуєте в якиось зі своїх приладів, наприклад 3D принтер Bambulab. 📖 Нещодавно натрапив на велику статтю, де автор “хакнув” пристрій на базі ESP32, щоб інтегрувати його в Home Assistant. 🤯 Стаття справді вражає! Рівень знань, необхідний для цієї роботи, колосальний, і автор чітко пояснює всі нюанси з наочними прикладами. ⚡ Без спойлерів, але рекомендую до вечірнього читання! Як мінімум, для загального розвитку.

🚀 За AI важче встежити, ніж за новими фреймворками! Якщо ви працюєте з розробкою, то абревіатура MCP вам точно траплялась на очі. 🧠 Що таке MCP (Model Context Protocol)? Компанія Anthropic, яка стоїть за моделлю Claude, кілька місяців тому випустила у відкритий доступ MCP – фактичний стандарт інтеграції LLM у продукти. А зараз кількість інтеграцій набрала шалених обертів. 📌 Простими словами: MCP дозволяє конвертувати текстові запити користувачів у конкретні дії та повертати відповідь у потрібному форматі. 🔗 Як це працює? 💡 У MCP є три основні компоненти: MCP клієнт – вхідна та вихідна точка для користувача (як API). MCP сервер – обробляє промпти та виконує запити. Інструменти – ресурси, до яких сервер має доступ (наприклад, Slack, база даних тощо). 🎥 Додаю коротке відео з мінімальним прикладом. Навіть без знання англійської все зрозуміло з коду та промптів! 🚀 (зображення: Matt Pocock)

🚀 Ще один український open-source проєкт, який варто зацінити! Нещодавно помітив у Twitter Валерія Стрільця, українського розробника, який активно контриб’ютить в open-source. Приємно бачити, як усе більше наших співвітчизників створюють круті продукти! 💡 Сьогодні поділюся одним із його проєктів – Permix. 🔑 Permix – це менеджер прав доступу, який працює з будь-яким фреймворком, як на клієнті, так і на сервері. API виглядає зручним та очевидним, а автор обіцяє гарну типізацію. 🔥 Виглядає як чудова альтернатива купі if/else блоків у коді. Я ще не використовував його в продакшені, але документація виглядає солідно. Тож якщо шукаєте зручний спосіб керувати правами доступу – спробуйте Permix! 💪

🔥 Топовий блог про CSS, який варто читати! Кілька років тому випадково натрапив на Josh Comeau, розробника з Канади, і підсів на його технічний блог. В основному він пише про CSS, але на такому рівні якості, що важко відірватися. 🎯 Рекомендую глянути його статтю про CSS Container Query – як завжди, там купа інтерактивних прикладів, які суттєво покращують розуміння матеріалу. А ще можна одразу підглянути код на живих прикладах! 📚 Крім блогу, у Josh є безкоштовна книга та кілька платних курсів. 🇺🇦 Окремий плюс – автор публічно підтримує Україну. Щоправда, нещодавно він пішов із Twitter на Bluesky, тож слідкую трохи менше. Вартий уваги контент – обов’язково зацініть! 🚀

🔥 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!

🔺 У компанії-трикутника знову проблеми! Цього разу – вразливість CWE-285 (Improper Authorization), пов’язана з їхнім middleware. Тред: https://x.com/javasquip/status/1903480443158298994 💥 Vercel знали про проблему у Next.js щонайменше 5 днів, але мовчали й виправили її тихо, без попередження спільноти. Через це інші платформи, зокрема Cloudflare та Netlify, змушені були екстрено реагувати, хоча могли б підготуватися заздалегідь. Така непрозорість підриває довіру до Next.js і ставить під загрозу користувачів, які навіть не знали, що їхні додатки були вразливі. 💬 У коментарях, звісно, є відповіді від представників Vercel, але це не дуже згладжує ситуацію. 📈 Все більше людей хочуть мігрувати з Vercel на інші платформи, зокрема Cloudflare – навіть з’явилися скрипти для автоматичної міграції. ⚡ Біжіть онолювати свої проєкти!

🖌 Деталізована стаття про CSS Relative Colors – як вони працюють і чому варто ними користуватися (як мінімум для покращення a11y). 📊 Інтерактивні приклади + детальний опис – що ще потрібно для розуміння? Якщо ви часом помічали oklch у CSS, ця стаття теж пояснює, що це таке і навіщо воно вам. 🎨✨

Завжди вражає, як швидко розвивається React Native. 🚀 Колись Meta хвалилася, що частина Instagram зроблена на ньому, але працювало це не завжди ідеально. 😅 А зараз з’являється все більше крутих пакетів, які дозволяють робити 120 FPS анімації, складні жести та багато іншого. До вашої уваги – набір готових анімацій для вашого проєкту, але за вагому плату: 👉 Animate React Native 🎬✨

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

Сьогодні знову про Canvas, але в доволі цікавому виконанні. 🎨🖱️ Cursify – бібліотека з готовими шматками коду для стилізації курсору, яких я ще ніколи не бачив. Відверто, витратив набагато більше часу, ніж планував, граючись із різними ефектами. 😄 Ідея проста: прозорий Canvas поверх сторінки, трекання позиції курсору й застосування різних 2D-ефектів. А весь код відкритий – копіюй та користуйся! 🚀

Користувались Postgres на бекенді? Круто! 🚀 А чули про його порт для браузера? PGlite – це WebAssembly (WASM)-порт Postgres для вебу від ElectricSQL, ще одного Sync Engine. 🔄 Його основне призначення – працювати з частковою реплікою бази даних у браузері, яка потім синхронізується з основною на сервері. Але PGlite можна використовувати і без компоненти синхронізації! ⚡

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

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

Solito – мрія веб-розробника з амбіціями в native чи черговий фреймворк із завищеними очікуваннями? 🤔 Давайте розглянемо цю бібліотеку, яка обіцяє легку інтеграцію Next.js проєкту в React Native. На мій погляд, це цікаве рішення, яке має право на існування. Хоча я завжди скептично ставлюсь до підходів, що одночасно намагаються працювати і для web, і для мобільних застосунків (привіт, Flutter Web 👋), цього разу мені хочеться вірити. Автор бібліотеки каже, що якщо у вас є Next.js проєкт, то немає жодних причин не спробувати Solito. А для стилів вже можна використати NativeWind, про який я раніше писав. 🎨🔥

Нещодавно я вирішив трохи освіжити свої навички в React Native після тривалої паузи й усвідомив, наскільки звик до зручності веб-інструментів. Tailwind, на мою думку, неймовірно ефективний, особливо в комбінації з CVA/SVA бібліотеками. На щастя, багато з цих рішень вже адаптуються під React Native, зокрема NativeWind – інструмент для використання Tailwind у RN. 🎨📱 Майже все, що обіцяє NativeWind, працює відразу 🚀, і лише деякі моменти можуть здатися неочевидними при переході з web на RN. У комбінації з CVA Tailwind Variants було легко налаштувати потрібні інтерфейси, тому можу рекомендувати! ✅

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

У цьому відео один із розробників Automerge, Martin Kleppmann, розповідає про проблеми з CRDT (Conflict-free Replicated Data Types). Я нещодавно трохи зачіпав цю тему, але більше можна дізнатися тут. Кожен приклад у відео чудово проілюстрований 🎨, що робить пояснення дуже наочним. А проблем у CRDT чимало—деякі з них досі не вирішені. Я переглянув цей запис, бо знову почав цікавитися цією темою й маю певний інтерес випробувати Automerge, який, схоже, є одним із найпередовіших алгоритмів для CRDT. Також подивився інші презентації Мартіна—і це дуже мотивує, адже він дійсно вміє пояснювати складні речі простими словами. Рекомендую до перегляду! ✅ Навіть якщо ви не плануєте працювати з CRDT, це точно буде цікаво.

🎨 Blendy — UI-бібліотека для анімованих переходів елементів. Популярний патерн із мобільної розробки нарешті отримав цікаве рішення для вебу. ⚙️ Рішення не є фреймворк-залежним, частина API побудована на data-* атрибутах, що мінімізує конфлікти із сторонніми бібліотеками. 🤔 Спробували б таке у своєму проекті?

Крута стаття від одного з контриб'юторів Expo, де він описує створення власного Flex Layout рушія для Canvas! 🚀🎨 Багатьом відомо, що Facebook має власний рушій для React Native — Yoga, основна частина якого написана на C++. Автор намагається частково повторити базові елементи цього рушія та детально пояснює: 📌 Як усе працює 🌳 Якою буде структура дерева елементів 🔄 Як відбувається проходження по дереву та рендер у Canvas 🔥 Імплементація виконана на TypeScript. Якщо вам цікава ця тема — дуже рекомендую до прочитання! 📖💡 До речі, автор, Томаш, підтримує Україну!

🎨 Часто при створенні темплейту сервісу потрібно хоча б приблизно підібрати кольорову схему. 🔍 Поділюся з вами двома цікавими сервісами: - 🌈 realtimecolors.com - 🎨 uicolors.app ✨ Головна перевага — можливість миттєво побачити, як виглядатиме сторінка з обраною кольоровою схемою. Перший сервіс дещо зручніший: має різноманітні формати експорту кольорів, функцію рандомізації та детальну документацію. ⚠️ Єдиний недолік — поки що немає підтримки експорту для Tailwind v4.