Drag and drop

У вас коли-небудь були таски, в яких треба було розробити drag & drop? Особисто мені траплялись лише нескладні випадки, такі як drop файлів для завантаження або ж перетягування кораблика на поле у морському бої. А от коли доведеться, наприклад, зробити копію дошки з Trello чи Jira - буде вже трохи важче.

Ну і звісно ж потрібно буде шукати якусь бібліотеку в допомогу. І тут порадимо вам передивитись коротке відео (всього лиш 184 секунди з вашого дня 😉), у якому зможете отримати підказки, що ж краще використати, а що вже застаріло і краще пропустити.

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

#library

🇺🇦 З Днем Збройних Сил України!

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

Дякуємо за те, що ви є.
За те, що ви обираєте.
За те, що ви виборюєте.

Пишаємось Вами!

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