React v18.0

Ті хто слідкують за оновленнями знають що не так давно вийшла нова версія React.

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

1. Concurrent mode. Це такий собі механізм який може одночасно готувати кілька рендерів для вашої компоненти.

2. Auto-batching. Колись, якщо ви в функції робили два setState - React робив два рендера, тепер ж він зробить тільки один.

3. Transitions. Тепер ви можете функцією або хуком помічати деякі задачі, які не є критичними. Як приклад це фільтрування користувачем даних. Поле для вводу має завжди швидко змінювати свій стан, а от саме фільтрування може зайняти якийсь час.

4. Ще кілька нових хуків, такі як useId та useDefferedValue.

Особисто я думаю, що оновлення це майже завжди дуже добре. Щодо цього конкретно, то було багато зроблено на покращення продуктивності. Не знаю тільки чи будуть активно використовуватись transition чи useId, useDefferedValue.

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

#article

Tailwind

Обіцяла - виконую.
Тут ми вже писали про tailwind - читати пост

Тоді з ним працював Юра, я просто бачила одним оком документацію. Зараз я сама почала з ним працювати.

І ось, коротко про мої враження - в мене було два проекти з tailwind, зараз вже один)

На одному з проектів, який тільки недавно стартував, і ми вирішили його використовувати, врешті решт я його знесла і повернулась до звичайного scss. Чому? Там був важкий дизайн, багато деталей, і коли я наверстала пару секцій, було зрозуміло, що tailwind виглядає дуже брудно. А коли додала респонсів - то взагалі все було сумно. Стилі взагалі не читались. А я завжди дотримуюсь принципу: краще буде більше коду, ніж він буде зовсім не читабельним.

На іншому проекті, я не маю скільки влади, тому продовжую працювати на ньому. З плюсів, ми вирішили стилі писати відразу в html, тому це дуже економить час. Мінус: знову ж не читабельний код. А ще, якщо ви сподіваєтесь, що зможете переписати стилі, які вже існують, я вас засмучу - tailwind сортує стилі в своєму порядку. Я маю на увазі, що якщо у вас є стилі "text-white text-black", то не зрозуміло, який стиль візьметься, все залежить від tailwind. Для мене то було трохи критично, тому що в ui kit я завжди залишаю поле className, щоб за допомогою нього дописати або змінити трохи стилю в компоненті за необхідності.

Щоб вас не плутати. Tailwind можна писати прямо в html або за допомогою @apply використовувати в файлах стилів. Коли ви пишете в html, tailwind використовує свої класи. Наприклад, <p className="text-base text-white" /> - то у вас буде два класи: text-base і text-white. Якщо ви використовуєте @apply, то буде один клас, який ви створили і в нього будуть записуватись стилі.

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

#experience

React performance

Нещодавно я готувався до інтерв‘ю по React Native. А ті, хто знайомі з ним, знають, що досить часто там може поставати питання продуктивності. Коли я читав одну статтю, першим реченням там було - "Все що впливає на продуктивність в React - впливає на неї і в React Native". Пропоную сьогодні зупинитися на React та виділити кілька тез, пов‘язаних з таким питанням.

Тези тут, освоєння за вами:

- Не створюйте функцій, об‘єктів у самому рендері компоненти. Винесіть це вище в константу.
- Навчіться користуватись хуками use(Memo|Callback|Ref), React.memo та PureComponent.
- Більшість HOC (функцій-обгорток, наприклад, connect від react-redux) зараз можна замінити хуками.
- Не забувайте, що setState (з хука useState) може встановлювати значення на основі попереднього, за допомогою переданої функції. Це часто допоможе позбутись, як мінімум, однієї залежності.

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

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

#interview

#todo завантажити додаток Medium на телефон та зареєструватись

Останнім часом багатенько працюю з новими для себе фічами, тому постійно шукаю бібліотеки. А щоб не підключати перше, що попадеться, використовую даний сервіс - https://openbase.com

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

Користуйтесь!

#tips

Hello World

За останній час до нас доєдналось багатенько нових людей (чому ми надзвичайно раді), тому ми вирішили нагадати, хто ми є і навіщо ми тут всі зібрались.

Нас звати Юра та Настя. Настя frontend розробник (основний стек React, Angular), Юра - full stack (той самий React, Angular, а ще Svelte, Node, Flutter, React Native і трішки захоплюється Python). Та, Юру життя більше потріпало 🙃

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

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

Раді вас бачити. З нами цікаво! 💛

Навігація

#article - ділимось цікавими статтями
#experience - розповідаємо все з нашого досвіду
#tips - даємо поради, яких не просили
#todo - пушимо робити щось корисне
#interview - розбираємо питання на інтерв'ю будь-якої складності (кожного вівторка)
#quiz - вирішуємо tricky завдання (кожної середи)
#library - рекомендуємо бібліотеки, які неодноразово нас рятували
#news - пишемо про події в сфері ІТ, які не залишать вас байдужими
#english_friday - обговорюємо цікаві теми англійською (кожну п'ятницю)
#how_to - ділимось класно реалізованими кейсами
#localhost - щось на особистому

Undefined vs null

Не розумію, чому так полюбляють це питання на співбесідах, але поїхали:

1. Визначення
- Undefined означає те, що змінній не присвоїли значення, або вона його втратила.
- Null використовується тоді, коли змінній потрібно дати пусте значення.

2. Тип
- В JS undefined має свій власний тип - undefined, тому typeof undefined = ‘undefined’.
- Якщо ви напишете typeof null, то JS вам видасть тип object. Якщо запитаєте чому? Тому що це помилка в мові і її не так просто виправити. Банально через те, що нові версії мають бути сумісні з попередніми. Так і живем.

3. JSON
- В JSON немає undefined.
- А ось тип null є.

4. Арифметичні операції
- undefined + 1 // NaN
- null + 1 // 1

Ну і на останок:
null == undefined // true
null === undefined // false

Це основні відмінності. Зберігайте! 💛

#interview

Hooks

Якщо ви працюєте на React, швидше за все, ви вже використовуєте hooks. Погодьтесь, що часто доводиться писати хуки, які є досить загальними і здається, що хтось вже точно таке писав.

Тому маємо для вас крутий сайт, де ви зможете знайти багато готових хуків:
JS - https://usehooks.com
TS - https://usehooks-ts.com

#tips

SVG vs Canvas

Правильніше б звучало порівняння векторної і растрової графіки, але на ітерв’ю ви все-таки частіше почуєте таке формулювання питання

SVG - (Scalable Vector Graphics) - векторна графіка, що масштабується - є мовою розмітки, розширеною з XML для опису двомірної векторної графіки.

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

Сanvas - це HTML елемент, який використовується для створення растрової графіки за допомогою JavaScript. Елемент <canvas> надає зручний API для малювання графіки за допомогою JavaScript.

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

Ну і коротке порівняння:

1. SVG - побудований на основі вектора (складається з фігур), canvas - на основі растра (складається з пікселів)

2. SVG має кращу масштабованість, ніж Canvas.

3. SVG забезпечує кращу продуктивність з меншою кількістю об’єктів або більшою поверхнею, а Canvas навпаки - забезпечує кращу продуктивність з меншою поверхнею або більшою кількістю об’єктів.

4. SVG можна змінювати за допомогою скріпта та CSS, а Canvas можна змінювати лише за допомогою скріпта.

5. Елементи SVG стають частиною дерева DOM сторінки. Canvas за поведінкою схожий на один елемент <img>. Canvas можна зберегти у форматі PNG або JPG.

#interview