Пʼятниця - пора комплітити спринт 😁
Дожимайте задачі, гайс ✌️

⭐ IMDb 8.0 🎬
Гра в імітацію (2014)

Історія на реальних подіях.
Алан Тюрінг створив універсальну машину для розшифровки секретного коду Енігми.
Це уможливило перемогу над нацистами в Другій світовій війні 🕊.

Бенедикт Камбербетч в головній ролі показує як це все було.

Про Алана Тюрінга:
- автор універсальної Машини Тюринга 🤖
- автор тесту Тюрінга 👨 or 🤖
- Повнота за Тюрінгом 💯
- ці та інші його праці зробили великий вклад в розвиток штучного інтелекту 🧠

#movietime

nandgame.com - інтерактивний симулятор хардвера компʼютера.
Алан Тюрінг би зацінив 👆.

Я пройшов більшість гри та дізнався: 😮
- Як фізично зберігається біт інформації
- Як одиниці та нулі формують регістри памʼяті
- Як процесору вдається синхронізувати мільярди імпульсів по всій платі

Дивовижно як щось неймовірно складне створюється з примітивних компонентів:
- потужний компʼютер з тринзисторів, NAND компонентів
- людина і всесвіт з атомів
- крута веб апка з компонентів реакта 🔝

Як софтвер девелопер я задався такими питаннями:
- ❔ Як я можу написати таку гру на реакті?
- ❔ Як анімувати SVG?
- ❓ Як автоматично прокласти оптимальний маршрут конекшенів щоб візуально все було читабельно?
- ❓ Які ліби краще використати?

Це допомагає скілапитись, дає хороші ідеї при розробці фіч проєктів.

А головний ре-інсайт від цього: 💡
- Крута апка будується з композиції купи елементарних компонентів.
- Спрощуй і розділяй компоненти на десятки рядків коду, не тисячу.

🏗 buildSortParam - ютіла яка генерує правильну стрінгу сортування для запитів на API.

Не раз помічав баги коли список айтемів рендериться хаотично. Іноді це треба, але зазвичай це баг відсутнього сортінга в реквесті.
Причини цим багам дві:
- Або взагалі не думали про те в якому порядку вивести результати бекенда
- Або хибно написана стрінга сорта

Ця ютіла вирішує повʼязані баги наступним чином:
- Type safe - компілятор крашне коли будуть опечатки чи хибні назви філдів ✅
- Intellisense - твоя IDE підскаже які пропси доступні у ентіті ✅
- Легка конвенція-паттерн для копіпаста 👍
- Змушує думати про те який філд треба заюзати для сортінга 🧠

А мій бекенд вказує дефолтний сорт на своїй стороні, мені це не треба 😜

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

TypeScript playground demo - тут код імплементації ютіли з відповідними дженеріками.

#coding

🔝 volta.sh - ТОПова тулза для запуску різних версій ноди та пекедж менеджерів.

Один раз в пекедж джсоні сконфігурив - і далі автоматично запускається потрібна версія 💪

Модернові проєкти на лейтест стабільній 18 ноді 🔥
Пет проєкти на бета версіях 19+ 😮
Легасі на 14 ітд 😒

Колись побачив що цю тулзу юзає офіційно TypeScript - від тоді вольта це ванлав ❤️

#software

⭕ Ерора вказана в хибному місці сорців - ознака зациклених залежностей aka infinite dependency loop.

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

Скоріше всього компілятор запутався бо файли імпортять файли які імпортять самі себе десь в ланцюгу імпортів.

✅ Рішення - перевір циклічні залежності через dpdm пакет.

Я в package.json прописую команду для зручності:

"deps:check": "npx dpdm src --warning=false --tree=false"

#coding

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

Останній проблемний кейс - ідешка заімпортила сорс файл 🔤🔤🔤🔤 з ліби замість того щоб заімпортити лише🔤🔤🔤🔤🔤 тайпінги з dist папки.

Це призвело до того що білд крашився - TypeScript компілятор перевіряв типізацію самої ліби і там фейлився 🤦‍♂️ (в дев режимі білдить ок, тому не помітно одразу).

tsconfig.json з конфігою “skipLibCheck: true” - не допомагає в цьому кейсі. Бо заімпортився “.tsx” файл який мусить пройти компіляцію і всі перевірки типів.

Тобто правильний імпорт на скріншоті буде:

import { UseLoadScriptOptions } from '@react-google-maps/api/dist/useLoadScript';

Годину витратив на пошуки проблеми ⏳
Буває :)
Довіряй але перевіряй що автоматично вписує твоя улюблена IDE 😉

#coding #typenoscript

256+, летимо ✈️ 🚀 🚀

Тепер нас не опишеш одним байтом - ми більше 😎

Дякую усім вам 🤗
Найкрутіше попереду!
❤️ ❤️ ✅

#milestone

🐑 🐑 structuredClone - нативний метод джс, який вміє копіювати майже все: ✅

→ буфери
→ типізовані масиви
→ глибоко вкладені обʼєкти
→ мапи і сети
→ зациклені обʼєкти (тут звичайний JSON.stringify взагалі крашиться)

І звичайні примітиви, звісно ✅

Що не вміє клонувати це: 🙅‍♂️🙅‍♂️
→ функції

e.g. () => 5;

→ ДОМ елементи

e.g. document.createElement(‘div’);

→ днк овець (так, емоджі вівці це референс на успіхи генної інженерії)

❕ Хей, та викинь ти нарешті той lodash з проєкта!
Є сучасні нативні методи та значно кращі ліби наприклад ramdajs

p.s. цей метод працює в двигуні браузера, а для ноди є аналогічне Serialization API

TypeScript playground demo

#coding

🔤🔤🔤 Profile Survey - нова фіча таргера 🎉

Сьогодні реліз фічі профіля - пліз зайди на сайт і за 5 хв заповни коротку форму ✍️

Збільшуємо інтерактив, гайс 😏

Назбиравши достатньо інфи, тут в каналі я опублікую статистику: 📊 📊
→ з яких міст України і взагалі світу
→ які зарплати
→ скільки років комерційного досвіду
→ тощо

Чим більше профілів буде заповнено, тим реальніше статистика відобразить ситуацію на ринку. ✅
Запрошуй друзів та колег 🤗

🔐 Інфа конфіденційна, профілі рекрутерам без вашого дозволу не зашараться 👌

#targer

🔐GitHub oAuth покращено. Заповнити свій профіль стало ще безпечніше. ✅

Тепер таргер запрошує лише рідонлі доступ до гітхаб акаунта під час авторизації 👍
Це відповідає відомому принципу Principle of least privilege.

🙀 Раніше оауз запрошував доступ до ваших приватних репозиторіїв щоб сетапити власні репо під кожне змагання кожному учаснику.

З метою захисту ваших даних даних, флоу змагань буде переписано.
Таргер мігрує на GitHub Apps integration та буде інвайтити учасників змагання як колабораторів на репо кожного змагання.

Щоб ваші дані були в безпеці 😍

p.s. дякую усім хто вже заповнив профілі 😊
Збираємо інфо далі ⏳

#targer

😎 Шикарний mounted паттерн для useEffect.

Ключовий для асинхронних тасок зокрема:
→ проміси 🙏
→ таймаути ⏳
→ інтервали ⏳
→ колбеки 🤙

Багато девелоперів не бачать наскільки це лаконічне і витончене рішення купи асинхронних проблем.

І починають оверінжинірити - додають useRef, створюють зовнішні мутабельні змінні, залучають глобальний стейт рідакса тощо. 😨 🙅‍♂️

Хендли асінки лаконічно, бро 😉

#coding #react #async

🔤 🆚 🔤 Що вміє інтерфейс чого не вміє тип:
→ мерж декларацій

Що вміє тип чого не вміє інтерфейс: 💪
→ літерали
→ юніони
→ тапли (кортежі)
→ маппед тайпи
→ кондішинал тайпи
→ темплейт літерали

Все інше можна зробити і типами і інтерфейсами.

Питання синтаксису або конвенцій на проєкті, кому що подобається 😘 😘

#coding

Дві букви краще ніж чотири.
Маєш різні проєкти з різними пекедж менеджерами?
npm, yarn, pnpm - що якби не паритись яку команду де прописати?

Придумали ютілу @antfu/ni ✅

Просто написав ni - заінсталило пекеджі ✅
Написав nr start і запустило start команду правильного менеджера в проєкті 🧠

→ реально тепер не парюсь чий локфайл прописаний в репо
→ менше символів для вводу
→ fig.io підказки працюють справно 💫

Особисто для мене фаворитом досі залишається yarn ❤️
Но тестую pnpm і ютіла від антфу допомагає легко перемикатись між проєктами, які навіть на npm бувають з різних причин.

https://github.com/antfu/ni

#software

🔝 react-number-format - крута ліба для юзер френдлі форматування інпутів:

→ грошові суми, великі відстані (пише кому де треба)
→ телефонні номери по кастомному паттерну (пише рисочки і пробіли де хочеш)
→ кастомна функція для форматування самих диких варіантів

Реальний кейс з практики - інпути для вводу зарплат на профілі таргера.

💅 UX note
Для числових інпутів роби плейсхолдер “0” - щоб юзер міг одразу вписати число яке хоче, не видаляючи “0” from value - тобто нуль завжди видно коли пустий інпут.

Документація ліби містить усі необхідні приклади коду і інтерактивні демо.

p.s. заповни профіль на таргері і сам відчуй як це зручно 😏 - https://targer.dev/survey

#coding #react