Duck typing 🦆

Хто ми? - JS розробники.
Що ми хочемо? - Зберігати в одній змінній булеани, стрічки та функції.
~ Мій розумний знайомий

Сьогодні не про типізацію в JS, а про duck typing (качину типізацію, якщо українською) у програмуванні. Коротко, це можна описати так: "Якщо воно виглядає як качка, плаває як качка і крякає як качка - це напевно і є качка".

Реальний кейс: уявіть, що у вас завантажуються дані з якогось джерела (бекенд, файл тощо). Хай це буде Користувач (User) з полями імʼя (firstName) і прізвища (lastName). І вам для достовірності потрібно перевірити чи справді цей обʼєкт є Користувачем. Тому у вас зʼявиться схожа умова:

‘firstName’ in user && ‘lastName’ in user

Помітили щось схоже? Якщо є імʼя і прізвище, то це - Користувач. А насправді там може бути ще багато інших полів. І якщо піти далі, то можна додавати перевірки і на інші поля. Але принцип перевірки не зміниться - на основі властивостей обʼєкта, ми будемо асоціювати його з певним типом. Це і є duck typing.

Трішки детальніше можете ознайомитись тут - читати статтю
А якщо хтось добре знайомий з Typescript, можете також глянути Type Predicates - читати статтю

А які у вас були випадки використання такої типізації?

#article

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

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

Приєднуйтесь! 💛

VS Code Extensions

Як середовище я зараз використовую VS Code. Для підвищення продуктивності і комфорту я часто додаю собі різні розширення. Тому хочу поділитись особисто своїми.

GitLens - дає багато функціоналу для роботи з Git. З ним буде набагато легше працювати з репозиторіями, ходити по історії файлів і купу всього іншого. Тепер кожен раз коли я зустрічаю стрічку гавнокоду - я одразу бачу, що то я її написав 2 місяці назад.

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

Indent Rainbow - кольорова табуляція. Так, багато хто не любить, коли в редакторі мільйон кольорів (наприклад, Настя), але з цим розширенням буде візуально легше контролювати відступи. До речі, хто користується Bracket Pair Colorizer - тепер цей функціонал вже вбудований в VS Code.

Better Comments - кожна ваша TODO тепер буде підсвічуватись. Там звичайно є і інші правила, тому ви можете різними способами класифікувати свої коментарі.

Project Manager - помічник в роботі з різними проектами. Щоб запустити проект, вам потрібно знайти проект, відкрити папку з ним і тд. А це розширення допоможе автоматизувати цю роботу. Просто вибираєте проект із списку і починаєте над ним працювати.

Це були досить загальні розширення, ніяк не повʼязані з конкретними технологіями. Вони в мене включені завжди. А інші я вже підключаю в залежності від проекту. Тому якщо у вас проект на певній технології, раджу глянути відповідні розширення: Javascript Snippets, ESLint, Prettier, React Snippets, Angular, Svelte, Python.

Також раджу вам переглянути вкладку популярних розширень.

І на завершення поділюсь розширеннями, які я використовую чисто для краси. Це One Dark Pro, для файлових іконок - Material Icon Theme, а для іконок в VS Code - Material Product Icons.

#tips

Методи масиву

Про методи масиву доволі часто запитують на різних співбесідах. І це не дивно, адже дуже часто ми працюємо саме з масивами даних. Завджи потрібно щось вставляти, видаляти, змінювати чи обчислювати. І Javascript дає багато методів для роботи з цією структурою даних. Ви не маєте знати їх всі напам'ять, але назвати хоча би декілька потрібно.

Тому зараз ми коротко розглянем основні з них:

.push - вставка в кінець масиву;
.pop - видалення з кінця масиву;
.splice - видалення і вставка всередину масиву;
.slice - отримання підмасиву з масиву. Коли у вас є масив із 100 елементів, а вам потрібні тільки елементи від 20 до 30 - користуйтесь цим методом;
.forEach - проходження циклом по масиву. Всередину передайте функцію, яка буде працювати з кожним елементом;
.indexOf - якщо вам потрібен індекс конкретного елементу з масиву - ця функція саме для вас;
.find, .findIndex - якщо вам потрібно за певними параметрами знайти елемент або його індекс, створіть функцію-предикат (функція, що повертає boolean) та використайте ці методи;
.map - коли вам потрібно з одного масиву створити інший, змінивши елементи;
.filter - допоможе вам профільтрувати масив, а саме створити новий тільки з елементів, які вам "підходять";
.reduce - дослівно зменшує ваш масив. І зменшує він його в одну змінну, тільки вам треба описати як це зробити. Це може бути просто сума елементів, добуток чи створення іншого обʼєкту з вашого масиву.

Детальніше про методи масивів - читати статтю

#interview

Reduce в JS

[🍔,🍟,🍕,🍿].reduce(eat)
>> 💩

Обіцяли - виконуємо. Тому, що ж з себе представляє метод reduce і з чим його їсти?

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

Роботу цього методу я хотів би показати на різних прикладах, тому нижче прикріпляю посилання на свій же пост в Notion. Також чекаємо відгуків, про такий формат статтей.

До речі, у статті можна залишати свої коментарі 😉

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

#article

Recharts

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

Я тоді як тільки не викручувалась - використовувала чистий svg (дякую політеху, що ми хоч трохи вміли ним малювати) і прям мені дуже хелпанула recharts бібліотека. Завдяки ній, мені вдалось побудувати більшість графіків, адже вона дуже гнучка і дозволяє кастомізувати до найдрібніших деталей. Також вона має дуже багато видів графіків і дозволяє їх комбінувати між собою.

Тому, якщо вам потрібні графіки на ваш сайт або просто хочете попрактикуватись - можете сміливо використовувати recharts.

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

#library

Опитування

Всім привіт! Сьогодні хочемо з вами більше познайомитись і зрозуміти, які люди у нас тут зібрались. Тому підготували два невеличких опитування. Будемо дуже вдячні, якщо візьмете участь 💛

Що таке polyfill?

Якщо у вас запитають таке на інтервʼю, просто коротко відповідаєте, що це додавання в старі браузери нового функціоналу. І якщо зробите це впевнено, то, швидше за все, питань по цій темі більше не буде.

Я думаю, ви зараз використовуєте одну з новіших версій JavaScript. У вас є багато методів, функцій, багато всього іншого вже вбудованого і готового до використання. Але ж не всі вони були в мові з самого початку, а додавались в процесі. Тому коли ви відкриєте доступ до свого веб-сайту, у людей зі старим чи не популярним браузером може просто бути старіша версія JS, або просто не бути підтримки певного функціоналу.

А що б ви зробили, якщо, наприклад, знали, що в деяких користувачів не буде методу filter в масивах? Можна написати свою і використовувати її, правда ж? Це по суті і є поліфіл. Тут тільки уточнимо, що він буде додаватись прямо як метод масиву (через Array.prototype.filter). А ще правильніше, якщо компілятор вашого коду перевірить, чи є в цьому браузері такий метод, і якщо ні, то додасть його.

Тож, підсумовуючи, поліфіл - це код, який дозволяє використовувати новий функціонал на старих браузерах.

Якщо цікаво одним оком глянути на приклад, гляньте головну сторінку Babel
Також можете почитати більше про поліфіли - читати статтю

#interview

Тренди серед мов програмування

Тут буде чисто субʼєктивна думка про те, що є і буде досить популярне в сфері ІТ. Розповідаю лише про те, що мені хоч трохи знайомо.

Javascript/Typescript - все і вся фронтенду, та один із найсильніших гравців серед інших сфер програмування. Багато хейтерів, багато фанатів, але факти кажуть лише про те, що кількість програмістів, проектів, фреймворків і бібліотек лише росте.

Python - точно не менш трендовий від Javascript. Зараз він просто повсюди, штучний інтелект, системне програмування, бекенд і тд. Простий для вивчення, але потужний у використанні.

Dart - фреймворк Flutter вже нарівні конкурує з React Native. Я вже говорив, що це супер рішення для стартапів, коли одним махом закриваєте купу девайсів. Тому мобілка і є основною ціллю в цій мові.

Swift, Kotlin - якщо є багато часу та грошей, можна спробувати написати нативні додатки для кожної платформи окремо. Такий підхід буде правильнішим. Ну і робота додатків буде продуктивнішою.

Java - все ще працює на 3 мільярдах девайсів і дозволяє створювати моди на Майнкрафт (це я так жартую). А взагалі, є досить велика потреба в розробниках, які володіють цією мовою, в основному, здається, це бекенд або десктоп.

C# - це про велику екосистему від Microsoft, в якій, здається, все круто структуровано. Підходить для різних рішень, особисто бачив в бекенді, а також разом з C++ вони зайняли левову частку серед геймдеву.

Go/Rust - досить нові гравці, які взяли все хороше та постарались виправити все погане в попередниках. Обидві досить продуктивні, багато людей переходять на них. Rust навіть був визнаний мовою, яка найбільше подобається розробникам на Stack Overflow.

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

А якщо вам цікаво подивитись різні графіки, яка мова де рулить і хто що використовує, можете глянути статтю на DOU чи Stack Overflow.

Читати статтю DOU
Читати статтю Stack Overflow

#experience