Навіщо потрібне infer у TypeScript
#typenoscript

Ключове слово infer — це потужний інструмент, який дозволяє розгортати та зберігати типи під час роботи з чужим TypeScript кодом. Воно не може використовуватися без Conditional Types та поза пропозицією extends. Infer дозволяє визначити змінну в межах нашого обмеження, на яку буде посилатися або повертати.

наприклад, так можна отримати тип першого аргументу функції:
type GetFirstArgumentOfAnyFunction<T> = T extends (
first: infer FirstArgument,
...args: any[]
) => any
? FirstArgument
: never
Зверніть увагу, що описати це тільки через генерики неможливо.

Як виправити npm ERR! ERESOLVE could not resolve?
#npm

При встановленні залежностей можна часто побачити помилку:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
...
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Відновлення залежностей не завжди варіант. Тому до Node.js 16.14 рекомендований спосіб був прописати legacy-peer-deps=true у .npmrc проекту або використовувати yarn resolutions. У Node.js 16.14 йде npm 8.3. Цей апдейт додав overrides, аналог yarn resolutions. Приклад використання в package.json для одного проекту React:
"dependencies": {
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-json-view": "^1.21.3"
},
"overrides": {
"react-json-view": {
"react": "18.1.0",
"react-dom": "18.1.0"
}
}

Рецепти на тему:
– Що таке .npmrc і чому його варто додати?
– Як виправити код у node_modules?
– Тонкощі роботи з npm noscripts

NestJS v9 is now available!
#nestjs

Сьогодні Каміль офіційно оголосив про реліз нової версії Nest.js.

Що нового:
– Nest.js REPL (read-eval-print loop). У певних випадках може бути заміною пакета nestjs-command та його аналогів. Зручно для troubleshoting-а вашої програми, але може створювати ризики безпеки в production через відсутність логування
– Спрощення роботи з динамічними модулями за допомогою ConfigurableModuleBuilder
– Durable providers полегшує роботу для multi-tenant додатків (наприклад коли кожна компанія має свою базу даних). Не варто використовувати у високонавантажувальних додатках
– Оновлення версії fastify та перехід на ioredis c redis

Перехід на нову версію виглядає простим за умови, що ви вже оновили @nestjs/typeorm на v8.1. Під капотом у цій версії йде оновленя typeorm v0.2 на v0.3. А там багато breaking changes. На місці Каміля я робив би цю зміну якраз у цьому мажорному оновленні.

За півгодини починаю свою доповідь React applications Failures.
Ще можна встигнути підключитися https://fwdays.com/event/react-fwdays-2022
Слайди https://speakerdeck.com/galkin/react-applications-failures
Youtube Stream https://www.youtube.com/watch?v=ima7RjDc6Fg

Update: Закінчив Discrod Voice Chat. Під час обговорення попросили поділитися посиланням на курс та сертифікацію (безкоштовну) з GraphQL.
https://www.apollographql.com/tutorials/

​​Why Monorepos?
#worth_seeing

Відео з OpenWorldJS 2022. Доповідач Jeff Cross працював у Google, а як ми знаємо саме там найкрутіший monorepo. Після Google Джеф співзаснував Nrwl. Ця компанія консультує з monorepo та Angular, а ще створила nx.

Доповідь складається з двох частин: ретроспективи переходу від monorepo до polyrepos та аналізу сучасного monorepos. Доповідь всього 20 хвилин, тому детальний аналіз краще почитати на сайті.

Посилання:
- Видео
- monorepo.tools
- nx.dev
- Nrwl is taking over stewardship of Lerna

Як прискорити eslint?
#cli #tooling
Чи довго працює eslint залежить від вашого проєкту та налаштувань eslint (включаючи правила, що використовуються).

1. Перевірте, чи eslint перевіряє лише потрібні файли. Раптом ви настроїли перевіряти node_modules? Щоб вивести всі файли, включаючи ті, де немає помилок, додайте в команду --format tap.

2. Перевірте чи не іде eslint вище по ієрархії і не мерджит конфіги з інших директорій, які ви не очікуєте.
Якщо забути поставити "root": true, можна довго дебажити що ж те так з конфігом

3. Налаштуйте, замініть або вимкніть довгі правила. Для їх знаходження запустіть змінну оточення TIMING=1. Приклад TIMING=1 npm run eslint. Докладніше в документації

4. Якщо все вище написане не допомагає, то час включати cache. Для цього додайте --cache. Ви можете зіткнутися з типовою проблемою кешування – коли скинути кеш або чому він порожній. Тому треба додати --cache скрізь, інакше eslint затиратиме кеш. Докладніше у документації

Update: Додав пункт 2. Дякую Євгену за коментар.

Як змінити модифікатор TypeScript?
#typenoscript

Версія TypeScript 2.8 додала можливість додавати або видаляти складовим типам модифікатори readonly та ?. Для цього використовують очевидні оператори + і -. Детальніше в документації. Приклад використання:

interface ReadOnlyTodo {
readonly noscript: string
readonly denoscription: string
readonly completed: boolean
}
type Mutable<T extends object> = {
-readonly [K in keyof T]: T[K]
}
type MutableTodo = Mutable<ReadOnlyTodo>

Рецепти на тему:
- Як підтягнути TypeScript?

Коли використовувати npm ci?
#npm

Нагадаю npm ci або npm clean-install виконуватиме такі дії:
1. Видалить node_modules.
2. Встановити всі залежності з package-lock.json
На відміну від npm install, npm ci ніколи не змінюватиме ваш package-lock.json та викине помилку, якщо треба його змінити. Тому npm ci гарантую повторяємось.

В CI використовуйте npm ci та кешування node_modules або npm cache директорії (команда npm config get cache покаже де вона).

В Dockerfile використовуйте npm ci. Його слід роботи після копіювання package.json та package-lock.json але копіювання до js/ts файлів. Це треба для Docker layer caching.

При локальній розробці використовувати npm ci не принципово.

Які питання поставити, щоб перевірити розуміння REST?
#list

Давно не було переліку питань для інтерв'ю. Ви можете їх знайти за тегом #list. Сьогодні поділюся добіркою моїх питань для інтерв'ю щодо REST. Звичайно без відповідей, інакше як мені потім їх на співбесідах запитувати.

1. Опишіть структуру HTTP запиту та відповіді.
2. Розкажіть як працює кешування в Інтернеті.
3. У яких випадках, які групи статус кодів використовуються?
4. Що таке CORS? Для чого він використовується?
5. Що таке Etag? Для чого він використовується?
6. Які існують стандартні HTTP методи? У яких випадках, які ми використовуємо в REST?
7. Як надіслати заголовок, якщо тіло відповіді вже надіслано?
8. Чим відрізняються http1.1 та http2?
9. Спроєктувати REST API для todo list. Функціонал: створити завдання, завершити завдання, змінити опис завдання, видалити завдання, отримати список завдань, змінити порядок завдань, змінити категорію задачі.
10. Спроєктувати REST API для скорочення посилань. Функціонал: створити нове коротке посилання, відкрити посилання, переглянути аналітику за посиланням, видалити посилання.

Сьогодні в рекомендаціях два відео з Google I/O 2016 присвячені Firebase RealTime DB. У деяких випадках не варто створювати своє API, а краще використовувати цю базу. Наразі вже є Cloud Firestore, але концепції з відео не втрачають своєї актуальності.
#worth_seeing
👀 Deep Dive into the Realtime Database
👀 The key to Firebase security

​​Поділюся досвідом використання transform.tools. Частіше всього я використовую JSON To #TypeScript. Після трансформації можуть знадобитися правки, наприклад, додати enum. Приклади використання:
– додати інтерфейс події для Google Cloud Function. В ідеальному світі це вже повинно бути в SDK.
– описати інтерфейси запитів і відповідей для інтеграції зі стороннім API, у якому є текстова документація, але не специфікація. Якби була специфікація, наприклад Swagger, то правильно було б створити типи з неї.

Простий інструмент, який може заощадити час, тож про нього потрібно пам'ятати.

Хочу допомогти своєму товаришу Віталію Ратушному у його збиранні грошей для ЗСУ.

Буду відвертим, цей збір ні чим не відрізняється від десятка йому подібних, за винятком:
1) Це перший збір, що я піарю на каналі.
2) Донат на 2000+грн можна обміняти на мою годинну консультацію з потрібного вам питання або мок інтерв'ю зі зворотним зв'язком. Доступно для перших п'яти.
3) Донат на 10.000+грн можна обміняти на 4-е менторинг сесії на протязі цього літа. На першій аналізуємо поточний рівень, куди хочете рухатися та складаємо план. На наступних аналізуємо прогрес і вносимо виправлення. Доступно для перших трьох.

FAQ
❓Чому саме зараз? Цього тижня я маю першу відпустку більше ніж за два роки.
❓Як зробити запит? Після донату просто напишіть мені в телеграм, я надішлю посилання на calendly, щоб ви забронювали таймслот.
❓А слоти ще лишилися? Я зроблю апдейт посту, коли закінчуватимуться.

Реквізити:
🔗 Посилання на МоноБанку
💳 Монобанк 5375 4112 0190 4310
💳 Приватбанк 4149 6090 0764 1402
💵 Payoneer v.ratyshnij@gmail.com
🔗 Банка на Wise
🔗 Пост на FB
🔗 Notion

Дякую за донати. Все буде Україна!

Update: Слоты законились

Що таке Event Loop Delay?
#nodejs_api

Node.js може обробляти одночасно кілька запитів. За це відповідає Event Loop. Синхронний код (require('fs').readFileSync) або підвищене споживання CPU (обробка великого JSON) гальмуватиме Event Loop. Для вимірювання, наскільки це відбувається, використовується метрика Event Loop Delay. Наприклад, якщо якісь endpoint блочить Event Loop Delay на 100ms, то процес не може опрацювати більше 10 таких запитів на секунду. Приклад

Чим можна вимірювати:
– існує Node.js апі perf_hooks.monitorEventLoopDelay
– це частина метрик у pm2
– prom-client та його аналоги теж збирають цю метрику

У друзів каналу новина: корпоративний центр навчання NIX розпочинає набір на безкоштовну освітню програму FrontEnd + JavaScript.
Курс ідеально підійде студентам і розробникам-початківцям. Ще є курси з Java, .Net, QA.
Формат — онлайн.
Старт — кінець серпня – вересень.

Більше деталей та реєстрація тут

Чому погано використовувати поліфіли в Node.js?

Нагадаю значення, поліфіл (Polyfill) — це код, який реалізує функцію у браузерах, які не підтримують цю функцію. Приклад:
Array.prototype.myForEach = function(callback){
for(let i=0; i<this.length; i++){
callback(this[i],i,this)
}
}
А ще поліфіл є окремим випадком Monkey Patching відомого так само як Code Poisoning. У браузерах використання поліфілів виправдане, оскільки вони дають більше користі, ніж шкоди.

Чому ж використання поліфілу у ноді це погано? Адже за його допомогою ми можемо додати фічу з нового ECMAScript...

Node.js розробник повинен завжди знати, на якій версії Node.js буде працювати його код. Повинен використовувати в розробці ту саму версію, що на продакшені. Dev/prod parity Тому поліфіл в Node.js середовище це просто Monkey Patching. Для додавання ECMAScript фіч краще обновляти Node.js.

Почну зі слів подяки. Читачі каналу дякую вам 🙏🙏🙏! Я не очікував такого відгуку на збір. Низький уклін вам за довіру та підтримку. За вашою допомогою збір закрили за тиждень.

В рамках підтримки цього збору я провів 5 мок інтерв'ю. Запит у 4-х читачів був на зворотний зв'язок з технічних навичок. Ще один запит був як найкраще проводити інтерв'ю. Як ви бачите запити не включали перевірку продуктового мислення (product mindset). У стартапах для інженера це надзвичайно важлива навичка.

Сьогодні у рекомендаціях не відео, а подкаст від того самого Макса Іщенка, який зробив Dou та Djinni. Подкаст називається "Startups are hard". Сьогоднішній випуск називається #19: Як виглядає версія цієї фічі, яку можна зробити за день? Це одне з моїх улюблених питань для product mindset interview.

Рекомендую підписатися і послухати випуски, що вже вийшли
#worth_seeing

Як генерувати первинний ключ?

TL;DR; використовуйте nanoid

Сьогодні поговоримо про формат первинного ключа. Почнемо з типового порівняння id VS uuid.

id, інкрементний ключ, тобто 1, 2, 3, ...
➕ простий у роботі
➕ по ньому можна сортувати
➖ Не є String. Нагадаю, що id входить до URL, який є String.
➖ Легко створити колізію. Приклад із практики: до міграції додано admin c id=1000. Це пішло у реліз.
➖ Створюють ризики для системи – її просто аналізувати: скільки сутностей, як швидко вони додаються
➖ сутності не можна переносити між оточеннями (типова проблема самописних CMS)

uuid, приклад 1FE577FE-9AED-4728-8B88-AAA11FA11E76
➕ гарантовано унікальні
➕ можна генерувати будь-де, а не тільки в БД. Нагадаю про crypto.randomUUID() і браузер, і в Node.js.
➖ довгі, тобто потрібно більше місця, щоб зберігати та передавати
➖ Людям із ними не так зручно працювати
➖ Сортування за таким ключем не має сенсу

Хорошою альтернативою uuid є nanoid. Приклад, V1StGXR8_Z5jdHi6B-myT. Ще він дозволяє вибрати довжину та алфавіт. Тому його часто використовують у web додатках.

Посилання по nanoid:
🔗 https://www.npmjs.com/package/nanoid
🔗 https://github.com/Jakeii/nanoid-postgres
🔗 https://zelark.github.io/nano-id-cc/

Що таке дизайн система?

Іноді я розповідаю про Frontend. Сьогодні саме такий день. І так, дизайн система це набір правил для дизайнерів та готових компонентів для розробників.

Типова помилка для вебзастосунків це індивідуальний дизайн. Компанія витрачає гроші та час співробітників не на бізнес-функционал, а на індивідуальний стиль, компоненти, тощо. Якщо вона не має мільйонних обертів, то робити так – це гроші на вітер. У 99% випадків унікалізації за допомогою логотипу достатньо. Треба використовувати готову дизайн систему, до якої звикла аудиторія.

Приклади дизайн систем:
👍 material дизайн система від Google, стандарт де-факто в Angular
❤️ ant.design дизайн система від Alibaba, мій звичайний вибір для React
🔥 новинкою цього літа є cloudscape.design, дизайн система від AWS.
👉 ще 50 дизайн систем тут

​​Привіт, друзі!👋

Ми продовжуємо проводити івенти, і цього разу запрошуємо вас на лекцію з Serverless functions від ліда GDG Cloud Kyiv!

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

Ви дізнаєтесь як і коли застосовуввти безсерверні функції, а також на власні очі побачите практичне застосування AWS Lambda та Google Cloud Functions.

Івент відбудеться 30 липня, о 16:00. Реєстація за посиланням. Долучайся, буде цікаво🔥

А ви знаєте про ось ці два репозиторії?
– nodebestpractices
– javanoscript-testing-best-practices
якщо ні, то саме час їх прочитати