Що таке async / defer ?

Питання, яке можна почути як і на співбесідах, так і на різних assessment review. Але зайдем трохи здалека...

Так як ми працюємо з вебом, рано чи пізно потрібно додавати собі на сторінку скрипти. І якщо ваш проект - це щось трохи більше, ніж маленька сторінка, швидше за все, ви захочете винести той скрипт у окремий файлик. Ну і звісно після того його собі підключити. Думаю, код схожий на <script src="index.js"> буде вам досить знайомий. Але куди правильно помістити цей код? В head? В кінець body? Може варто додати ще якийсь атрибут для способу завантаження скрипта?

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

На допомогу приходять такі атрибути як async та defer. З англійської вже маємо певне уявлення, що щось буде асинхронним, а щось інше відкладеним. Якщо браузер побачить async, він почне паралельно завантажувати сам скрипт і обробляти html. Коли скрипт буде завантажено, він зупинить обробку html, виконає скрипт, після чого продовжить далі роботу з html. А зустрівши defer, браузер так само паралельно почне завантажувати скрипт, але виконувати його він буде тільки тоді, коли закінчить всю роботу з html. Тому висновок такий - async використовувати тоді, коли немає маніпуляцій з DOM, а defer - коли вони є.

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

Читати статтю 1
Читати статтю 2

А той, хто вже пробував писати з використанням фреймворків чи бібліотек, може перевірити, яким способом скрипти додаються у ваші *.html.

#interview

#todo зареєструватись на LinkedIn та заповнити свій профіль

Time Tracking

В першій нашій компанії ми працювали по трекеру. Як це? Ти приходиш на завод, в тебе є таски, ти відкриваєш додаток трекера, який є в тебе на компі, клікаєш на таймер відповідного таску і вуаля - ти працюєш і тобі капає зп. Але насправді, нам це було максимально напряжно, адже ти постійно намагаєшся не залогувати дофіга часу на таски і тому в тебе голова забита іншим. Ну і взагалі, не рекомендуємо компанії, які юзають трекери :)

Псс.. Компанія використовувала Hubstaff, якщо комусь стало цікаво.

АЛЕ, в нас (а особливо в мене) тепер є звичка постійно моніторити скільки часу я трачу. Я маю part-time роботу, і там я просто записую час, який я відпрацювала. І щоб вручну то не вираховувати і тд, я використовую Clockify. В мене є кілька проектів, і коли я сідаю за один із них, я включаю таймер відповідного проекту. І так я бачу скільки часу я відпрацювала, і відповідно стільки ж відправляю замовнику. А ще кожного тижня Clockify відправляє мені репорт, скільки годин я працювала цього тижня.

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

Також буде цікаво почути, які засоби ви використовуєте для трекінгу часу 💛

#experience

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