ІТ спільнота targer.dev 👨‍💻👩🏼‍💻 – Telegram
ІТ спільнота targer.dev 👨‍💻👩🏼‍💻
511 subscribers
146 photos
22 videos
10 files
86 links
🇺🇦 Targer - спільнота розробників (TypeScript, mostly). Корисна інфа по веб девелопменту, новини платформи і саморозвиток 💯
https://targer.dev
Download Telegram
Channel name was changed to «ІТ спільнота targer.dev 👨‍💻👩🏼‍💻»
Інстаграм зменшує шрифт щоб вмістити текст, виглядає незручно, важко читати 🤦‍♂️

45.4K лайків на передостанньому айтемі ледь читабельні.

Рекомендую так не робити а міняти сам текст (оформлення).

Не всі мови такі лаконічні як англійська, доводиться щось вигадувати.

#ux #ui
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🙈2😁1
Компілятор тайпскрипта може багувати і це ок. 🪲 👍

Тому що це доволі рідкісні кейси, а бенефіти від правильної поведінки в рази перевищують усі проблемні моменти.

Зіштовхнувся з такою еророю як на скріншоті.

Рядки 7 та 16 однакові по своїй суті.
Але компілятор каже що на 16 рядку є ерора. 🐞

Моє припущення такої поведінки в тому, що розробники компілятора оптимізували перевірки.
Тобто на 16 рядку компілятор бачить літерал false і усі подальші умови “перевіряє слабо, базово”.
А тому думає що там може бути undefined.

В той час як в рядках 5 та 7 компілятор детально перевіряє всі кейси і бачить що undefined НЕ можливий.

Чому 7 та 16 рядки мають різну поведінку?
Бо false літерал це захардкожений токен, а на 7 рядку expression який запуститься в рантаймі і аж потім буде відомо результат.
Хоча тайпскрипт правильно інферить тип ok2: false проте наявність виразу замість літерала змушує його перевіряти всі умови рядку.

#typenoscript #compiler #bug
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🤯21🦄1
Ви теж відчуваєте щось польське?

Коли в терміналі пишете git але клавіатура українська і виходить пше
😁18🤣3
Весна розквітає, вакансію відкриває 💫 👍 😍

Моїй улюбленій компанії OSDB потрібен тіммейт Frontend React Developer 👩‍💻 👩‍💻 👩‍💻 👩‍💻 👩‍💻 👨‍💻 👨‍💻 👨‍💻

2+ роки досвіду, TypeScript, React, tanstack query, TailwindCSS, англійська розмовна для комунікацій з американським клієнтом.

Проєкт у сфері страхування з ШІ інтеграціями.

(прошу реакцій та репости, щоб допомогти шукаючим)

Для контакту і деталям по вакансії пишіть Vitalina Vyskrebets (linkedin, кодова фраза “від таргера”) 👍🏻

У когось скоро здійсниться бажання знайти нову круту команду 💯

#vacancy #frontenddeveloper #react
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Монобанк зробив редизайн апки на днях 😍

Виглядає круто, особливо відео :)
По факту в мене не всі анімації є як на відео. Можливо ще дорелізять скоро.

Подобається комбінація minimalistic flat дизайну + перспективи 3Д.

На фронтенді є CSS технології для реалізації таких анімацій (translate3d on MDN) і відповідно анімації будуть швидкими 120 FPS - бо будуть покладатись на GPU hardware, так що експериментуйте в своїх проєктах.

#ux #animations #css
Please open Telegram to view this post
VIEW IN TELEGRAM
6👎1
Проаналізував 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 роки тисячі кораблів будуть відправлятися з Землі на Марс
🔥42👍2
Компанія планує отримати дозвіл на використання ядерних технологій на Марсі для використання тепла і генерації електрики

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

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

Оригінальне відео (твіт) компанії з промовою - https://twitter.com/SpaceX/status/1776669097490776563
🔥8
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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍101
Нагадую - варто мігрувати з Webpack на Vite 💯

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

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

Чим більше апка (залежностей та компонентів) тим більше бенефіт від користування vite замість webpack ✍️
Please open Telegram to view this post
VIEW IN TELEGRAM
132💯1🫡1
Media is too big
VIEW IN TELEGRAM
Сьогодні натрапив на цікаву анімацію на https://daisyui.com/ - сайт бібліотеки компонентів для тейлвінда.

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

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

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

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

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

#css #animation
Please open Telegram to view this post
VIEW IN TELEGRAM
👍115
Please open Telegram to view this post
VIEW IN TELEGRAM
😁13🤷‍♂3🤣3
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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10😱1
ІТ спільнота targer.dev 👨‍💻👩🏼‍💻
React SVG bug 🐞 Часто SVG мають дуже неприємну штуку - референси через глобальні ідентифікатори ID щоб використовувати: → clip path → mask → etc Але, коли ми використовуємо SVG через ReactComponent loader import { ReactComponent as FiSrExclamation } from…
Зокрема будьте уважні при використанні сервісу https://www.noscriptviewer.dev/

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

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


id="a"


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

#noscript #noscriptviewer
👍5
Чому eslint так називається?

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

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

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

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

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

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

#typenoscript #lint
Please open Telegram to view this post
VIEW IN TELEGRAM
12
https://www.zombo.com/

Запущений в 1999 році - не змінив концепцію з того часу 💪🏻 😹

В 2021 переписаний на HTML5 замість Adobe Flash Player
😁9
Безкоштовний Figma Dev Mode, майже :)

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

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

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

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

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

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

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

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

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

#figma #lifehack #tips
Please open Telegram to view this post
VIEW IN TELEGRAM
👍113
Ти: Привіт, через ці мітинги я не встигаю виконати задачу до пт, треба перенести дедлайн на наступний тиждень

Менеджер: Я тебе зрозуміла, зараз назначу мітинг на завтра і обговоримо
😁144🤬1
This media is not supported in your browser
VIEW IN TELEGRAM
Інста фід буває забавний 😆
😁13🤣5