#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

Що таке 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