Zed editor продовжує швидко розвиватись, недавно вони запустили бета-тестування Version control панелі для Git.
Деяких опцій не вистачає, як наприклад diff split screen, але, сподіваюсь, це теж додадуть.
Поки що дуже подобається Zed editor, швидкий і гарний.
Деяких опцій не вистачає, як наприклад diff split screen, але, сподіваюсь, це теж додадуть.
Поки що дуже подобається Zed editor, швидкий і гарний.
👍3
Electron, як найпопулярніше рішення для веб розробки під desktop, має обмеження продуктивності в силу своєї JS природи.
Але на горизонт все більше сходять альтернативи типу Tauri.
Це обгортка для розробки, схожа на Electron, але з бекеном на Rust.
Є можливість використовувати React для UI, присутній набір базових АРІ.
Головні переваги це розбір бандла та акцент на security.
З недоліків, вам доведеться розбиратись в Rust, де поріг входу суттєво вищий ніж в JS.
Але на горизонт все більше сходять альтернативи типу Tauri.
Це обгортка для розробки, схожа на Electron, але з бекеном на Rust.
Є можливість використовувати React для UI, присутній набір базових АРІ.
Головні переваги це розбір бандла та акцент на security.
З недоліків, вам доведеться розбиратись в Rust, де поріг входу суттєво вищий ніж в JS.
👏2
TypeScript чекає суттєве оновлення. Команда в MS опублікувати порт тайпсркипт сервера на Go.
Поки що, без підтримки TSX, але з вражаючим бустом продуктивності.
Виглядає що вибір мови вперся в можливість саме порту а не перепису з нуля, що було б суттєво важче зробити з Rust, для прикладу.
Також, після релізу, вийшов подкаст на цю тему: https://www.youtube.com/watch?v=10qowKUW82U
Поки що, без підтримки TSX, але з вражаючим бустом продуктивності.
Виглядає що вибір мови вперся в можливість саме порту а не перепису з нуля, що було б суттєво важче зробити з Rust, для прикладу.
Також, після релізу, вийшов подкаст на цю тему: https://www.youtube.com/watch?v=10qowKUW82U
🔥2
Coolify.io - open-source рішення рішення для спрощення деплою сервісів. Класна альтенратива Vercel та іншим, коли не хочеш залежати від вендора.
Покриває, напевне, більшість потреб невеликого сервіс, включно з базами даних, моніторингом і веб апками.
Покриває, напевне, більшість потреб невеликого сервіс, включно з базами даних, моніторингом і веб апками.
Coolify
Self-hosting platform with superpowers. Deploy apps, databases & 280+ services to your server. Open-source alternative to Heroku.
👍3
This media is not supported in your browser
VIEW IN TELEGRAM
React Aria, headless компоненти від Adobe, з акцентом на accessibility (a11y), недавно релізнули суттєвий набір змін.
З цікавого, апдейти по Command palette та міграція до Tailwind v4.
В твіттері є тред з прикладів.
З цікавого, апдейти по Command palette та міграція до Tailwind v4.
В твіттері є тред з прикладів.
👍2
Lexical, text editor фреймворк від Facebook.
Сучана заміна Prosemirror чи Quill.js.
Не є залежним віж жодного UI рішення, але має зручну інтеграцію для React (duh) через систему плагінів.
Підтримує як Markdown так і Rich text, plain text.
Недавно мігрував на нього замість TipTap, зменшилась кількість помилок і код став простішим. Хоча документація не відчувається вичерпною.
Сучана заміна Prosemirror чи Quill.js.
Не є залежним віж жодного UI рішення, але має зручну інтеграцію для React (duh) через систему плагінів.
Підтримує як Markdown так і Rich text, plain text.
Недавно мігрував на нього замість TipTap, зменшилась кількість помилок і код став простішим. Хоча документація не відчувається вичерпною.
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
✨ UV Canvas — декілька готових React-компонент із надзвичайно красивими анімованими Canvas-візерунками.
Анімації написані на GLSL (шейдери) і запаковані для React. Хоча прямого застосування це не має, проте чудово демонструє величезні можливості сучасного браузера.
Анімації написані на GLSL (шейдери) і запаковані для React. Хоча прямого застосування це не має, проте чудово демонструє величезні можливості сучасного браузера.
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
🧪 Часто пишете UI тести з React Testing Library? Знайшов для вас чудове рішення для дебагу тестів: testing-playground.com
💡 З власного досвіду: коли потрібно ізолювати проблему та побачити інтерфейс з тесту, цей інструмент стає незамінним помічником.
✨ Testing Playground наочно показує активний елемент з query та пропонує оптимальні селектори для вибраних елементів. На жаль, їх розширення для Chrome більше недоступне.
💡 З власного досвіду: коли потрібно ізолювати проблему та побачити інтерфейс з тесту, цей інструмент стає незамінним помічником.
✨ Testing Playground наочно показує активний елемент з query та пропонує оптимальні селектори для вибраних елементів. На жаль, їх розширення для Chrome більше недоступне.
👍2
Всі ж знають Vercel, так? Це компанія, яка стоїть за Next.js і змогла успішно розвинути комерційну складову навколо безкоштовного фреймворку.
У них є багато цікавих продуктів, наприклад Turborepo ⚡— інструмент, що в першу чергу націлений на монорепозиторії.
З власного досвіду: користуюсь ним уже кілька місяців і загалом задоволений. Спершу довелося обирати між Turborepo та NX, але другий виявився надто масштабним для наших потреб.
Turborepo працює поверх NPM Workspaces, що робить його більш універсальним—не потрібно прив’язуватися до конкретної технології. Сам інструмент написаний на Rust 🦀 і досить часто оновлюється.
Серед основних можливостей—дерево залежностей 📂, яке дозволяє автоматично запускати build/lint/test та інші задачі для внутрішніх пакетів. Все це кешується, а сам процес добре оптимізований.
Можу рекомендувати! ✅
У них є багато цікавих продуктів, наприклад Turborepo ⚡— інструмент, що в першу чергу націлений на монорепозиторії.
З власного досвіду: користуюсь ним уже кілька місяців і загалом задоволений. Спершу довелося обирати між Turborepo та NX, але другий виявився надто масштабним для наших потреб.
Turborepo працює поверх NPM Workspaces, що робить його більш універсальним—не потрібно прив’язуватися до конкретної технології. Сам інструмент написаний на Rust 🦀 і досить часто оновлюється.
Серед основних можливостей—дерево залежностей 📂, яке дозволяє автоматично запускати build/lint/test та інші задачі для внутрішніх пакетів. Все це кешується, а сам процес добре оптимізований.
Можу рекомендувати! ✅
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Motion canvas - інструмент для створення складних 2D сцен з простим АРІ в браузері.
Цікавий процедурний підхід, TS типізація та схожий на React синтаксис з використання JSX. Все це запаковано в функції-генератори (`function* (){}`) та live-preview всередині їхнього IDE.
Можна глянути невелике відео від автора, щоб краще зрозуміти загальні принципи. Мені поки не знайшлось де можна використати цей інструмент, але виглядає круто!
Цікавий процедурний підхід, TS типізація та схожий на React синтаксис з використання JSX. Все це запаковано в функції-генератори (`function* (){}`) та live-preview всередині їхнього IDE.
Можна глянути невелике відео від автора, щоб краще зрозуміти загальні принципи. Мені поки не знайшлось де можна використати цей інструмент, але виглядає круто!
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
🎨 Magic Patterns від Jim Raptis — дуже красивий набір інструментів для генерації популярних візерунків як для CSS, так і Canvas із можливістю експорту зображень.
Я неодноразово використовував Mesh Gradient генератор для своїх задач і залишився дуже задоволеним!
💫 Безкоштовна версія має обмежений функціонал, але його достатньо для базових потреб. Платні функції можна використати хоча б для натхнення.
Я неодноразово використовував Mesh Gradient генератор для своїх задач і залишився дуже задоволеним!
💫 Безкоштовна версія має обмежений функціонал, але його достатньо для базових потреб. Платні функції можна використати хоча б для натхнення.
🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
🎨 Ще один інструмент для Mesh градієнтів - Mesher від CSS Hero.
🎯 Прості та зрозумілі налаштування, можливість редагування градієнту на прев'ю.
✨ Особливість - генерація і експорт CSS стилів. Також можна піти на крок вперед на анімувати градієнт звичними методами CSS.
🎯 Прості та зрозумілі налаштування, можливість редагування градієнту на прев'ю.
✨ Особливість - генерація і експорт CSS стилів. Також можна піти на крок вперед на анімувати градієнт звичними методами CSS.
👍1
Багато хто чув про Bluesky — альтернативу Twitter 🐦. Спершу це був проєкт Twitter, який згодом відділився в окрему компанію.
Для React Native розробників буде цікаво заглянути в їх відкритий репозиторій мобільного додатку 📱. В організації також є інші відкриті проєкти, зокрема AT Proto — їхній протокол, який, мабуть, є головною фішкою цього сервісу 🚀.
Для React Native розробників буде цікаво заглянути в їх відкритий репозиторій мобільного додатку 📱. В організації також є інші відкриті проєкти, зокрема AT Proto — їхній протокол, який, мабуть, є головною фішкою цього сервісу 🚀.
👍4
🎨 Часто при створенні темплейту сервісу потрібно хоча б приблизно підібрати кольорову схему.
🔍 Поділюся з вами двома цікавими сервісами:
- 🌈 realtimecolors.com
- 🎨 uicolors.app
✨ Головна перевага — можливість миттєво побачити, як виглядатиме сторінка з обраною кольоровою схемою. Перший сервіс дещо зручніший: має різноманітні формати експорту кольорів, функцію рандомізації та детальну документацію. ⚠️ Єдиний недолік — поки що немає підтримки експорту для Tailwind v4.
🔍 Поділюся з вами двома цікавими сервісами:
- 🌈 realtimecolors.com
- 🎨 uicolors.app
✨ Головна перевага — можливість миттєво побачити, як виглядатиме сторінка з обраною кольоровою схемою. Перший сервіс дещо зручніший: має різноманітні формати експорту кольорів, функцію рандомізації та детальну документацію. ⚠️ Єдиний недолік — поки що немає підтримки експорту для Tailwind v4.
Realtime Colors
Visualize your color palettes on a real website.
👍4
Крута стаття від одного з контриб'юторів Expo, де він описує створення власного Flex Layout рушія для Canvas! 🚀🎨
Багатьом відомо, що Facebook має власний рушій для React Native — Yoga, основна частина якого написана на C++. Автор намагається частково повторити базові елементи цього рушія та детально пояснює:
📌 Як усе працює
🌳 Якою буде структура дерева елементів
🔄 Як відбувається проходження по дереву та рендер у Canvas
🔥 Імплементація виконана на TypeScript.
Якщо вам цікава ця тема — дуже рекомендую до прочитання! 📖💡
До речі, автор, Томаш, підтримує Україну!
Багатьом відомо, що Facebook має власний рушій для React Native — Yoga, основна частина якого написана на C++. Автор намагається частково повторити базові елементи цього рушія та детально пояснює:
📌 Як усе працює
🌳 Якою буде структура дерева елементів
🔄 Як відбувається проходження по дереву та рендер у Canvas
🔥 Імплементація виконана на TypeScript.
Якщо вам цікава ця тема — дуже рекомендую до прочитання! 📖💡
До речі, автор, Томаш, підтримує Україну!
🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
🎨 Blendy — UI-бібліотека для анімованих переходів елементів. Популярний патерн із мобільної розробки нарешті отримав цікаве рішення для вебу.
⚙️ Рішення не є фреймворк-залежним, частина API побудована на data-* атрибутах, що мінімізує конфлікти із сторонніми бібліотеками.
🤔 Спробували б таке у своєму проекті?
⚙️ Рішення не є фреймворк-залежним, частина API побудована на data-* атрибутах, що мінімізує конфлікти із сторонніми бібліотеками.
🤔 Спробували б таке у своєму проекті?
👍2
Розробка третьої хвилі
Насправді давно хотів спробувати Automerge, бо тема CRDT (Conflict-Free Replicated Data Type) дуже цікава і я вірю що за цим майбутнє крутих продуктів. Є цікавий подкаст по Local First, одним з гостів був автор Automerge: https://youtu.be/BNUXsCRQj3Q?si=…
У цьому відео один із розробників Automerge, Martin Kleppmann, розповідає про проблеми з CRDT (Conflict-free Replicated Data Types). Я нещодавно трохи зачіпав цю тему, але більше можна дізнатися тут.
Кожен приклад у відео чудово проілюстрований 🎨, що робить пояснення дуже наочним. А проблем у CRDT чимало—деякі з них досі не вирішені.
Я переглянув цей запис, бо знову почав цікавитися цією темою й маю певний інтерес випробувати Automerge, який, схоже, є одним із найпередовіших алгоритмів для CRDT. Також подивився інші презентації Мартіна—і це дуже мотивує, адже він дійсно вміє пояснювати складні речі простими словами.
Рекомендую до перегляду! ✅ Навіть якщо ви не плануєте працювати з CRDT, це точно буде цікаво.
Кожен приклад у відео чудово проілюстрований 🎨, що робить пояснення дуже наочним. А проблем у CRDT чимало—деякі з них досі не вирішені.
Я переглянув цей запис, бо знову почав цікавитися цією темою й маю певний інтерес випробувати Automerge, який, схоже, є одним із найпередовіших алгоритмів для CRDT. Також подивився інші презентації Мартіна—і це дуже мотивує, адже він дійсно вміє пояснювати складні речі простими словами.
Рекомендую до перегляду! ✅ Навіть якщо ви не плануєте працювати з CRDT, це точно буде цікаво.
YouTube
CRDTs: The Hard Parts
A talk on the latest research on CRDTs, originally given at the Hydra distributed computing conference on 6 July 2020.
References: https://martin.kleppmann.com/2020/07/06/crdt-hard-parts-hydra.html
Slides: https://speakerdeck.com/ept/crdts-the-hard-parts…
References: https://martin.kleppmann.com/2020/07/06/crdt-hard-parts-hydra.html
Slides: https://speakerdeck.com/ept/crdts-the-hard-parts…
👍2
Минулого тижня нарешті отримав доступ до бета-тесту Notion Mail 📧.
Давно користуюсь Notion 📝, а також календарем Cron 🗓️, який минулого року викупили Notion, і загалом задоволений якістю цих продуктів. Але для пошти використовував Spark (український продукт 🇺🇦) у версії Classic. Це вже трохи застарілий клієнт, тож було цікаво спробувати новий продукт від команди Notion—записався на бета-доступ.
За тиждень користування не встиг випробувати всі функції, але загалом клієнт працює швидко ⚡ і видно, наскільки він схожий із самим Notion. Чого не скажеш про календар, який вони лише трохи адаптували під себе.
Поки не готовий рекомендувати, але спробувати точно варто! ✅
Давно користуюсь Notion 📝, а також календарем Cron 🗓️, який минулого року викупили Notion, і загалом задоволений якістю цих продуктів. Але для пошти використовував Spark (український продукт 🇺🇦) у версії Classic. Це вже трохи застарілий клієнт, тож було цікаво спробувати новий продукт від команди Notion—записався на бета-доступ.
За тиждень користування не встиг випробувати всі функції, але загалом клієнт працює швидко ⚡ і видно, наскільки він схожий із самим Notion. Чого не скажеш про календар, який вони лише трохи адаптували під себе.
Поки не готовий рекомендувати, але спробувати точно варто! ✅
🔥2
Нещодавно я вирішив трохи освіжити свої навички в React Native після тривалої паузи й усвідомив, наскільки звик до зручності веб-інструментів. Tailwind, на мою думку, неймовірно ефективний, особливо в комбінації з CVA/SVA бібліотеками.
На щастя, багато з цих рішень вже адаптуються під React Native, зокрема NativeWind – інструмент для використання Tailwind у RN. 🎨📱
Майже все, що обіцяє NativeWind, працює відразу 🚀, і лише деякі моменти можуть здатися неочевидними при переході з web на RN.
У комбінації з CVA Tailwind Variants було легко налаштувати потрібні інтерфейси, тому можу рекомендувати! ✅
На щастя, багато з цих рішень вже адаптуються під React Native, зокрема NativeWind – інструмент для використання Tailwind у RN. 🎨📱
Майже все, що обіцяє NativeWind, працює відразу 🚀, і лише деякі моменти можуть здатися неочевидними при переході з web на RN.
У комбінації з CVA Tailwind Variants було легко налаштувати потрібні інтерфейси, тому можу рекомендувати! ✅
👍4
Solito – мрія веб-розробника з амбіціями в native чи черговий фреймворк із завищеними очікуваннями? 🤔 Давайте розглянемо цю бібліотеку, яка обіцяє легку інтеграцію Next.js проєкту в React Native.
На мій погляд, це цікаве рішення, яке має право на існування. Хоча я завжди скептично ставлюсь до підходів, що одночасно намагаються працювати і для web, і для мобільних застосунків (привіт, Flutter Web 👋), цього разу мені хочеться вірити.
Автор бібліотеки каже, що якщо у вас є Next.js проєкт, то немає жодних причин не спробувати Solito. А для стилів вже можна використати NativeWind, про який я раніше писав. 🎨🔥
На мій погляд, це цікаве рішення, яке має право на існування. Хоча я завжди скептично ставлюсь до підходів, що одночасно намагаються працювати і для web, і для мобільних застосунків (привіт, Flutter Web 👋), цього разу мені хочеться вірити.
Автор бібліотеки каже, що якщо у вас є Next.js проєкт, то немає жодних причин не спробувати Solito. А для стилів вже можна використати NativeWind, про який я раніше писав. 🎨🔥
🔥2
Інколи знаходжу в Твіттері цікаві перли, а нещодавно – простий Sync Engine поверх Dexie. 🔄 Як ви могли помітити, ця тема мені особливо цікава.
Це рішення, можливо, не підходить для серйозних проєктів, але код точно варто переглянути, щоб краще зрозуміти, як можна реалізувати Sync Engine. 🛠️✨
Це рішення, можливо, не підходить для серйозних проєктів, але код точно варто переглянути, щоб краще зрозуміти, як можна реалізувати Sync Engine. 🛠️✨
👍2