TypeScript Generics ♺

Якщо ви проходите співбесіду на JavaScript, то в 80% випадків у вас запитають і про TypeScript. А якщо у вас питатимуть про TypeScript, то у 99% випадків запитають про Generics.

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

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

#interview

Вчора ми згадали про Rabbit R1. Це новий девайс, представлений на CES 2024. Можливо, хтось ще не чув чи не бачив, то ловіть посилання на презентацію. Ну і звісно, діліться своїми думками в коментарях.

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

🔥 - за таким продуктом майбутнє
👍 - класний девайс
👎 - для чого це взагалі?

#todo написати функцію на будь-якій мові програмування, яка приймає два об'єкта та перевіряє чи вони однакові (всі властивості є однаковими).

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

Jam 🍓
#post_from @vova_taras

Ніхто не запамʼятає вас за круті фічі, які ви додали на проєкт, проте вони памʼятатимуть кожен ваш баг. І тут є два виходи - обізвати його фічею або ж просто пофіксити його. Давайте поговоримо про варіант №2.

Вам сильно пощастило, якщо у вас є тестувальник. Вам вдвічі пощастило, якщо він толковий. Щоб відтворити якусь проблему та виправити її часто потрібно багато вхідних даних. І тут вам може допомогти Jam. Це розширення для Chrome, яке дуже просто дозволить QA чи замовнику (якщо він виконує роль QA) швидко відзвітувати про проблему. Тут автоматично зберігається інформація про девайс, браузер, логи в консолі та запити в мережі. І мені здається, що ця інформація точно не буде зайвою.

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

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!

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