Нагадую - варто мігрувати з Webpack на Vite 💯

→ Швидше білд 2.5+ рази ❗️
→ Швидше старт (девелопмент).
→ Менше залежностей (lock file).
→ Бандл виходить менший, але то вже менш важливо якщо не SEO-oriented app.

На скріншоті приклад React App 17 версії колись створеної з create-react-app та десятками пекеджів, сотнями файлів ☝️
Сьогодні мігрував, три години і готово. ✔️

Чим більше апка (залежностей та компонентів) тим більше бенефіт від користування vite замість webpack ✍️

Сьогодні натрапив на цікаву анімацію на https://daisyui.com/ - сайт бібліотеки компонентів для тейлвінда.

Як зробити таку віялову анімацію?

Універсальне правило коли знайшов щось цікаве - треба інспектити код сайту, відкривати тулзи браузера і розбиратися з маркапом, стилями, скриптами.

💡 Трюк заключається в використанні CSS властивості clip-path (MDN link)
→ на кожну лопасть віялової анімації прописаний свій кліп
→ кліп анімується джаваскриптом, мутація залежить від позиції скрола сторінки
→ всередину кожного кліп контейнера вкладений однаковий маркап але з різними стилями
→ кожен контейнер накладений один на одного, але видимий лише в рамках кліпа зі своїми унікальними стилями

Таким чином при анімації кліпів, частина одного контейнеру відкривається зливаючись з елементами іншого контейнера тому що однаковий маркап.

Всім успішного reverse engineering ✌️

#css #animation

Instructions unclear 😁

React SVG bug 🐞

Часто SVG мають дуже неприємну штуку - референси через глобальні ідентифікатори ID щоб використовувати:
→ clip path
→ mask
→ etc

Але, коли ми використовуємо SVG через ReactComponent loader

import { ReactComponent as FiSrExclamation } from 'fi-sr-exclamation.noscript';

То в DOM рендериться SVG напряму з файла який ми імпортимо:

<div>
<noscript width="16" height="16" viewBox="0 0 16 16" fill="none"
    xmlns="http://www.w3.org/2000/noscript">
    <path d="…"/>
</noscript>
</div>

Це призводить до колізій глобальних ідентифікаторів ID, що в свою чергу:
→ ламає рендеринг SVG, хибний масштаб та маска
→ зображення може бути взагалі відсутнім
→ замість зображення видно чорний чи білий квадрат

Все залежить від того які саме ідентифікатори були неправильно залінкані.

При цьому:
→ ламатися може як перша SVG що ми рендеримо
→ так і будь яка інша SVG на екрані, що ускладнює дебаг
→ особливо дивні кейси коли спочатку SVG рендериться правильно, а потім юзер клікає зовсім не повʼязаний компонент і інші SVG ламаються через новоутворені колізії

Також важливо сказати що ця проблема виникає навіть при використанні однієї SVG в реакті - бо реакт рендерить інстанси однієї SVG в різних місцях апки, і це теж утворює багато однакових ID селекторів на сторінці одночасно.

Для деяких випадків, простим і швидким рішенням може бути рендеринг іконок через IMG - тоді референси ізольовані в рамках кожної SVG

<img src="./icon.noscript" alt="icon">

Хто хоче знати більше - пишіть в коментарі.

#noscript #bug #react #reactcomponent

Чому eslint так називається?

ES - ECMAScript
Linter - інструмент яким видаляють лінт (що в англійській означає ворсинки, круцьки на одязі).

В світі софтвера це відповідно інструмент, яким виявляють баги та стилістичні проблеми коду без його запуску (статичний аналіз).

Тобто лінтер причісує наш код, видаляє ворсинки щоб код виглядав гарно, наче новокуплений светер. 👕

Хочеш щоб твій код виглядав як пожмаканий зачуханий светер - НЕ користуйся лінтером.

Хочеш щоб код був як свіжий стильовий светер - лінтер це мастхев. 💯

Перший лінтер був створений в 1978 році для мови С розробником AT&T Bell Labs, а
сьогодні маємо найсучасніший лінтер в тайпскрипт розробці - https://typenoscript-eslint.io/

#typenoscript #lint

Безкоштовний Figma Dev Mode, майже :)

Лайфгак при роботі з фігмою. 🛠

Часто дизайнери дають нам фігма проєкти в яких ми маємо лише view permissions і цього НЕ завжди достатньо для девелопмента.

А Figma Dev Mode - корисна, але платна штука. 💲

На поміч приходить лайфгак - власний фігма файл (створюється безкоштовно). ⭐️

→ вибираємо обʼєкти з фігма файлу що нам дали дизайнери
→ копіюємо
→ вставляємо це у власний фігма файл
→ робимо будь які зміни які нам треба

✅ Кейс - мені треба заекспортити компоненти як SVG, але:
→ там є зайві леєри
→ зайфі ефекти тіні що робить експорт безсмисленим.

Коли скопіював компоненти в свій фігма файл, зміг легко підправити все як мені треба і заекспортити без зайвих ефектів та деталей.

Навіть Dev Mode фігми таке б не дозволив, бо ми всеодно гості у файлах дизайнерів і не будемо там міняти нічого 💡

Я називаю такий файл temp edits - додав в закладки браузера і за пару хвилин можу підправити графіку чи компоненти, намалювати щось для шарингу на презентації, для демо клієнту тощо.

#figma #lifehack #tips

457 GB памʼяті зіжрав VS Code 😂

Ось що буває коли запускаєш Python скрипти для штучного розуму локально 🤦‍♂️

Понад 90% памʼяті то своп, бо в мене на маку лише 16 Гб оперативки.

Опенсорсні моделі для локального запуску взяв з популярної спільноти https://huggingface.co/

Пробував запустити розпізнавання голосу і синтез голосу з тексту, в тому числі моделі від Open AI яка створила ChatGPT.

Цікава штука, буду далі пробувати і вам рекомендую затестити по можливості.

Хотів скачати пнг з одного сайту, була опція скачати безкоштовно або за підписку.

Клікнув безкоштовно.

Закрив різні банери зі знижками для нових юзерів.

Пройшов реєстрацію.

Верифікував імейл.

І аж тоді нарешті - запустився таймер на очікування на 59 хвилин 59 секунд 🤣

ШІ придумав лайфгак до неймінга змінних - грецький алфавіт 🆕

Вийшов мікс коду і професорських формул крейдою на дошці. 🙂

Взагалі цікаво наскільки великі перспективи має ШІ.

ШІ легко має доступ до всіх валідних символів юнікоду - це як бачити весь спектр кольорів від інфрачервоного до ультрафіолету 🧠

Але нам людям варто далі продовжувати писати лише англійські літери, навіть якщо мова про математичні концепції - так і називайте змінні - phi, gamma, sigma etc.

p.s. код згенеровано з Claude 3.5 Haiku 🧠

Project DIGITS - домашній суперкомпʼютер вартістю від 3К USD. 🔥

6 січня NVIDIA анонсувала проєкт, а продажі прогнозують на травень 2025.

Основна ціль проєкту це швидка розробка та використання МЛ моделей до 200 млрд параметрів локально. 💪

→ 1 petaflop of AI performance at FP4 precision.
→ 128ГБ оперативної памʼяті.
→ 4ТБ сховище NVMe.

І все це просто запускаєш в себе вдома - це буде самий безпечний і вигідний девайс для створення власних ШІ моделей. 🧠

CSS only - автоматичний дарк мод для зображень ⭐️

Усього дві CSS властивості адаптують світле зображення для Dark Mode.

В тейлвінд це всього два класи:

invert hue-rotate-180

1️⃣ Фільтр інверсії перетворює біле на чорне, але ламає інші кольори.
2️⃣ Зате зміщення відтінку нормалізує кольори наближено до початкових:
→ червоне залишається червоним
→ зелене зеленим
→ синє синім
→ ітд

#css #oneline #darkmode