React: Class vs Functional

Ні для кого не секрет, що в React є два способи написання компонент - класи та функції. Тому часто на інтервʼю бувають питання про різницю даних підходів.

Давайте розбиратися...

Хуки в React зʼявились відносно нещодавно. Відповідно, функційний підхід дозволяв лише використовувати пропси та повертати JSX елемент. Хочеш стейт - використовуй класові компоненти. Це вже залишилось в історії, а що ж відмінного зараз?

- Функційна компонента - це просто функція, а от клас обовʼязково має наслідувати базовий клас компоненти з React (напишіть в коментарі, які класи ви знаєте).
- Логічно, що у функціях немає конструктора, а в класах є.
- Також відмінністю є те, що класова компонента має методи життєвого циклу, а функційна - хуки. Тут трохи різні підходи, але в кінці ми отримуємо однаковий функціонал.
- Продовжуючи тему методів - в класів є методи, які перехоплюють помилки (можете загуглити Error Boundaries).
- На кінець, додам ще одне - React.forwardRef працює лише на функціях, тому якщо хочете передати ref в класову компоненту - обгортайте її перед тим ще і у функцію.

А щоб ви були максимально впевненими в собі відповідаючи на таке питання на інтервʼю - прикріпляємо статтю.

Читати статтю

#interview

Якщо хтось буде питати, то ми тепер магістри 👨‍🎓👩‍🎓

Favicon media

🤫 Псс... коли будете додавати favicon до проекту, перевірте, як воно виглядає на темній і світлій темі системи. Трохи непрактично показувати білу іконку на білому фоні. А як це можна виправити - дізнайтесь з тіктоку на YouTube (та-та, заохочуємо вас дивитись тільки корисні тіктоки!!)

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

#tips

Hello 👋

We want to know more about you guys. So...

👉 Do you have some hobbies except IT. What do you like to do in your free time?

Як завжди, можете писати свої відповіді тут або в чаті.

Have a wonderful Friday! 💛

#english_friday

SemVer + CHANGELOG

Чи помічали ви коли-небудь "нотатки", коли оновлювали додаток в App Store чи Play Market? Часто там можна побачити щось таке, як "Bug Fixes", або ж зміни, що були додані в новій версії, описані людською мовою. Такі деталі зберігаються в файлику CHANGELOG, в якому від версії до версії описано, що ж було додано, змінено чи видалено.

До речі, якщо говорити про самі версії, там зазвичай є три числа, записаних через крапку. Коли і як їх потрібно змінювати? Тут рекомендуємо коротко переглянути такий підхід як Семантичне Версіонування (SemVer).

Прикріпляємо для вас документації/статті українською мовою:

Читати про CHANGELOG
Читати про SemVer

#article

any vs unknown vs never

Привіт, привіт! 👋
Трішки пропадаєм, щось багато всього навалилось. Будемо виправлятись!

Сьогодні пропонуємо розібратись між деякими типами в Typescript, а саме з any, unknown та never. Зазвичай про any знають найбільше, а хочеться навпаки 🥲

- any - це повне відкидання типізації, робіть з обʼєктом що хочете, на свій страх і ризик. Навіщо вам тоді взагалі Typescript?
- unknown - це така собі загадка, якщо хочете щось з нею зробити - розгадуйте. Можна через typeof або type predicates (про які ми вже колись писали). А ще це "база" всіх типів, про це почитаєте нижче.
- never - в змінну такого типу не можна ні присвоїти значення, ні використати його. Який тип має повертати функція, яка завжди кидає помилку?

Думаю, даний матеріал буде легше засвоїти з прикладами, тому додаємо статтю з детальним поясненням.

Читати статтю

#interview

Я став лідом за 3 місяці

Цей пост мав би писати Юра, адже це він став лідом за 3 місяці своєї роботи на проекті, та й в компанії в цілому. Але він занадто сором'язливий, тому це зроблю я! Адже я зайшла на цей проект місяць тому і вже помітила, що Юра робить інакше, і чому швидко стає незамінним на проекті.

Вникає у всі процеси

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

Постійно моніторить, як можна покращити процеси та розробку

Як тільки Юра зайшов на проект, я вже чула від нього пропозиції, що можна покращити в плануванні, що потрібно порефакторити в коді, що можна замінити або взагалі видалити. Він завжди аргументує свою думку, а не просто "бо я так сказав, я знаю краще". І він це робить абсолютно ненав'язливо! А так, як він постійно багато читає і дізнається все першим, то це дійсно гідні поради.

СЛУХАЄ

Юра дійсно вміє слухати і швидко розуміти, що від нього хочуть. Він постійно задає правильні питання, тим самим дає зрозуміти замовнику, що він зацікавлений в якісному результаті. АЛЕ, якщо це відверто якась фігня, він завжди про це скаже і, знову ж, аргументує, чому те чи інше не варто робити, або взагалі неможливо.

Налагоджує теплі відносини з замовником (а не зі мною😭)

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

Сподіваюсь цей пост був корисним для вас і ви щось зможете винести для себе 💛
А ще можете привітати Юру з таким швидким підвищенням 🥳

#experience

Welcome 👋

Вчора в чаті активно обговорювали ноутбуки, тому ловіть тему на сьогодні…

👉 Tell us about your laptop/PC which you use for work. What advantages and disadvantages does it have?

Можливо, комусь це допоможе обрати найкращий ноутбук ✨
Як завжди, можете писати свої відповіді тут або в чаті.

Have a nice Friday! 💛

#english_friday

Ми отримали доступ до «цифрового копірайтера» від Notion! 🥳

Тільки подивіться на цю машину. То що, публікувати вам пости написані штучним інтелектом? 😄

🥳 SvelteKit 1.0

Багато хто з вас знає, що деякий час я працював з Svelte. З тих пір багато чого змінилось, наприклад, засновник Svelte пішов працювати у Vercel, але продовжив роботу над своїм чадом. Сам фреймворк є одним з найпопулярніших після "великої трійки" і один з лідерів серед найулюбленіших.

І от декілька днів тому відбувся анонс першої версії. Так, так - саме першої. До цього фреймворк активно розроблявся, а тепер є сталі рекомендації для створення своїх застосунків.

Не можу сказати наскільки популярнішим стане цей фреймворк, але він точно вартий уваги! А ще в них класний playground, в якому ви зможете вивчити його дуже швидко та на класних прикладах.

Псс.. вчора Fireship закинув відео, де розробляє месенджер саме на Svelte додавши трохи PocketBase.

Дивитись відео
Відкрити документацію

#news

Hellooo, guys!! 👋

We have such an exciting question for you. So..

Are you afraid of artificial intelligence? Do you believe that they can become dangerous?

Як завжди, можете писати свої відповіді тут або в чаті.

Have a wonderful Friday! 💛

#english_friday

Хей-хей 👋

🚀 Знайшли для вас крутий сервіс - Animista. Це бібліотека CSS-анімації та місце, де ви зможете гратись з готовими CSS-анімаціями і завантажувати лише ті, які використовуватимете.

Тому, якщо ви також хочете, щоб ваш сайт був цікавим для користувача, але зовсім немає часу, щоб гратись з анімаціями - you are welcome to Animista!

#tips

Що таке serverless?

Привіт-привіт, backend розробники. Не часто, але все-таки ви можете почути таке питання на співбесіді.

Почнемо з того, що serverless - це модель розробки системи, яка дослівно перекладається як "без сервера". Але застосунок не може працювати без сервера. Так і є, у вас забирають не сам сервер, а деяку рутину, пов'язану з ним, наприклад, налаштування чи масштабування. Тож ми просто абстрагуємось від цього всього і концентруємось на розробці самого додатку.

Відсутність налаштувань може бути як перевагою (простота), так і недоліком (обмеження). До переваги serverless я б ще відніс менші витрати, швидші розробку та розгортання.

Ну а що таке лямбда? Тут давайте не плутати з анонімними функціями в програмуванні.

Serverless-функції іноді називають лямбдами, причину я не знаю, але вважаю це через те, що AWS назвали свій сервіс таких функцій саме AWS Lambda. Проте в GCP це називається Google Cloud Functions, в Azure - Azure Functions.

Як програмісти, перше, що ми хочемо зробити - запустити код. Саме ці функції дозволяють нам це робити в моделі serverless. Коли ж вони запускаються? Зазвичай, трігером є певна подія, наприклад HTTP запит.

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

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

#interview

#todo на сьогодні: написати функцію для вирішення наступної задачі.

👉 Дано масив з числами. Потрібно знайти числа, які не повторюються, і повернути їх.