Welcome!

Let's practice our English! So...

👉 What is one thing that always makes you feel better when you're feeling sad or stressed?

Have a nice #english_friday 💛

#how_to створити 3D Card Hover 🔥

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

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

Ми успішно завершили курс з дикції! 🎤

В мене настав етап під назвою "жити життя" і тепер в нас майже кожен день розпланований різними подіями, заняттями, лікарями (ми ж не молодіємо) тощо. Та у цьому є й свої позитивні сторони - ми почали підтримувати хоч якийсь work-life balance, адже розуміємо, якщо не зробимо свої робочі таски вчасно, то ввечері в нас просто не буде на них часу.

Одним з цих занять став курс з дикції. Він включав в себе 8 уроків, де ми вчились правильно дихати, користуватись різними інтонаціями та працювати над своєю вимовою. Наприкінці ми записали свій перший подкаст! Це було щось нове і незвичне, адже взагалі не пов'язане з нашою сферою діяльності. Приємним бонусом (або викликом) було те, що ми робили це разом із друзями, що гарантувало якісно проведений час та багато позитивних вражень.

І хоч ми ще точно не стали крутими дикторами і ви ще не скоро почуєте наші подкасти, це був крутий досвід. Тому ми щиро рекомендуємо вам знаходити час для хобі, не боятися пробувати щось нове та відкривати для себе нові можливості! ✨

#localhost

Що таке 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?