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

Що таке Pure Function?

Питання, яке дуже полюбляють на співбесідах :)

Pure Function - це функція, яка видає одинаковий результат, коли ви передаєте їй ті самі аргументи.

Думаю, буде швидше пояснити на короткому прикладі:

const add = (x, y) => x + y;
add(2, 4); // 6

В даному прикладі функція повертає значення на основі заданих параметрів. Якщо ви передали 2 і 4, ви завжди отримаєте 6. Ніщо інше не впливає на вихід.

Розглянемо інший приклад:

let x = 2;
const add = (y) => x += y;
add(4); // x === 6 (the first time)

А в цьому прикладі ви отримуєте різні результати залежно від того, коли ви викликали функцію. Перший раз дає 6, наступного разу 10 і так далі. Тому дану функцію ми вже не можемо назвати pure function.

Pure Function не повинна мати жодних побічних ефектів (side effects).

Side effects - це будь-що, що може повпливати на “чистоту” вашої функції.

Ось коротенький гайд, як уникнути side effects:

1. Залиште ваші аргументи в спокої :)
Якщо вам потрібно працювати з аргументами, зробіть копії і маніпулюйте вже ними.

2. Не робіть ніяких HTTP викликів, нічого не записуйте у файлову систему, не логуйте і тд.
Інкапсулюйте дану логіку в їх власних модулях.

3. Будьте прозорими.
Робіть ваші функції такими, щоб їх можна було легко замінити їхніми результатами і це не поламало б вашу програму.

Наведемо вам ще кілька прикладів side effects:
- мутація вхідних даних;
- console.log;
- ajax/fetch;
- зміна DOM.

Ну і виникає логічне питання - а навіщо нам чисті функції?

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

Ну і стаття, де можна подивитись більше прикладів по даній темі - читати статтю

#interview

Ми звільнились.

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

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

Оцініть ситуацію.

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

Повідомте про ваше рішення керівнику.

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

Будьте готові до зустрічних пропозицій.

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

Завершіть всі справи.

В більшості договорів є пункт про те, що перед тим як працівник звільниться, він має передати всі свої проекти, таски і тд. Тому по можливості завершіть всі свої справи. По-перше, це професійно. По-друге, вас не згадуватимуть поганими словами, що дуже важливо для репутації. Але, з цього пункту випливає ще один дуже важливий пункт:

Обов’язково узгодьте кінцеву дату.

В першій моїй компанії, мені сказали відпрацювати ще ПІВРОКУ. Зрозуміло, що мене це не влаштовувало і ми багато раз обговорювали більш реальну дату. Коли її було поставлено, компанія і я зробили від себе все можливе, щоб вкластися в даний термін. АЛЕ якщо б його не було, я впевнена, що мене кормили обіцянками дійсно тих самих півроку.

Працюйте до останнього дня та виконайте всі зобов'язання.

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

Йдіть красиво.

Перед звільненням важливо поспілкуватися із колегами у неофіційній обстановці, щоб залишити про себе приємні враження. Не треба ні на кого ображатись і злитися. Цим ви нікому нічого не доведете.

#experience

Що таке DOM?

Це база, як то кажуть. Але на співбесідах люблять питати і таке.

DOM - Document Object Model - об’єктна модель документа.

Браузер завантажує з сервера веб-сторінку у вигляді HTML коду, який часто називається вихідний кодом сторінки. І якщо у коді вказані інші файли, такі як стилі css, js - то завантажує і їх. І уже з завантаженого з сервера HTML коду браузер формує DOM.

Браузер створює DOM для того, щоб мати уявлення як виглядає веб-сторінка, а JavaScript, в свою чергу, за допомогою DOM маніпулює веб-документом: шукає потрібний елемент, додає нові елементи, отримує наступний дочірний елемент і т.д.

Вигляд DOM можна глянути у панелі розробника в браузері.

DOM подібний на вихідний код HTML, але не є ним, а лише формується з нього. Браузер автоматично виправляє помилки, якщо вони є у HTML коді. Тобто закриває не закриті теги HTML, вставляє обов'язкові теги, якщо вони опущені.

DOM має деревоподібну ієархію. Документ DOM складається з вузлів Node. Кожен вузол може містити у собі вкладені вузли, елемент, текст чи коментар. Кожен вузол DOM формується з HTML тегу і отримує властивості, події, стилі, які вказані у самих атрибутах тегу, CSS стилях і в JavaScript коді.

DOM підтримує об'єктно орієнтоване представлення веб-сторінки і дозволяє змінювати документ веб-сторінки за допомогою JavaScript. У JavaScript для роботи з DOM є об'єкт document, який містить методи і властивості для роботи з документом.

#interview

#todo поділитися в коментарях останньою статтею/відео, які ви читали/дивилися

Infinite scroll

Infinite scroll - це техніка, яка автоматично додає наступну сторінку, коли користувач прокручує вміст. Якщо по простому, то уявіть, що у вас є список покемонів. І коли ви прокручуєте цей список до кінця, то вам підгружаються ще дані. Або хто сидить в TikTok, знає, що можна вічно скролити відосіки - це і є infinity scroll.

Зайшли хорошу статтю, яка показує як можна імплементувати цю техніку різними способами в React - читати статтю

Зберігайте 💛

#article