В цьому великому світі хочеться бути більше на зв‘язку з реальними людьми і життєвими історіями.

Тому буду радий бачити вас в себе в інсті 🤗

Сьогодні класна автопригода сталась, деталі в сторіс / рілс 🤣

https://instagram.com/oleksii.shnyra

JS Dark Ninja 🥷
Відлік пішов на години ⌛️

Вже завтра ми дізнаємось хто практичний топ JavaScript девелопер 😎

🦾 19 самих сміливих учасників України готові активувати весь свій мозок на повну 🧠 , увійти в матрицю і вибороти лідерство 🔝

Хто ще?
Маємо трохи квитків тут 🎫 для всіх хто любить діяти впритик до дедлайна - це норма 👍

#targer #tcc

2 год 15 хв до старту ⏳

Замовляйте улюблені піцу 🍕, бургери 🍔, підготуйте робоче місце 💻

Влаштовуйтесь позручніше і щоб ніхто не відволікав.

🧘

Сьогодні розпочнемо історію 💪

We have a liftoff! 🚀

JS Dark Ninja 🥷

Good luck to everyone!

📣 it is official 📢
Вітайте переможців 🎉 🦾 👏

🏆 🥇 VladYermakov - JS Dark Ninja 🥷

🥈 danulqua

🥉 DenysKleimenov

✅ 🎉 🎊 👏 👏

Я вірю ви реально ТОП.
Практично, вживу, серед усього стресу ви проявили свої скіли на максимум і крутіше за інших.

Всім величезне дякую!
І за сміливість і за те що проявили скіли і за фідбеки які я вже почув в особисті.
Всі люди різні і на різному рівні розвитку це цілком нормально і хто ще не переміг сьогодні - має величезні шанси перемогти далі.

Пліз пишіть мені в особисті щоб отримати призи, поділитись фідбеком тощо 🤙

Вже думаю про наступний челендж 🧠 😈

#targer #tcc #winners

Інфографіка результатів змагання JS Dark Ninja 🥷 що пройшло минулої суботи (8 квітня).

Це міг бути звичайний день, звичайна субота - але ми зробили її інакшою.

305 гіт пушів зробили всього за 4 години.
От би всі проєкти так активно розвивались 🙂

Що цікаво, топ три учасника простягнулись по всій Україні - від самого сходу (Донецької області) через Київ і до краю Закарпаття (Ужгорода).

При цьому кілька учасників хоть і українці але живуть в країнах Європи.

Дякую всім хто долучився 👨‍💻
See you next time ✌️

#targer #tcc

🙅‍♂️ Не пиши руками DTO-шки для REST API якщо є свагер.

Всього 4 читабельних рядки коду і схеми описані в свагері автоматично стануть типами в TypeScript коді 💫

→ request body
→ response body
→ enums
→ nested interfaces

npx swagger-typenoscript-api -p https://api.poduct.io/v3/api-docs \
    --no-client \
    -n swagger-types.ts \
    -o src

Звісно треба мати нормально описаний свагер для цього - кажи бекендщику хай описує все по чесному, як є - не приховує нічого.

Я з минулого року почав юзати цей підхід і тепер в рази легше тримати код засінканим з АПІ.

Особливо класно бачити які були зміни на бекенді:
→ бо згенеровані типи комітиш в гіт
→ час від часу перезапускаєш скрипт
→ + перезапускаєш коли бекендщик сказав що задеплоїв новий свагер
→ видно всі мікродеталі змін бо кожен символ гіт підсвічує

Далі вже ці інтерфейси використовуєш в апці.
Особливо круто коли ти підтримуєш згенеровані типи і валідаційні схеми (zod, yup) в однаковій структурі.

P.S. ліба має багато можливостей кастомізації, але чесно мені поки вистачає 4 рядки коду що показані на скріні.

Лінка на документацію ліби.

#coding #api #swagger #restapi

👩‍💻 Pretty TypeScript Errors

Тепер ерори великих нестед схем значно легше сприймати.

https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors

Вважаю хороше форматування ерори має йти разом з ІДЕ а не окремим плагіном.

Колись зроблять out of the box, хоупфулі.

#software #typenoscript #vscode

✍️ API ендпоінти що вертають JSON завжди повинні вертати обʼєкт як рут структуру. НЕ масив.

Бо масив - це дуже обмежена структура, яка не розширяється і колись доведеться змарнувати купу часу на рефакторинг в обʼєкт. ⏳ 🤦‍♀️

→ З обʼєктом все просто - легко додати будь які необхідні філди в майбутньому і таким чином розширити поведінку, деталі ентіті не ламаючи минулі версії клієнтів. 😊

→ Також спеціальний філд “schema: string” можна зробити і таким чином мати дуже різні структури респонсів залежно від вказаної схеми і відповідно хендлити.

⚠️ Якщо бекендщик вертає масив - одразу кажіть йому хай перероблює на обʼєкт типу “{ items: SomeDto[]; total: number }”.

→ “Але ж це більше трафіка, не ефективно”.
1. Зміни трафіка нікчемні = варто нехтувати.
2. JSON не для ефективності трафіка придуманий - в першу чергу це читабельний формат даних для людей.
Тому при роботі з JSON треба турбуватись про читабельність та масштабованість структур що він описує.

→ Навіть якщо ви думаєте що айтемів дуже мало щоб їх пагінувати, що вам не потрібен тотал. Навіть якщо ви думаєте що ніякі філди не додадуться потім. 🧠

Це збереже вам купу часу і сил в майбутньому.
А в апці буде менше багів. 🐞

#coding #rest #api #convention

Чуваки походу на JSON програмують. Або CSS 🧠

Субдомени для локалхоста! 🤩

Це вже працює в твоєму хром браузері, не потрібно нічого конфігурити. ✅

Як це? ❓

1️⃣ - запусти свою фронтенд апку як зазвичай, наприклад localhost:3000
2️⃣ - пропиши будь-який субдомен і та сама апка буде працювати, наприклад admin.localhost:3000 💫

Для чого це? ❓

Цей підхід дуже зручно використовувати для багато-ролевих апок.

Тому що кожен субдомен - це як окремий домен для браузера.
А значить:
→ ізольований контекст (LocalStorage, Cookies, Notifications etc)
→ окремі збережені паролі, підсказки автокомпліта

Щоб в одному браузері відкрити різні таби апки з різними субдоменами - і авторизуватись різними ролями / юзерами і тестувати як працює взаємодія між ними.

Кілька слів про браузери:
→ працює в сучасних версіях Chrome, Firefox
→ не працює в Safari
→ має працювати в інших chromium-based браузерах

Стосовно запуску різних проєктів ✍️

Можна різні проєкти запускати на різних субдоменах щоб зберігати різні автокомпліти, авторизацію.

❗️ Але я рекомендую запускати різні апки на різних портах, тобто localhost:3040, localhost:4050 тощо.

Кожна апка для локального девелопменту повинна мати свій унікальний порт. ✍️

Тому що:
→ не має конфлікту контекстів різних апок (не перетирається localStorage, не міксуються кукі та інші persistent data тощо)
→ різні апки можна запустити одночасно
→ кожен порт прописується в коді (енвах) = хороша конвенція

Отримав користь?
Репости друзям, вподобай цей допис щоб ще більше девелоперів дізналось 😉

#coding #dx