📣 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

🤖 сьогодні бавився з фізикою та софтвером - експеримент з частотою. 🎮 🕹

Часом тягне до хардверного пет проджекта, тому що хочеться впливати на реальність рухаючи матерію моторами. 🦾

📌 Ідея наступна - зробити круглий екран з прямокутного іфона.

Як - анімувати екран обертаючи його через CSS keyframes і разом з цим фізично обертати іфон в іншому напрямку.

Засінкавши частоту обертів іфона та анімації зображення - усі пікселі мали б рендеритись на своєму місці ніби екран статичний 😍

Але в реальності так не вийде - зображення розмиває, і чим далі від вісі обертання тим сильніше розмиває.

Все через кутову швидкість. 🤓

Мій іфон робить анімацію 120 FPS (frames per second) фреймрейтом.
Мотор робить 5 RPS (rotation per second).

Виходить за 1 оберт іфон показує 120 / 5 = 24 фрейма. 💡

360 градусів / 24 фрейма = 15 градусів (degree) - на стільки розмивається кожен піксель кожного фрейма. 💡

Те що видно на відео червоним на екрані іфона - червоний круг розмитий на 15 градусів.

Взагалі, це частина іншого пет проєкта, тому я керував анімацією через вебсокети з адмінки з макбука.
Але то вже інша історія 😉

Результати експеримента:
→ на комерційний рівень не вийде 😂
→ задоволений 😌 (клеїв, програмував, рахував математику і фізику, шукав деталі в гаражі тощо)
→ відчув наскільки реальність крута через безмежний фреймрейт і деталізацію 🧠

А у вас є проєкти з хардвером? Ардуіно, распбері?
Діліться в коментах чи в лічку.

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

#hobby #hardware

void promises 🕳

Часом буває необхідність викликати асинхронну функцію і при цьому:
→ байдуже який результат вона верне
→ не потрібно чекати її виконання, хай собі в фоні працює

Девелопери зазвичай просто викликають такі функції ніби вони синхронні, але:
→ нормальна IDE як мінімум підсвітить рядок і файл варнінгом бо “забули await” ⚠️
→ не ясно чи це дійсно бага чи так задумано 🤷‍♂️

Для цього хорошою практикою є написати оператор “void”:
→ це виражає навмисне уникання евейта 🧠
→ ESLint розпізнає це як правильний код і не буде репортити проблеми ✅

Ітого є 4 семантично хороших варіанти як використати проміси:
→ await promise 🏆
→ promise.then(onSuccessCallback, onErrorCallback)
→ promise.catch(onErrorCallback)
→ void promise

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

З цим трюком познайомився недавно, раніше на проєктах писав спеціальну ютілку типу “ignoreAwait(promiseArgument)”.

Деталі по конфігу ESLint дивіться тут - @typenoscript-eslint/no-floating-promises

#coding #async

Хей гайс 👋

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

Щось субʼєктивно хороше, щось обʼєктивно обґрунтоване.

А коли щось очевидне то про нього інстинктивно не хочеться говорити - все й так ясно, нема що додати.

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

А я з цього виберу топіки для наступних корисних постів 😏

Крутий туторіал по ембедед девелопменту ❤️‍🔥 ❤️‍🔥 ✨
Використовує Cortex-M4 STM32 процесор, який вважається наступним рівнем, більш професійним серед ембедерів ніж ардуіно.

Автор:
→ програмує мікроконтролер на C
→ пише свій бутлоадер 😱
→ пише свій протокол для серійної комунікації UART
→ пояснює які є і чому існують периферії (GPIO, system ticks, flash memory etc)
→ datasheet and reference manual for hardware
→ і багато інших штук
→ і взагалі пояснює що це все таке і як воно взаємодіє в цілісному флоу

Я продивився понад 10 год цього туторіала і рекомендую зокрема бо:
→ автор дуже добре пояснює хардвер на лоу левелі
→ свіжий, сучасний туторіал (останнє відео було опубліковане 12 днів назад і може ще нові будуть скоро)
→ автор відповідає в коментарях і має свій активний діскорд канал
→ окрім хардвера це ще й хороший туторіал по C language 💯
→ юзає VS Code 👩‍💻 і навіть написав частину коду на TypeScript for NodeJs щоб апгрейдити софтвер на хардвері через UART протокол

Тепер ви знаєте як провести ці вихідні з користю.

p.s. класно що можна дивитись відео на ютюб на 1.5 швидкості 😃

#tutorial #hardware #c #baremetalprogramming #embedded

https://youtu.be/uQQsDWLRDuI

1М секунд = 12 днів
1В секунд = 32 роки

Наглядна різниця масштабів 😯