console.log()

Реальні пацани дебажать за допомогою console.log(). Тому хочемо поділитись властивостями console, які стануть корисними, коли будете наступний раз ловити якусь хитру багу.

PS: тут тільки один лінк на статтю, а console.info та console.group виділяється як лінка, бо телеграм щось трохи тупашить 🙃

console.dir()

console.dir() і console.log() дуже схожі, але console.dir() друкує елемент у JSON-подібному дереві.

console.warn(), console.error(), console.info()

Основною відмінністю між console.warn(), console.error() і console.log() є колір, яким буде підсвічено результат. console.warn() повертає результат жовтого кольору, console.error() - червоного кольору.

Існує лише одна різниця між console.info() та console.log(). У деяких браузерах відображається значок «i», якщо ви використовуєте console.info().

console.count()

console.count() в основному використовується як лічильник, він повертає кількість викликів протягом усього життєвого циклу.

Ви також можете передати ім’я змінної як параметр у console.count(). Коли в значенні змінної відбудуться будь-які зміни, лічильник автоматично скидається.

console.assert()

За допомогою console.assert(arg1, arg2) ви можете вивести повідомлення, якщо перший аргумент має значення false. Він не запускається, якщо перший аргумент істинний.

console.table()

Якщо ви хочете читабельний формат даних у консолі, то console.table() - це найкращий варіант. Перший параметр є обов’язковим і має бути або масивом, або об’єктом, а другий параметр – це масив, що містить імена стовпців, які потрібно включити в таблицю.

console.time() / timeLog() / timeEnd()

console.time() використовується, щоб запустити таймер. Потім, з кожним викликом console.timeLog(), буде надруковано час, що минув з моменту запуску.

Щоб зупинити таймер і вивести загальний час, потрібно викликати console.timeEnd().

console.group() / groupEnd()

За допомогою console.group() / groupEnd() можна групувати повідомлення, щоб уникнути спаму та безладу в консолі. Також можна використати console.groupCollapsed() замість console.group(), щоб дана група виводу була згорнута за замовчуванням.

Подивитись приклади використання даних властивостей можна тут - читати статтю

#tips

Що таке Context в React?

Швидше за все, його придумали розумні люди, тому може і не дарма назвали цей Context контекстом? Подумаємо, що взагалі таке контекст. Наприклад, коли зранку в Насті дзвінок і вона починає матюкатись на членів своєї команди, і закінчує питанням до мене: “Ну правда ж?”, я зазвичай відповідаю: “Ну я не знаю контексту, тому не можу нічого сказати”. Виходить, що контекст, це якась інформація, на основі якої вже і будуються нові твердження.

Тепер повернемось до React. І насправді тут все десь так само. Контекст - це шматок даних. Використовуйте Реакт, щоб створити контекст, що в дослівному перекладі - React.createContext.

Створити - створили, тепер потрібно його всім розповісти. Context.Provider - той, хто може це зробити. Він огортає компоненти, які мають право доступатись до даних в контексті. Тепер всі нащадки цієї компоненти будуть знати, яке значення поточного контексту. А яким способом цю інформацію дістати, обирайте самі - або Context.Consumer, або красивий хук useContext.

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

А цікаво, що буде якщо компонента спитає за контекстом, якого немає вище? Вона відповість десь те саме, що я відповідаю Насті.

І прикріпляю документацію для кращого розуміння - читати статтю

#interview

ngrok

Розкажу, як я познайомилась з цією програмою. В мене був проект на якому замовник користувався Safari, ну і саме в цьому браузері вилізла якась бага. А Юрі в той час якраз видали на роботі мак. Тому я попросила його це протестити. І тоді йому треба було або запустити весь проект в себе, або якось отримати посилання на мій localhost. І тут я згадала про ngrok, і зробила все за другим варіантом.

Як самі розробники додатку кажуть, ngrok - це найшвидший спосіб вивести свій додаток в інтернет. Найпростіший варіант використання - ngrok http 3000. Після запуску такої команди ви побачите кілька посилань. Тепер, перейшовши на це посилання, побачите, що насправді воно використовує ваш комп‘ютер. Так і є, ngrok-сервер виступає просто посередником і перенаправляє клієнта до вашого локального сервера. Тому ви тепер легально можете скинути комусь посилання на свій localhost.

Можна ще багато розказувати, але краще вам просто один раз спробувати. Завантажуйте собі і вперед!

Відкрити сайт

#tips

Що таке event bubbling?

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

Уявімо ситуацію, у вас є великий div з різною інформацією про покемона. При кліку на нього, ми перейдемо на сторінку деталей. А в середині цього div є ще кнопка його видалення. Думаю, тут і так зрозуміло, що станеться, якщо її клікнути. Тепер користувач натискає на ім‘я покемона. Все як і має бути, переходимо на його сторінку. А що буде, якщо клікнути на кнопку видалення?

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

А що робити, коли треба запустити тільки обробник видалення? В об‘єкті події є метод, який дозволяє це зробити, і виглядає це отак - event.stopPropagation() (а хотілось би russia.stopPropaganda()). Після цього вище подія вже не піде.

Читати більше

#interview

Операційні системи

А є тут хтось такий, кого знайомі ще не просили перевстановити Windows? А Linux? Чи MacOS?

За час проведений в ІТ нам довелось попрацювати на кожній з них. Тому хочу поділитись своїми враженнями і думками.

Windows

Найпопулярніша ОС у всьому світі. Саме тому родичі і просять вас перевстановити саме її. Швидше за все, ви знайомі з нею, і не треба буде звикати до базового інтерфейсу. Сам я досить упереджено ставлюсь до продуктів Microsoft, але мушу визнати, що там сидять розумні люди, які швидше за все знають, що роблять.

Плюси:
- популярність;
- можна пограти в ігри (ніхто не відміняв такий відпочинок).

Мінуси:
- продуктивність (моя думка);
- бувають складнощі при налаштуванні середовища для програмування (туторіали програм суто для програмування зазвичай показують як налаштовувати все на прикладі Linux).

Linux

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

Плюси:
- продуктивність;
- зручна для розробників.

Мінуси:
- буває важко знайти драйвери;
- важче знайти програми загального користування.

MacOS

Найдорожча у цьому списку. Просто вона стоїть тільки на компʼютерах від Apple. З приходом Apple Silicon чіпа система отримала хороший буст в продуктивності, але через те, що тут інша архітектура, не всі програми можна запустити. На щастя, це вирішується «перекладачем» Rosetta, який по суті є мостом між архітектурами. Сама система побудована на базі Unix, що дозволить зменшити болі при переході між системами. Якщо ви хочете робити щось для девайсів від Apple, ви не зможете оминути цю систему. Зараз я сам на ній працюю і справді дуже задоволений.

Плюси:
- продуктивність;
- система не споживає багато ресурсів (по простому, ноути з MacOS довго тримають батарею).

Мінуси:
- ціна;
- бувають проблеми з Apple Silicon.

Це дуже коротка та суб’єктивна думка. Тому можете написати в коментарях, що ви думаєте про кожну з них.

PS: можливо саме ваш аргумент комусь допоможе у виборі своєї ОС 💛

#experience

Hoisting

Швидше за все інтервʼю вам буде проводити людина вже з великим досвідом. І може вийти так, що це буде “олд“ Javascript’а з мільйоном років досвіду. А починав він кодити на ньому ще коли не було класів, const і let, і інших функцій. І так як він ще користувався var, він запитає вас про hoisting.

Тож, що таке hoisting?

Hoist в перекладі з англійської - підйомник. Виходить, що hoisting - це підняття. А у Javascript - це механізм підняття вверх оголошення функцій (оголошених через function) і змінних (оголошених через var).

Набагато краще просто один раз побачити. Якщо напишете такий код:

console.log(x);
var x = 3;

У ньому не буде помилки, адже Javascript буде бачити отаке:

var x;
console.log(x);
x = 3;

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

Зараз, я вважаю, це погана практика, яка може збивати з пантелику. Тому можна додати "use strict", який трохи обмежить такі "фічі" Javascript.

Детальні можете глянути тут - читати статтю

#interview

А зараз супер короткий лайфхак - якщо відкрити репозиторій в github і просто натиснути "." (на англ. розкладці), то у вас в браузері відкриється веб-версія VSCode.

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

Тому, хто ще не пробував, раджу це зробити. І на додачу, можете глянути собі Github Codespaces. Це фактично те ж саме, тільки з наворотами. Тут у вас буде майже повноцінний компʼютер і зможете запускати свої проекти просто у браузері. Тільки, здається, там треба PRO аккаунт. Але якщо ви студент, то зареєструйте свою студентську пошту і зможете отримати його безкоштовно 😉

#tips

Duck typing 🦆

Хто ми? - JS розробники.
Що ми хочемо? - Зберігати в одній змінній булеани, стрічки та функції.
~ Мій розумний знайомий

Сьогодні не про типізацію в JS, а про duck typing (качину типізацію, якщо українською) у програмуванні. Коротко, це можна описати так: "Якщо воно виглядає як качка, плаває як качка і крякає як качка - це напевно і є качка".

Реальний кейс: уявіть, що у вас завантажуються дані з якогось джерела (бекенд, файл тощо). Хай це буде Користувач (User) з полями імʼя (firstName) і прізвища (lastName). І вам для достовірності потрібно перевірити чи справді цей обʼєкт є Користувачем. Тому у вас зʼявиться схожа умова:

‘firstName’ in user && ‘lastName’ in user

Помітили щось схоже? Якщо є імʼя і прізвище, то це - Користувач. А насправді там може бути ще багато інших полів. І якщо піти далі, то можна додавати перевірки і на інші поля. Але принцип перевірки не зміниться - на основі властивостей обʼєкта, ми будемо асоціювати його з певним типом. Це і є duck typing.

Трішки детальніше можете ознайомитись тут - читати статтю
А якщо хтось добре знайомий з Typescript, можете також глянути Type Predicates - читати статтю

А які у вас були випадки використання такої типізації?

#article