Давайте зіграємо в ІТ-абетку. Правила занадто прості - кожен наступний гравець повинен називати слово, яке починається на останню букву попереднього. Використовуємо тільки слова, які пов‘язані з ІТ.

Ми починаємо: Гавнокод → Вам на Д 😉

Що таке Generics?

Якщо на співбесіді у вас будуть питати щось по TypeScript, я даю 100%, що одне з питань буде про generics.

Generics - це можливість створювати компоненти, що працюють не лише з одним, а з кількома типами даних. Простіше кажучи, це коли тип передають як параметр. Давайте я спробую пояснити на прикладі.

Уявімо, що ви реалізовуєте свою функцію сортування. Вона може приймати масив різних типів даних (number, string і тд) і має повертати посортований масив з тим же типом. Відразу кажу, що any, unknown - це погана ідея. Тут точно не обійтися без generics. А ось так це буде виглядати:

function mySort<Type>(value: Type[]): Type[] {
// realization
return sortedValue;
}

Якщо ви вперше бачите generics, то даний запис може виглядати для вас трохи дивно. Але не спішіть розчаровуватись. <Type> - це просто тип, який буде переданий функції. Якщо ви викличете функцію mySort з масивом чисел, Type буде рівний number, якщо з масивом стрічок - string, і відповідно поверне масив з даними того ж типу. Ось і все, це і є generics.

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

#interview

Структури даних
або чим відрізняється черга в магазині від тарілки млинців?

Це досить важлива тема у компʼютерних науках. В університетах на це виділяють окремі курси. Тому, вона так чи інакше зустрічатиметься вам у процесі навчання та роботи.

Структури даних - це спосіб організації даних в компʼютерах. Їх є певна кількість, кожен має переваги і недоліки. Тут ви можете згадати про масиви звичайні та асоціативні (словники в Python, обʼєкти в JavaScript). А ще буває черга, дерево, стек та багато інших.

Це справді велика тема, яка потребує багато часу і зусиль для вивчення. А для великих тем варто мати коротку шпаргалку. Однією хочемо з вами поділитись. Як плюс, виділяємо ще графічні схеми, що дозволяють легше вивчити чи згадати структуру.

Відкрити сайт

То ж яку структуру даних можна описати тарілкою млинців?

#tips

Агов агов! Ми трішки пропали, але сподіваємось, що ви ще нас не забули! 💛

Сьогодні хочемо поділитись розширеними типами (utility types) в TypeScript, які вам точно стануть у пригоді! Дану тему найкраще розповісти за допомогою прикладів, тому написали статтю в зручному форматі!

Читати статтю

Пссс: чекаємо в коментарях утиліти, які не були згадані в статті, але ви їх знаєте і використовували!

Що таке SyntheticEvent?

Різноманіття браузерів може підловити вас у будь-який момент. Наприклад, коли вам потрібно обробити клік користувача по кнопці. Адже навіть події (Event) можуть відрізнятись у різних браузерах.

Для полегшення життя React створив власну обгортку, яка є дуже схожою на нативну подію браузера. SyntheticEvent - це обгортка, завдяки якій у всіх подій в будь-якому браузері буде однаковий набір функцій та властивостей.

Якщо раптом вам буде потрібна справжня подія, в реактівської обгортки є властивість nativeEvent, яка дозволить вам отримати бажане.

В старіших версіях React ці обгортки навіть перевикористовувались (pooling), що підвищувало продуктивність. Я, наприклад, не знав тоді про це і не розумів, чому отримую undefined, якщо прокидував подію в асинхронний код.

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

Читати документацію

#interview

Сьогодні хочемо поділитись з вами двома, хоч і давно популярними, але дуже корисними розширеннями для VSCode.

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

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

Розповідати можна багато, але краще просто спробуйте.

Відкрити Project Manager
Відкрити Bookmarks

#tips

Як часто вам приходиться працювати з регулярними виразами? Думаю, не часто, але shit happens і деколи проект змушує вас написати декілька регулярок для валідації або з інших потреб. Не сумуйте. Звісно, є Stack Overflow, де ви зможете знайти готові (я не вірю, що хтось пише їх власноруч). Але ми ще хочемо поділитись з вами крутим сайтом, де ви зможите протестити регулярки. Редактор підказує, де помилка у вашому записі і розписує, що означає той чи інший символ. Також даний сайт має багато інших приколюх, тому зберігайте і користуйтесь!

Відкрити сайт

Успіхів 💛

#tips

Repository types

Сьогодні майже кожен проект складається з кількох частин та кодових баз. І ось це добро, власне, і формує репозиторій. Чи репозиторії? Як правильно поділити свій проект і зберегти на GitHub?

Серед наявних підходів можна виділити три:

- Monorepo - весь код зберігається в одному репозиторії. Зазвичай в кореневій папці є кілька вкладених, де власне вже розділені всі частини проекту. Цікаво те, що деякі великі компанії (такі як Google) з величезними проектами використовують саме monorepo.
- Polyrepo - це коли для кожної частини проекту свій репозиторій.
- Hybridrepo - це мікс обох підходів. Наприклад, мобілка та веб в одному репозиторії, а бекенд в іншому.

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

Monorepo може добре працювати з залежностями, адже при правильому управлінні можна шарити одні і ті ж бібліотеки між різними частинами. Те саме стосується і самого коду. Якщо у частинах проекту використовується одна мова програмування, велика ймовірність, що у вас буде якийсь спільний код. Існують навіть спеціальні інструменти для ефективнішої роботи з monorepo, наприклад, turborepo (дуже багато repo 😄).

Тож, як і завжди, вибір дуже сильно залежить від контексту. Головне вижати максимально плюсів і нівелювати більшість мінусів. Не варто завжди брати за приклад Google, адже кожен ваш проект унікальний.

А якому способу віддаєте перевагу ви? Особисто мені більше подобається розділяти проект на кілька репозиторіїв.

Turborepo in 2 minutes

#experience

Що таке Git Hooks?

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

Git-хуки (або гачки) створені десь для цього. Вони виконують користувацький скрипт перед чи після певної події, наприклад, pre-commit, pre-push, post-commit.

На співдесідах часто можуть запитувати, яке ж практичне застосування цих речей. І особисто мій улюблений підхід - це використання pre-commit та pre-push.

Налаштовувати їх дуже зручно за допомогою husky. Ви можете просто вказати команду на певний хук, а файли вже генеруються самі. На pre-commit я люблю запускати prettier для форматування та eslint для пошуку проблем у коді. А щоб не проганяти ці речі через увесь проект, додайте lint-staged, щоб робити це тільки у файлах, з якими ви працюєте. На pre-push я віддаю перевагу запуску тестів, які вже запевнять, що, як мінімум, ви нічого не зламали.

Все описане вище було для JavaScript середовищ. А тут є інструмент для загальних рішень - pre-commit. Хоча, якщо трішки почитати, можна все зробити вручну.

І ще, по секрету скажу, що можна пропустити запуск цих хуків, якщо додати --no-verify до своєї команди. Тільки ніколи так не робіть, а якщо і зробите, то нікому не розказуйте 😉

Читати більше

#interview

#todo поділитись улюбленим мемом, пов'язаним з ІТ 😉