👨‍💻 #WebPerf - що ж може піти не так (4)👨‍💻

➡️ Знайти сервер

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

Рішення: розмістити DNS записи на спеціалізованих серверах. Наприклад заплатити Cloudflare які обіцяють відповідь на DNS запит за 11ms замість 60-150ms. І так є ті хто платять за ці 50ms різниці.

➡️ Встановити з ним зв'язок

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

Рішення - перенесення серверів поближче до користувачів, з чим нам допоможе або локальний хостінг, або CDN.

➡️ Запитати в нього ресурс і почати отримувати відповідь

Тут найбільшою проблемою є завантаженість (ну і також відстань). Якщо ваш сервер виконує певну роботу (CPU limit), або відправляє велику кількість відповідей (Network limit), або написаний через вухо бобра і синхронно логує запити до відправки даних - потрібно розвантажувати сервер.

Рішення - масштабування, кешування або знову таки CDN. Все аби розвантажити вас сервер. Тут, до-речі, економія може йти на 500+ ms на кожен ресурс, що досить суттєво

➡️ Обробити ресурс

Кожен ресурс має свою "ціну" за обробку. Для когось ця ціна маленька (наприклад HTML), а для когось досить велика - як раз наш улюблений JS. Саме тому, бюджетні мобільні телефони дуже довго відмальовують сайти з великою кількістю JavaScript. Вони його швидко отримують, а "прожувати" їх слабенький CPU не може.

Ще одна проблема полягає в тому, що не всі ресурси можна парсити під час завантаження. HTML, наприклад, можна, а от JS ми змушені чекати до самого кінця (вгадайте чому)

Рішення - зменшувати обсяг ресурсів. Викидати зайві ліби, "трясти дерева", зменшувати розмір зображень і таке інше.

➡️ "Виконати" ресурс

Якщо ви покладете на початку документу код накшталт while(true){}, то всі ваші попередні оптимізації виявляться просто непотрібними - потік виконання буде заблокований і контент ви не побачити ніколи. Це саме стосується і інших ресурсів.

Тому єдине рішення тут - писати адекватний код і використовувати ресурси розумно.

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

😅Давайте розбавимо перформанс React-ом!😅

😎 Вчора я обіцяв невеличкий сюрприз, тож виконую обіцянку: ми підготували для вас 15 хвилинне відео-огляд Storybook - універсальний та корисний інструмент для документації та тестування UI компонентів.

👉 Він популярний, часто використовується на проектах та кросфреймворкний (яке жахливе слово), тому раджу навіть початківцям.

Приємного перегляду та бережіть себе!

💰Ми допомогли ССО💰

💰 Ваші кошти та трохи моїх, загалом 5_000 гривень, поїхали на авто для ось цих хлопців.

🧑‍🦰 Волонтера, яка їм допомагає, моя родина знає особисто. Лариса допомагає військовим з 2014 року і, можливо, ви навіть бачили її відео де вона з подругою, під час поїздки, потрапляє під обстріл на машині і при цьому співають.

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

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

Магазин на React - код рев'ю: 24 січня о 19:00

😎 Ми таки обрали проект для код рев'ю. Ним став невеличкий магазин з Redux та Apollo написаний в якості тестового завдання. Добро від власника коду вже отримано, тож сподіваюся що цього разу буде без "нюансів".

🧑‍💻 Код ми обирали за критерієм складності (щоб була помірна) та типових помилок (щоб було всім корисно). Тож якщо ваш проект не попав на ефір то, можливо, саме через брак помилок 😉

👉 А сам ефір відбудеться вже у вівторок, 24 січня о 19:00 годині, тож усіх запрошую.

Бережіть себе і скоро побачимося.

Прямий ефір сьогодні ввечері о 19:00

❗️Наш прямий ефір, під час якого ми, разом з Сергієм, будемо робити код рев'ю наживо почнеться менше ніж за 5 годин

👩‍🏫 Будемо говорити про структуру проекту, роботу з даними, та типові проблеми які можуть виникнути в будь-якому проекті. А ще там є GraphQL!

Приходьте, буде цікаво!

В голосуванні можна обирати кілька опцій!

🤫Змінні оточення та секретні секрети на прикладі React за 10 хвилин🤫

🕺Підготував для вас невеличке, до 10и хвилин, відео про те, навіщо потрібні змінні оточення, як їх використовувати та як НЕ зберігати секретні дані в коді.

👉 Якщо ще не стикалися з цим - дуже раджу подивитись, в майбутньому однозначно стане в нагоді. Якщо дивитись немає часу - просто запам'ятайте, що секретні дані зберігати в коді не можна.

Бережіть себе і скоро побачимось!

Аналітика від DOU та корисні ресурси

🥊 DOU опублікував аналітику про найми джунів і вона не дуже втішна, бо конкуренція лише росте.

👉 Тому не можу не порадити канал з вакансіями для початківців (які і нам дуже допомогли) - Don't Panic Junior IT Jobs

😊 Там є різні вакансії, в тому числі для фронтів + всілякі корисні матеріали саме для джунів. Зайдіть, подивіться, можливо стане в нагоді. Нажаль зараз треба пробувати все

❗️А ще - вчіть англійську. Це суттєво підвищує ваші шанси знайти роботу. Наразі, ITVDN пропонує безкоштовний онлайн курс англійської для IT. Англійська дуже важлива, вона відкриває вам величезний ринок.

Бережіть себе і скоро побачимось!

Новий ефір та розіграш цікавого подарунку

😅 Ну що, обіцяв то ж треба робити. Оголошую дату нового ефіру про #швидкодію завантаження на прикладі #React застосунку, який відбудеться в суботу, 11 лютого о 14:00. Поговоримо про те як міряти, що міряти та поексперементуємо на тестовій апці.

❗️ Окрім цього я також хочу розіграти один цікавий подарунок - книгу про історію незалежності України яку мені подарували за виступ на конференції в 2022 році. Ця книга для мене цінна тим, що вона є символом втілення мрій незважаючи ні на що. Тож я віддаю її з відчуттям гордості (і зовсім трошки з сумом 😁)

❗️Для того щоб прийняти участь у розіграші потрібно зробити ТРИ РЕЧІ:

👉 перерахувати на 4731185629296887 суму кратну 100грн (кожні 100 грн - один шанс)
👉 написати мені в особисті ім'я та суму
👉 прийти на ефір 11.02.23

❓А гроші підуть на обладнання для Покровського госпіталю у прифронтовій зоні. Перші 5000 я вже відправив, бо чекати немає часу, але їм потрібні ще і, нажаль, багато.

Бережіть себе і скоро побачимось.

👨‍💻 #WebPerf - Як міряти швидкодію завантаження? (5)👨‍💻

👉 Якщо потрібно оцінити загальну картину "на око":

1. Відкриваємо анонімне вікно
2. Відкриваємо бажану сторінку та відкриваємо Chrome Developer Tools
4. Переходимо на вкладку LightHouse
5. Обираємо лише Performance чекбкос
6. Натискаємо Analyze і записуємо рейтинг.
7. Повторюємо все ще два рази і виводимо середнє значення.

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

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

😎 Але незважаючи на це, такий підхід чудово підходить для самоконтролю під час розробки застосунку. Просто час від часу запускаєте LightHouse і пересвідчуєтесь що все в нормі. Якщо несподівано оцінка дуже впала - дивимось історію комітів. До-речі, раджу зберігати результати LighHouse звіту щоб мати змогу порівнювати як результати так і причини.

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

П.С. Ми збираємо на гроші для Покровського госпіталю. Буду дуже вдячний за кожну гривню!

👨‍💻 #WebPerf - Все не так страшно(6)👨‍💻

❓Пам'ятаєте ефір з Сергієм Бабічем про верстку? Готуючись до наступного ефіру мені стало цікаво, а що зі швидкодією того мікросайту який створив Сергій.

😎 Я його стягнув, встановив parcel щоб не мучатися зі збіркою, вилив на Azure, щоб не дивитись локально і запустив LightHouse.

😉 Результат мене не здивував - 93, 93, 97. Все ж таки сайт повністю статичний, маленький та Сергій ще й трохи оптимізував деякі моменти (хоча бідкався що нєєє)

❓І тут мені стало цікаво - чи можна його значно покращити за лише одну принципову зміну

Через деякий час виявилось, що за одну зміну я можу стрибнути одразу до 99.

Як гадаєте - за рахунок чого? Пишіть ваші варіанти в коментарях!

Тут сайт,а тут код.

П.С. Ми продовжуємо збирати кошти на госпіталь, завтра буде додатковий приємний анонс.

🧐 А чому я так багато пишу про швидкодію?🧐

😀 Звичайно, тому ще мені це подобається, але існує й інша причина чому, на мою думку, ця тема може бути корисна вам

❗️Річ у тім, що робота зі швидкодією, дуже добре прокачує розуміння того, як працює браузер і як працює мережа. А це ті знання які необхідні фронтенд розробнику будь-якого рівня і які можуть стати вам у нагоді як під час розробки, так і під час співбесіди.

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

А тепер відповіді на вчорашні пости:

1. Єдина зміна - Critical CSS, тобто вбудова CSS, який необхідний для відображення сторінки, в саму сторінку. Важливо пам'ятати що це не панацея і може зробити навіть гірше, якщо розмір вбудованого CSS буде великим.

2. Переведення проекту з чистого HTML на React (без оптимізацій) знизило performance score з 94.3 до 87 на моїй машині. Але якщо брати дані з pagespeed.web.dev, то картина цікавіша: деградація з 85 до 61 на мобільному і 98 на 82 на десктопі. Така ціна React-у. У матеріалі для вимірювання була помилка. Коректні цифри будуть пізніше

Бережіть себе, новини про розіграш трохи пізніше.

❤️ Більше подарунків! ❤️

👉 В наступну суботу (11.02, 14:00) ми проведемо благодійний
ефір про швидкодію під час якого розіграємо вже не один подарунок, а два.

🍎 Перший подарунок ви вже бачили - це абсолютно нова книга - "Книга-мандрівка. Незалежні" випущена в 2022 році і присвячена нашій незалежності.

🍉 А другий подарок, вже від моєї компанії - патріотична та супер м'якенька, фірмова футболка - Ukrainian Bravery, яку ви бачите зараз на фото. (фотограф я поганий, але футболка класна!)

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

Номер картки для збору - 4731185629296887

Бережіть себе і до скоро зустрічі.

👉 Коротенький апдейтик 👈

😢 Я облажався з вимірюваннями React апки. Вибачте кого ввів в оману, цифри геть інші, як буде час - опублікую, там ДУЖЕ несподівано. Але треба тепер 10 раз перевіряти.

👩‍🏫 Готую нове відео - "Топ помилок в React" та як їх виправити. Контент саме для початківців, і саме про React. Буде key | state | effect. Мало бути сьогодні але прийшов негайний запит + в мене сьогодні перший навчальний день. Тож я не встигну, буде у вівторок - середу. Формат: 10 - 15хв.

💰 По зборах - зібрали 1810 гривень + 200 вже було. Найбільший внесок 1000 гривен, найменший 10. Дякую кожному хто долучився, продовжуємо далі. І п'ять гривень важливі. Картку ви знаєте. Паралельно ще треба купити планшет на Бахмутський напрямок, але там є чим закрити.

Такі у нас справи, бережіть себе і продовжуємо працювати.

🔥Отже, це сталося! 🔥

❗️Сергій БабІч таки відкрив свій ютуб канал про розробку, і виклав перше відео (і як завжди про CSS).

🕺 І це не може не радувати, тому що якісного українського контенту стає більше і більше. Тому, якщо ви любите навчатися з гумором, якщо вам подобається web і розробка в цілому - запрошую приєднуватися до каналу Сергія.

👉 Ну і давайте побажаємо йому натхнення, терпіння та знайти десь на все це час. На цьому шляху зайвим то не буде 😅

А ви бережіть себе і скоро побачимось!

А от і наше відео про типові помилки в React

🔥 Як і обіцяв, викладаю нове відео з React і саме для початківців про типові помилки і про те як їх вирішити

У відео ви знайдете розбір:

❓ Чому дані на сторінці можуть не оновлюватися і як це виправити
❓ Чому React скаржиться на відсутність key у списках і до чого це призводить
❓ Як зробити нескінченний перерендер за допомогою useEffect і чому це працює.

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

@reactbeginners

А ось приклад паралельної активності

Знайшли цей планшет майже на 10_000 гривень дешевше (при чому новий, хоча коробка убита), скинулись на оплату, та зараз вже передаємо на той самий проклятий напрямок.

Якщо з його допомогою буде знищено хоча б одна одиниця будь-якої техніки русні, він окупиться багатократно

Поки я сиджу в коридорі - напишу корисний пост key

❓Що робити коли потрібно відмалювати список, а ID, або іншого унікального ключа немає?

👉 Насправді все досить просто - потрібно створити його самостійно. Але не під час рендеру, а під час отримання або створення даних. І вже тут можна використовувати будь-які засоби і index, і uuid, і uniqueId з lodash. А в рендері ви просто цей ключ використаєте, і все, нічого складного немає.

✍️ Прикріпляю зображення та stackblitz для прикладу.

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

Повітряна тривого продовжується, тож давайте подивимось що у нас з розіграшем та зборами

💰 Зібрано: 1910 гривень
💪 Усього учасників: 6 осіб
🕺 У розіграші: 3! особи

👉 Як бачити шанси отримати чудові подарунки та ще й допомогти дуже великі. Тому, якщо ще хтось бажає долучитись до ініціативи - будь-ласка ще є час до кінця п'ятниці. Картка - 4731185629296887

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

❗️Якщо ви перераховували гроші, але не писали мені і хочете прийняти участь - будь-ласка, напишіть!

Бережіть себе!