🎨 Magic Patterns від Jim Raptis — дуже красивий набір інструментів для генерації популярних візерунків як для CSS, так і Canvas із можливістю експорту зображень.

Я неодноразово використовував Mesh Gradient генератор для своїх задач і залишився дуже задоволеним!

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

🎨 Ще один інструмент для Mesh градієнтів - Mesher від CSS Hero.

🎯 Прості та зрозумілі налаштування, можливість редагування градієнту на прев'ю.

✨ Особливість - генерація і експорт CSS стилів. Також можна піти на крок вперед на анімувати градієнт звичними методами CSS.

Багато хто чув про Bluesky — альтернативу Twitter 🐦. Спершу це був проєкт Twitter, який згодом відділився в окрему компанію.

Для React Native розробників буде цікаво заглянути в їх відкритий репозиторій мобільного додатку 📱. В організації також є інші відкриті проєкти, зокрема AT Proto — їхній протокол, який, мабуть, є головною фішкою цього сервісу 🚀.

🎨 Часто при створенні темплейту сервісу потрібно хоча б приблизно підібрати кольорову схему.

🔍 Поділюся з вами двома цікавими сервісами:

- 🌈 realtimecolors.com
- 🎨 uicolors.app

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

Крута стаття від одного з контриб'юторів 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! 💪