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

Що таке ORM?

Або як працювати з базою даних, не використовуючи прямих запитів до неї.

ORM - це технологія, підхід, який звʼязує типи обʼєктів між різними системами. Найчастіше, це саме про звʼязок між базою даних та мовою програмування. Техніка, що доволяє маніпулювати базою даних, використовуючи обʼєктно-орієнтований підхід. В такому випадку утворюється така собі “віртуальна база даних”.

Без використання ORM пошук жовтого покемона виглядав би десь отак:

data = query(“SELECT pokemon FROM pokemon_table WHERE color = ‘Yellow’”)
while (pokemon = data.next()) {
do_something_with(pokemon)
}

А з використанням ORM все буде трохи простіше:

pokemons = Pokemon.query(color=”yellow”)

Помітили, що немає самого SQL-запиту?

Все, що вам потрібно зробити - це створити клас, який опише певну сутність в базі даних. А тоді сама бібліотека ORM надасть вам інтерфейс для роботи з базою.

Безумовно є ряд переваг і недоліків. І от саме ця простота в користуванні, відсутність повторень в написанні запитів виглядає круто.

В кожній мові реалізовані свої бібліотеки, з тих що мені знайомі це:
- JS - TypeORM, Sequalize, Prisma (яка зараз досить сильно набрала популярність);
- Python - Django ORM, SQLAlchemy;
- C# - Entity Framework;
- Go - GORM;
… і багато інших.

Якщо ви працюєте з базою даних - навряд чи вийде оминути цю техніку. А якщо ще не встигли - саме час спробувати.

Більше можете почитати тут - читати коментар

#article

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

Дивитись відео

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

#tips