А зараз супер короткий лайфхак - якщо відкрити репозиторій в github і просто натиснути "." (на англ. розкладці), то у вас в браузері відкриється веб-версія VSCode.

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

Тому, хто ще не пробував, раджу це зробити. І на додачу, можете глянути собі Github Codespaces. Це фактично те ж саме, тільки з наворотами. Тут у вас буде майже повноцінний компʼютер і зможете запускати свої проекти просто у браузері. Тільки, здається, там треба PRO аккаунт. Але якщо ви студент, то зареєструйте свою студентську пошту і зможете отримати його безкоштовно 😉

#tips

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