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

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

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

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

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

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

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

#typescript #lint

Зокрема будьте уважні при використанні сервісу https://www.svgviewer.dev/

Класна ютіла, оптимізує код SVG, можна легко превʼювити і редагувати SVG прямо в браузері.

АЛЕ по дефолту налаштування перетворюють ідшники в дуже мінімальні:

```

id="a"

```

що спричиняє багато колізій в майбутньому і відповідно баги рендеринга SVG

#svg #svgviewer

React SVG bug ?

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

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

```

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

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

```

```

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

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

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

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

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

```

```

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

#svg #bug #react #reactcomponent

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

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

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

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

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

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

#css #animation

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

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

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

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

awk + docker logs багує? Або як зручно фільтерити логи докер контейнера.

Зустрівся з дивним кейсом сьогодні, про який варто знати.

❌ Маю ось такий скрипт logs.sh: (поганий, не юзайте)

```

docker logs -f projectname-backend-prod 2>&1 | grep --color=always -E -n -i "$1" | awk '/./ {count++} {print count, $0}'

```

Суть якого - показати в докер логах лише ті рядки, які профільтрує grep і потім кожен рядок пронумерується через awk.

```

# Usage:
sh logs.sh any-filter-term
sh logs.sh any-regex.+te?rm
```

? А тепер суть проблеми - чомусь awk ламає результат таким чином, що вертається порожній результат:

```

# works fine
sh logs.sh evt_1p67

# BUG, empty result
sh logs.sh evt_1p67k

```

Другий приклад вертає порожній результат, хоча в логах точно є такий текст.
І справа не лише в букві “k” - з іншими буквами також ламається.
Сьогодні дебажив апку, шукав логи стосовно страйпа і не зміг знайти потрібний івент.

Чому так стається - не ясно.
Не можу зарепродюсити багу при фільтрації файлу через cat demo.txt.

Факт:
- awk може ламати результат відображення
- без awk логи фільтеряться правильно

✔️ Отже стабільний скрипт logs.sh щоб фільтрувати логи докера:

```

docker logs -f projectname-backend-prod 2>&1 | grep --color=always -E -n -i "$1"
```

#docker #shell #logs

Компанія планує отримати дозвіл на використання ядерних технологій на Марсі для використання тепла і генерації електрики

1 мільйон людей потрібно для формування автономного міста на Марсі

Нотатки - Earth’s mass-to-orbit - ключовий показник, який вказує скільки маси було виведено на орбіту з Землі

Оригінальне відео (твіт) компанії з промовою - https://twitter.com/SpaceX/status/1776669097490776563

X (formerly Twitter)

SpaceX (@SpaceX) on X

At Starbase, @ElonMusk provided an update on the company’s plans to send humanity to Mars, the best destination to begin making life multiplanetary

Проаналізував 45 хвилин промови Ілона Маска про мультипланетарну місію SpaceX (промова від 6 кві 2024)

Суть промови: за 20 років SpaceX зможе заселити Марс 1 мільйоном людей з усіма необхідними інструментами та матеріалами для автономного життя і розвитку цивілізації на планеті. Все це завдяки кораблю Starship та успіхів компанії в розвитку космічних технологій.

Цікаві деталі і аргументація цілей промови:

Не знаю жодних доказів існування прибульців, значить скоріше всього ми єдині

Всесвіт існує 13.8 млрд років, Земля 4.5 млрд

Вік цивілізації правильно рахувати від початку письма (writing) 5500 років тому

Уся цивілізація людства (5 тис років) це блимання ока (“blink of an eye”), порівняно з існуванням світу - це майже ніщо

? Це означає що свідомість неймовірно рідкісне явище і ймовірно швидкоплинне (fleeting = не триває довго), інакше ми б бачили ознаки прибульців

Припускаю, коли ми станемо мультипланетарною цивілізацією і зможемо подорожувати в інші сонячні системи, ми знайдемо ознаки мертивих однопланетних цивілізацій

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

Вперше за 4.5 млрд років існування Землі ми маємо змогу розширити свідомість за межі Землі

Starship - перший космічний корабель здатний на це

? Головна мета компанії SpaceX - розширити життя на інші планети. Марс це єдина опція насправді.

? В ідеалі зробити це до World War 3 чи аналогічної поганої штуки

Ми хочемо щоб Земля була настільки хорошої наскільки можливо настільки довго наскільки можливо, але є речі які поза межами нашого контролю

Тому ми повинні якнайшвидше зробити самодостатню цивілізацію на Марсі

Я вважаю цього можна досягти близько за 20 років

SpaceX зробила три тестових польоти на орбіту через Starship - 20 кві 2023, 18 лис 2023, 14 бер 2024

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

Орієнтовно через місяць буде четвертий запуск Starship

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

? ? В довготривалій перспективі, ми зможемо зробити з Марса планету схожу на Землю покривши поверхню планети водою на 40%

SpaceX досягнення:

-- 327 успішних запусків ракет, 291 успішне приземлення, 261 перевикористання ракет, в той час як на початку компанії було дуже варко зробити хоча б 1 успішний запуск ракети

-- Dragon project - 50 людей літали на орбіту, 46 людей літали на МКС, усі люди повернулися додому безпечно що найважливіше

-- 6 тисяч активних старлінків літає над планетою, 2.7 мільйона користувачів

По плану до кінця 2024 року, SpaceX зробить 90% “Earth’s mass-to-orbit” запусків, Китай 6%, решта світу 4%

Коли Starship почне літати, SpaceX буде робити 99% “Earth’s mass-to-orbit”

Сказано без акцента, ніби щось рутинне - ми зробимо базу на Місяці на шляху до заселення Марса

Вежі звідки запускаються і ловляться ракети на приземленні включно зі Starship називаються Mechazillas - по аналогії з величезними Годзілами

Starship будується з цінних матеріалів, які будуть розбиратися для розбудови Марсу замість того щоб летіти кораблями назад на Землю. Повернення кораблів на Землю буде пізнішим етапом.

Більшість людей які полетять на Марс, скоріше всього ніколи не повернуться на Землю.

Щоб корабель долетів до Марса, він спочатку вилітає на орбіту Землі, де його потім 5 разів дозаправляють (orbital refilling), і тоді він зможе долетіти до Марса

Розвиток цих технологій дуже важливий щоб NASA знову опинилася на Місяці

? Moonbase Alpha - запланована база постійного перебування на місяці

⏳ Запуски на Марс мають цикл в 26 місяців (у звʼязку з положенням планет та орбіт, щоб ефективно перелітати на планету)

-- При цьому вікно перельоту відкрите до 3 місяців

? Відповідно майже кожні 2 роки тисячі кораблів будуть відправлятися з Землі на Марс

Ви теж відчуваєте щось польське?

Коли в терміналі пишете git але клавіатура українська і виходить пше

Apple Vision Pro вийшов на ринок ?
Поки лише в штатах, за $3499 за стартову версію на 256 Гб.
Що означає в Україні ціна легко буде +500 дол.

Ключові моменти:
→ Нова операційна система visionOS
→ Новий спеціальний чип R1 для швидкої обробки камер і стрімінгу, працює в парі з M2
→ R1 процесить фрейми на швидкості 12 мс, що означає 80 герц дисплея
→ ? ? ? Керування відбувається очима та руками, нема окремих джойстиків
→ ? Павербанка вистачає на 2-4 год роботи. Можна одразу заряджатись від розетки і працювати скільки хочеш
→ Девайс підбирається індивідуально, потрібно сканувати свою голову через FaceID щоб апка підібрала оптимальні розміри + відповісти ряд питань, щоб зрозуміти які лінзи потрібні
→ Деякі компанії поки відмовились від адаптації своїх апок під епл віжн, наприклад нема YouTube app (частково вирішується відкриттям сайту ютюба в сафарі)
→ ? Макбук конектиться з епл віжн, і тоді клавіатура і тачпад працюють в усіх віртуальних вікнах епл віжн, в тому числі монітор самого макбука можна віртуально ресайзити і мувати куди зручно (реальний монітор макбука вимикається в цьому режимі)
→ Реальний світ рендериться на внутрішньому дисплеї з зовнішніх камер. Тобто це не наскрізні окуляри, а реконструкція, тому мілкий шрифт з айфона буде видно розмито.

Це перша версія, тому вірю потім зроблять павербанк потужніше, полегшать масу девайса, збалансують щоб не було перекоса вперед тощо.

Головне щоб цей продукт добре розкупили і тоді будуть гроші на розвиток технології.

Офіційний сайт епл про продукт - https://www.apple.com/apple-vision-pro/

Якісний фідбек на 37 хвилин від популярного влогера Marques Brownlee після тижня користування окулярами - https://youtu.be/dtp6b76pMak