Що таке Set/Map та чому вони існують?

Якщо говорити про Set як про структуру даних - це невпорядкована колекція, що не має дублікатів. В JS ця структура вже реалізована з коробки і готова до використання. Думаю, більшість з нас прибирають з масивів дублікати використовуючи саме Set.

const array = [1, 2, 3, 1, 2];
const set = new Set(array);
const arrayWithoutDuplicates = Array.from(set);

Коли ще корисний Set?

Специфікація каже, що перевірка елемента на входження в колекцію виконується швидше ніж O(n) (може бути O(1) або ж O(log(N))). Тому, якщо у вас є великий список і часто потрібно перевіряти елементи на входження, радимо звернути увагу. Варто зазначити, що Set працює як із примітивними значеннями, так і з обʼєктами (за їх посиланням). А ще, деякі корисні методи (такі як union, difference та інші) зараз позначені як експериментальні та можливо скоро будуть введені в більшість середовищ.

👉 Відкрити посилання

Зі свого боку Map - структура даних, що складається з пар ключ-значення, де кожен ключ є унікальним. Можете проводити собі аналогії зі звичайним обʼєктом в JS. Але для чого тоді цей клас, якщо стандартний обʼєкт робить десь те саме?

По-перше, Map дозволяє використовувати і примітивні значення, і обʼєкти як ключ чи значення, коли обʼєкт в JS дозволяє використовувати тільки рядок тексту як ключ. По-друге, Map має кращу продуктивність у випадках, коли вам часто потрібно додавати/видаляти різні пари ключ-значення.

const map = new Map();
map.set(1, 'one');

console.log(map.get(1));

А більше методів Map ви знайдете у документації від MDN.

👉 Відкрити посилання

#interview

#todo написати функцію на будь-якій мові програмування. Функція повинна приймати один параметр - масив обʼєктів з полем month, де month - це гарантовано рядок тексту з значенням “January”, “February”, …, “December”. Функція повинна повернути посортований масив за полем month у зростаючому порядку, де “January” - це найменше значення, “December” - найбільше.

Це задачка з лайвкодінгу на співбесіді нашого друга в американську компанію.

Які бібліотеки зазвичай можна знайти в нас на проекті? 👀

Тут ми коротко опишемо бібліотеки для front-end застосунку, який написаний на React, або ж навіть на Next.js. Але багато з них підійдуть і до інших типів проектів написаних на JS.

Отож, всім треба різні утиліти. Для цього в нас є radash, рідше lodash. А коли говоримо про дати - тут допомагає date-fns. Майже на кожному веб-сайті є форми. Для роботи з ними - react-hook-form. А для їх валідації - yup або zod. Коли форма заповнена, потрібно відправити запит з даними, це ми робимо за допомогою axios. Ви спитаєте, а що робити, коли сервер повернув помилку? Було б дуже добре її обробити та показати повідомлення користувачу, наприклад, за допомогою react-hot-toast або react-toastify. По секрету: для роботи з env змінними використовуємо @t3-oss/env-nextjs. А щоб робити запити з React-компонент безболісно, використовуємо @tanstack/react-query.

// TODO: add @shadcn/ui, zustand

А що зазвичай можна знайти у вашому package.json?

#library

Notion Calendar 📅

Серед різних крутих next-gen застосунків можна знайти Cron. Це є (чи був) улюблений календар для багатьох. Але нещодавно Cron став Notion Calendar. Тепер в Notion ви отримаєте ще більший список функцій для роботи з подіями та плануванням. Але для тих, хто користувався Cron, але не любив систему Notion - це дуже велика втрата. Тож цікаво буде почути ваші думки щодо цього.

👉 Відкрити посилання

А от я вже деякий період часу використовую календар Amie. Дуже подобається те, що можна в одному місці створювати todo та працювати з календарем. Також проект сильно розвивається та дослухається до своєї аудиторії.

👉 Відкрити посилання

#news

Welcome!

Let's practice our English! So...

👉 What is the last book you read? Did you like it?

Have a nice #english_friday 💛

#how_to створити Movie Poster Interaction 🔥

Виконаний лише з допомогою HTML та CSS!

👉 Відкрити посилання

Чому [] в JS насправді не масив?

Масив - це набір елементів одного типу, що зберігаються в неперервному шматку памʼяті. Масив не можна просто взяти і розширити чи зменшити. Це можна побачити в традиційних масивах, наприклад, в С (int[3]).

А в JS те, що ми називаємо Array - насправді набагато складніша структура даних (яка насправді десь глибоко внизу напевно має справжні масиви). Все це зроблено для оптимізації та для спрощення роботи програміста. Тому, коли ви зробите щось на кшталт new Array(4 мільярди), то ваш компʼютер благополучно продовжить працювати далі. Ви навіть можете додати значення до першого та останнього елемента і все буде нормально.

Масив - одна з найпростіших структур даних. І ми вважаємо, що алгоритми та структури даних варто знати хоча б поверхнево, тому щоб тримати себе в тонусі, зараз проходимо безкоштовний курс від ThePrimeagen на Frontend Masters, який можемо і вам сміливо порекомендувати.

👉 Відкрити посилання

#experience

Welcome!

Tomorrow there will be a National Selection for Eurovision 2024 in Ukraine! So...

👉 Have you ever watched Eurovision? Do you have a favorite this time?

Have a nice #english_friday 💛

#how_to створити анімацію на секретний код 🔥

Виконаний лише з допомогою HTML та CSS!

👉 Відкрити посилання

Class Variance Authority ✍️

Коли ми створюємо власний UI kit, то стикаємось з тим, що потрібно робити різні варіації стилів для однієї компоненти, наприклад, small-medium, primary-secondary, contained-outlined і тд. І зазвичай, це все перетворюється у великий обʼєкт чи switch, що повертають імена класів.

cva - це проєкт, який має на меті допомогти вирішити проблему багатьох варіантів стилів. На його створення надихнули інші бібліотеки, які вирішують схожу проблему, але через CCS-in-JS. В даному випадку ви можете використовувати просто текстові імена класів (або ж TailwindCSS).

Спробувати ми ще не встигли, але виглядає справді цікаво!

👉 Відкрити посилання

#library

Як підготуватися до технічного інтерв’ю 💻

Натрапили на хорошу статтю, де автори підготували підбірку порад, які допоможуть знизити рівень тривоги й не просто пройти співбесіду, а й отримати оффер. Читайте та зберігайте 💛

👉 Відкрити посилання

#interview

Задача про дві скляних кульки чи два яйця 🐣 🍳

Яйцями кидатись веселіше (янукович підтвердить), тому візьмемо їх.

Нехай в нас є 100-поверховий будинок. Також в нас є 2 абсолютно однакових яйця. Проте ми не знаємо якої вони міцності і вони можуть розбитись при падінні як і з 1 поверху, так і з 100. Нам потрібно зʼясувати максимальний номер поверху, з якого яйця витримають падіння. Ну і звісно постаратись зробити це за мінімальну кількість кроків.

#todo написати функцію на будь-якій мові програмування, яка приймає масив значень типу boolean розміру N, де кожен індекс масиву - це порядковий номер поверху, а значення за цим індексом - true, якщо яйце розібʼється з цього поверху, інакше - false. Масив гарантовано посортований, тобто спочатку буде M значень false, після - N - M значень true, де M ∈ [0, N].

PS: а в кого в Європі зʼявилась ідея рахувати поверхи з 0?

Коли і як ІТ-спеціалісту говорити про підвищення зарплати? 💰

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

Почнемо з першого питання - коли потрібно говорити про підвищення зарплати?

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

2. Не менш важливо підібрати правильний час для обговорення. Це може бути успішне завершення проєкту, вирішення важливої проблеми або збільшення робочого навантаження, з яким ви добре справляєтесь (тут важливо не затягувати, щоб не отримати вигорання).

Наступне питання - як підготуватись до розмови?

1. Ви повинні підготувати аргументи на свою користь - чого ви досягли за цей період, чого навчились, за що взяли відповідальність, скільки користі компанії ви принесли. Якщо коротко, нахвалюйте себе, але в міру 😅

2. Проаналізуйте ринок. Поцікавтеся, які зарплати отримують спеціалісти вашого профілю в інших компаніях. Можете використати статистику зарплат Djinni.

3. Називайте точну цифру. Так простіше. Всім.

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

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

Якщо все дуже погано, ви можете завжди отримати контроффер і будувати розмову по-іншому. Не знаю, як зараз це працює, але раніше - це було дуже популярно. Але ми не рекомендуємо!

#experience

Welcome!

Let's practice our English! So...

👉 What is your favorite computer game ever and why?

Have a nice #english_friday 💛

#how_to створити анімацію для borders 🤌

Виконаний лише з допомогою HTML та CSS!

👉 Відкрити посилання

Pkl 🥒

Apple представила Pkl (pickle) - мова для опису конфігурації. Її мета - зменшення дублювання коду та перевірка самої конфігурації.

Pkl дозволяє генерувати різні формати файлів - JSON, YAML та plist. Також Pkl має власні бібліотеки для деяких мов програмування - Java, Kotlin, Swift та Go. Але враховуючи те, що тепер це проєкт з відкритим кодом (Apple ❤️ OSS), пізніше він може отримати набагато ширший перелік бібліотек. Варто зазначити, що IntelliJ, VS Code та Neovim також мають плагіни потрібні для розробки.

👉 Відкрити посилання

👉 Дивитись відео від Theo
👉 Дивитись відео від ThePrimeagen

#news