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

Пробували Shadcn або щось подібне? Якщо ні — дуже раджу! Але це для веба. А що з React Native? Раніше я вже згадував про NativeWind — Tailwind-підхід для RN. А ось кілька схожих рішень, які рекомендують розробники: - Gluestack - React Native Reusables - NativeWindUI На мій смак, NativeWindUI — найгарніше рішення, але більшість компонентів платні. Gluestack виглядає симпатично і має великий набір, але я трохи скептично ставлюсь до "універсальних" рішень. Тому найбільше уваги приділив би React Native Reusables — орієнтовані саме на RN, хоч і мають web preview (через Expo). Точно спробую цей варіант у своїх міні-проєктах!

Був впевнений, що вже писав про Panda CSS, але схоже, це мені приснилось. 🐼 У продовження теми стилізації — поділюсь альтернативою Tailwind. Якщо коротко, це майже те саме, що Tailwind, але з іншим підходом до синтаксису + кілька фіч із коробки: - Стилізація через JS-обʼєкти або React props, повна TypeScript типізація - Готові утиліти на кшталт CVA (про них я вже згадував) - "Рецепти" — стилі для компонентів, що складаються з кількох частин Рішення від авторів Chakra UI, які у 3-й версії повністю перейшли на PandaCSS. Сам користуюсь зараз у одному з проєктів — загалом задоволений. Є нюанси з post-build кастомізацією, але це радше винятки. Якщо подобається підхід Tailwind, але не хочеться писати стилі в рядок — Panda точно вартий уваги. ✅ https://panda-css.com/

Дуже популярний у свій час підхід до стилізації компонентів у React — Styled Components — нещодавно повідомив, що припиняє активну розробку. Залишиться лише мінімальна підтримка. Я користувався цим рішенням у кількох проєктах, але не можу сказати, що це був мій улюблений підхід. Проте, це все одно одне з найвпливовіших рішень у світі стилів для React. Чому проєкт згортають? Проблеми з React Server Components — немає підтримки Context API Tailwind та подібні підходи стали набагато популярнішими Автор більше не має змоги активно підтримувати проєкт Шкода, але доволі очікувано. Styled Components суттєво вплинули на розвиток стилізації у React і точно заслуговують на повагу. 🙌 https://opencollective.com/styled-components/updates/thank-you

Ще один цікавий виступ з React Day Berlin — цього разу про оптимізацію рендеру за допомогою React Ref. ⚛️ Автор показує на прикладі таблиці з можливістю змінювати ширину колонок, як уникнути зайвих перерендерів. І не просто зменшити, а повністю прибрати re-render при редагуванні! Це чудовий приклад типової помилки та нестандартного, але ефективного вирішення. Раджу глянути, навіть якщо ви досвідчений React-розробник — можливо, здивуєтесь. 👀 https://www.youtube.com/watch?v=TgpTG5XYoz4

Часто працював над продуктами з open source пакетами, і помічав: деякі користувачі переживають через розмір пакета на npm чи в сервісах типу Bundlephobia. 😰 Але тут варто памʼятати: сучасні пакети часто публікуються одразу у кількох форматах — ESM, CJS тощо. І хоча не все можна оптимізувати, у випадку з ESM більшість роботи робиться автоматично. Завдяки tree shaking, не всі залежності потрапляють у фінальний бандл користувача. Нещодавно натрапив на круте відео з React Day Berlin, де один із авторів React Query пояснює це буквально по пунктах. Якщо ви теж стикаєтесь із такими питаннями — скиньте відео своїм юзерам. https://youtu.be/8-RTNnn9GR8?t=220

Раз вже сьогодні почав про embedded, поділюсь ще одним цікавим контентом. Rust набирає популярності, хоча C++-скептики з цим миритись не поспішають. 😅 Мені мова теж цікава, але поки не вистачає часу заглиблюватись. Проте було цікаво дізнатись, як виглядає embedded на Rust і чи достатньо розвинуті інструменти. Так я й натрапив на канал The Rusty Bits. Відео виходять нечасто, але дуже якісні (усього 6 відео й 21 тис. підписників). З усього, що я знайшов в інтернеті, це найкраще джерело на цю тему. Якщо цікавитесь Rust + embedded — рекомендую до перегляду! 🚀 https://www.youtube.com/watch?v=TOAynddiu5M

Сьогодні знову трохи відійду від веб розробки й повернусь до embedded. Хто пробував Arduino, той, напевно, знайомий з Arduino IDE. Для мінімальних задач вистачає, але, якщо чесно, це жахливо незручно. 😅 Альтернатива? PlatformIO — популярний, безкоштовний та відкритий інструмент. І найцікавіше: це український продукт! 🇺🇦 PlatformIO інтегрується у VSCode та суттєво спрощує роботу: ✅ Менеджер залежностей (як npm для Node.js) ✅ Юніт-тести ✅ Дебаггер (на реальному пристрої) ✅ Багато іншого З власного досвіду — після Arduino IDE це просто кайф! Постійно користуюсь і вам рекомендую. 🚀 https://platformio.org/

Років два тому мав інтерв’ю з компанією, яка хотіла повторити, наскільки швидко й приємно працює Notion, але для іншого бізнесу. Було кілька раундів, і на одному з них мені потрібно було підготувати прикладний та детальний підхід до організації такої системи. Завдання не з простих — Notion унікальний, і його важко не просто повторити, а й переосмислити. Але одна їхня стаття допомогла мені краще підготуватись, тож вирішив поділитися. До речі, зайшов подивитися на їхній продукт — на жаль, нічого з того, що планували, не реалізували, але суттєво підсіли на GraphQL (що було частиною моєї рекомендації, виходячи з їхньої архітектури). 😅 https://www.notion.com/blog/data-model-behind-notion

Поділюсь цікавим подкастом, але спершу трохи лірики. Для досвідчених розробників — пам’ятаєте Atom? Едітор, що передував VSCode. Саме завдяки ньому з’явився Electron, який зараз використовують Notion, Slack, VSCode, Linear та багато інших. У цьому подкасті один із core-розробників Zed (про який я вже писав) розповідає цю історію та як вона вплинула на їхній новий, сучасний продукт. 🎧 Ідеально для вечірнього прослуховування на фоні — так я і зробив учора. 😌 https://www.youtube.com/watch?v=HJTVwNZ_fQM

Часто помічаю, як новачки встановлюють пакети для дуже дрібних задач. Напевно, найпопулярніше — це генератори для унікальних ідентифікаторів, особливо коли висока унікальність взагалі не потрібна (типу uuid). Для таких потреб значно краще і зручніше використовувати вже наявні інструменти:

const randomId = (length = 6) => {
  return Math.random()
    .toString(36)
    .substring(2, length+2);
};

Ось проста функція для генерації коротких, унікальних ID, цілком достатня для індентифікаторів даних (до кілька-десят тисяч, але не мільйонів) записів. Код скопіював не з голови а взяв тут.

Чули про перцептрон? 🤖 Якщо цікавитесь машинним навчанням та AI, то, можливо, вже зустрічалися з цим поняттям. У цьому відео автор детально пояснює технічні досягнення Френка Розенблата (батьки — мігранти-євреї з Хмельницької області) та їхній вплив на розвиток AI сьогодні. Відео англійською, без авто-перекладу, але автор говорить чітко та зрозуміло, тож, сподіваюся, проблем із переглядом не буде. 🎥 https://www.youtube.com/watch?v=l-9ALe3U-Fg

Користуєтесь Storybook? Я — так! 🎨📖 У нас на проєкті багато тестів безпосередньо в Storybook. Там використовується та сама React Testing Library, але тести виконуються всередині сторі з візуальним відображенням. Ці тести ми також запускаємо в CI, щоб відловити регресії 🐛. Проте чим їх більше, тим важче запускати, бо CI використовує headless-браузер (без інтерфейсу). Навантаження накопичується, і деякі тести починають падати через нестачу ресурсів. Рішення? Я підглянув його в Playwright, який Storybook використовує під капотом. Тести можна розбивати на шарди (shards) й запускати кілька CI-процесів для рівномірного розподілу навантаження ⚡. У підсумку всі тести, які запускалися разом, тепер розбиваються на N шардів і виконуються паралельно. Рішення просте й зручне, але трохи дорожче, якщо не кешувати артефакти типу node_modules 📦.

Airbnb опублікували статтю про міграцію ~3500 тестів з Enzyme на React Testing Library за допомогою LLM. Ручна міграція зайняла б півтора року, автоматизація скоротила її до шести тижнів. Це вражає 🤯, адже Enzyme і RTL мають різну структуру та філософію тестування. Якщо коротко, Airbnb використали LLM у циклічному процесі: 1️⃣ Виконувалась міграція 2️⃣ Система сама себе валідувала 3️⃣ LLM виправляв знайдені помилки Цікава ідея, і, схоже, добре спрацювала. Хоча я трохи менше довіряв би таким тестам 🤔. З власного досвіду: ми теж інколи використовуємо LLM для рефакторингу, зокрема з jscodeshift. Наприклад, якщо потрібно перенести імпорти, які були локальними, але код мігрував у пакет 📦. Простий пошук не допоможе, бо імпорти можуть бути розбиті між файлами. А jscodeshift усе правильно оновить.

Я думав, що всі вже це знають, але практика показала зворотне. На GitHub можна відкрити будь-який репозиторій, натиснути клавішу крапки (.) (на macOS і, напевно, на Windows теж) — і репозиторій відкриється у вбудованому VS Code! Постійно користуюся цим, коли потрібно розібратися, як працює якась бібліотека всередині. Ультразручно 🤩. Але є нюанс: спочатку потрібно авторизуватися, інакше нічого не відбудеться. Знали про цю фічу? 😉

Попередній пост про мікроконтролери набрав у середньому більше реакцій, тож починаю підозрювати, що ця тема вам цікава 🤔. Тому сьогодні поділюся, увага, україномовним відео (і каналом) на цю тему! Лабораторія Самостійності — відносно невеликий канал, проте його контент дуже корисний, особливо для новачків. https://www.youtube.com/watch?v=00xUYc4L0As Додаю відео про той самий ESP32, але на каналі ви можете знайти й інші цікаві матеріали. А ще вони проводять стріми 🎙️ — інколи слухаю на фоні й теж дізнаюся щось нове!

Декілька місяців тому натрапив на класну рекомендацію на YouTube — канал Core Dumped, де автор розповідає про роботу комп’ютера на рівні, близькому до апаратної частини. Якщо ви навчалися на спеціальностях, де ці теми розглядалися, то канал допоможе пригадати матеріал. Але навіть якщо ви з цим не стикалися і почали з високорівневих мов — не біда! Усі відео автора містять вичерпні, анімовані ілюстрації 🎥. Одне з відео, яке мені найбільше запам’яталося, — це пояснення, чому потрібні потоки, навіть якщо процесор має лише одне ядро. У ньому ви краще зрозумієте, що таке Concurrency (це загалом корисно знати 😉), як потоки ділять ресурси, хто їх переключає і контролює. А також — отримаєте прикладні ситуації, які допоможуть легше це усвідомити. https://www.youtube.com/watch?v=M9HHWFp84f0

О, Dan Hollick – це прям знахідка для тих, хто любить візуально зрозумілі та круто оформлені технічні статті! 🎨 Я теж випадково натрапляв на його блог, коли заглиблювався в mesh gradient, але тепер бачу, що там купа цікавих речей. Його допис про Shaders – це справді легкий вхід у тему, навіть якщо раніше не стикався з ними в роботі. Шейдери – це те, що часто асоціюється з гейм-девом, але, чесно кажучи, вони знаходять застосування і у веб-розробці, якщо знати, як їх використати. 📖 Стаття коротка, проста, написана зрозумілою мовою. Навіть Google Translate впорається, якщо потрібно. Якщо тобі цікаві графіка, візуальні ефекти або просто хочеш розширити кругозір – точно варто зацінити! 🚀

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

🎉 Нарешті! Стилізація Select у Chrome 135 🎉 Починаєш новий проєкт, накидуєш компоненти – все гаразд. Але коли доходить до Select, починаються проблеми. Знайома ситуація? 🤯 Є купа готових бібліотек, кожна по-своєму вирішує проблему нестилізованого селекта. Розробники вигадували справжні акробатичні трюки, щоб отримати красивий Select із нормальною підтримкою клавіатури, a11y та задоволеними користувачами. 🔥 І ось гарні новини! Команда Chrome дарує нам можливість стилізувати Select – підтримка викочується починаючи з Chrome 135. А якщо глянути останні демо з відео, то це взагалі фантастика! 🚀 А в коментарях додам приклад ⬇️

🔥 Гарячий пиріжок у твіттері сьогодні – Silk! Про нього вже написав автор Tailwind, також підтримку висловили автори Parcel, React Aria та інші відомі розробники. 🤔 Що таке Silk? Це набір компонентів для sheet-style модалок. Одразу варто зазначити – продукт комерційний (потрібно платити 💸), але безкоштовний для некомерційного використання. Мені дуже сподобався "Speet with Depth" – ефект, схожий на iOS. Виглядає гладко, ніби не підвисає, і видно, що автор вклав багато зусиль у доведення деталей до ідеалу. А от документація в Notion, на мою думку, не найкраща ідея. https://silkhq.co/