Free React For Beginners

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

👨‍💻 #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){}, то всі ваші попередні оптимізації виявляться просто непотрібними - потік виконання буде заблокований і контент ви не побачити ніколи. Це саме стосується і інших ресурсів.

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

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

Живий приклад того, як перші два кроки займають 600мс.

П.С. Хотів кинути в наш чат але промахнувся. Ну хай буде. вибачайте, сьогодні будемо вже без постів 😂

Схема завантаження абстрактного ресурсу

@reactbeginners

👨‍💻#WebPerf - як браузер вантажить ресурс (3)👨‍💻

Для того, щоб завантажити будь-який ресурс (HTML, CSS, JS, тощо) потрібно зробити наступні кроки

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

Коли ви пишете в браузерному рядку https://drag13.io , браузер ніц не знає що це за адреса і куди звертатися. Для того щоб це дізнатися, він робить запит до сервісу доменних імен для отримання IP адреси вашого серверу (я тебе по айпі знайду!!!)

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

Після того як браузер дізнався адресу серверу, з ним треба вийти на зв'язок (можливо сервера там давно й немає немає) і, якщо у нас з'єднання захищене (https), то ще й помінятися сертифікатами

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

Якщо сервер живий і відповідає, браузер надсилає йому запит за конкретним ресурсом (наприклад index.html) і очікує на передачу даних. Сервер, в свою чергу, шукає в себе ресурс і віддає його (або не віддає) і ще робить купу інших речей (наприклад логує)

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

Дані, які ми отримуємо з сервера є "сирими" і часто стиснутими. Тому браузеру потрібно їх розпакувати та перетворити на щось корисне. Так HTML перетворюється на спеціальну структуру в пам'яті - DOM, CSS на СSSOM, JS - перетворюється з літер на код який зрозумілий браузеру. Важливо, що "ціна" обробки а також можливість оброблення під час завантаження залежить від виду ресурсу.


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

І тільки тепер ми можемо "виконати" ресурс - відмалювати HTML, накласти стилі, виконати JS.

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

@reactbeginners

🎉А ми на DOU🎉

😎 Телеграм не дуже підходить для розлогих текстів, тому про наші пригоди з другою версією курсу я написав невеличку статтю на DOU. Кому цікаво як ми готувались до другої версії курсів і побачити трохи фотографій - прошу до читання. Пишуть що це займе аж дві хвилини 😂

👉 А якщо коротко - то я більш-менш (десь на 80%) задоволений тим що вийшло. Дуже підгадили рашисти з відключенням світла, але прогрес нашої групи був наочний. Можливо трохи постраждала якість відео записів але довелось жертвувати.

✍️ З висновків - підхід з окремою групою був правильний, але групу взяли завелику. Наступна буде, нажаль, меншою. Вибачайте :(

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

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

П.С. Скоріше за все я і сам в найближчий час відправлюсь на трьох тижневе навчання.

👨‍💻#WebPerf - користь швидкодії завантаження (2)👨‍💻

❓Якщо користь швидкодії рантайму досить очевидна (ніхто не буде користуватися застосунком який зависає), то зі швидкодією завантаження все не так очевидно. Здавалося б, що немає особливої різниці скільки ваш сайт/застосунок завантажується. Дві, три, чотири секунди - яка різниця? Але насправді це не так.

😅 Як виявилось, існує кореляція між часом завантаженням та відсотком людей, які залишають ваш сайт не дочекавшись завантаження. Що, в свою чергу, впливає на продажі або на покази реклами.

👉 Іншими словами - швидкодія завантаження напряму впливає на ваш дохід або дохід вашого клієнта. Наприклад Trainline, зменшивши час очікування усього на 300мс збільшив прибуток на 8_000_000 фунтів стерлінгів на рік.

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

@reactbeginners

👨‍💻#WebPerf - про терміни (1)👨‍💻

Коли ми говоримо про #перформанс (або швидкодію), бажано розуміти, "а про що конкретно ми о це розмовляємо". Бо видів швидкодії може бути щонайменше два:

➡️ Швидкодія завантаження. Простими словами, як довго ваш користувач бачить білий екран або екран без корисного контенту.

➡️ Швидкодія рантайму. Це коли сайт вже завантажився, ми щось натискаємо, а інтерфейс починає пропускати кадри ("лагати"), або взагалі перестає відповідати на дії користувача.

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

@reactbeginners

Публічне код рев'ю: шукаємо добровольців

🥲 Ми тут планували зробити сесію з код рев'ю, але в людини яка спочатку погодилася, тепер змінилися плани.

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

👉 Від вас треба робочий код на #React та згода на його публічне обговорення. Проводитимо я та Сергій, буде не боляче 😅

А цей тиждень у нас буде присвячений #webperformance тож нові пости саме про це - незабаром.

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

А ось і матеріали з останнього ефіру

Приїхали матеріали з останнього ефіру про верстку:

— Дизайн
— Репозиторій
— Бабіч

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

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

🥸 Про експертність 🥸

❓Нещодавно мені задали питання з теми яку я начебто трохи знаю, але так, знаєте, на рівні десь чув і дивився в пів ока.

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

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

- Несіть мені усі по три рубля, і мудрості вам дам я 🤬

❗️Тому не соромтеся казати "я не знаю", не соромтеся ставити начебто "дурні" запитання і давайте вчитися разом, аби не бути такими "експертами".

Бережіть себе і тихих вам вихідних

Прямий ефір починається!

Верстати чи не верстати - ось у чому питання, на яке прямо зараз, під час прямого ефіру, буде відповідати Сергій Бабіч!

Приєднуйтесь!

Поки Сергій готується до сьогоднішнього ефіру про верстку...

🤓 Я також готуюся до наступного ефіру про #перформанс #React застосунків. Не скажу що все йде просто, бо моментів багато і треба їх якось впорядкувати, але справа потроху рухається.

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

👉А я всіх чекаю вже сьогодні, 12 січня о 19:00 на лекції Сергія Бабіча з верстання, якого, як відомо, забагато не буває!

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

Верстаємо з Бабічем наживо, 12 січня о 19:00

😎 Верстка — це те, що ми маємо опанувати в першу чергу, і часом нам може здаватися що з нею все зрозуміло: div туди, span сюди, float: left, та й погнали в продакшн!

🥸 Та насправді HTML та CSS набагато складніші та глибші, ніж здається на перший погляд. В них постійно можна знаходити щось нове, несподіване, магічне та й просто прикольне. Головне — практикуватись у верстці, навіть якщо ви вже досягли 80-го рівня в #React та силою самої лише думки рухаєте кнопки на найскладніших формах.

👉Саме з цією метою Сергій Бабіч і верстатиме для вас у прямому етері та спробує розібратись, чи можливо застосувати компонентний підхід в чистому HTML та CSS, поділиться деякими цікавими спостереженнями та знахідками, трошки посвариться на дизайнерів, питиме лимонад та відповість на ваші запитання.

❤️ Готуйте каву та печиво, ефір буде не маленький. А ще під час трансляції ми спробуємо зібрати кошти для ЗСУ.

Бережіть себе, чекаю всіх, верстки забагато не буває!

Трохи про гроші, бо це важливо.

✍️ Як більшість знає - в 2022 році ми збирали пожертви для наших військових через мою картку а також через OpenCollective. В 23 році ми продовжимо це робити і всі гроші які ви нам переводите - будуть відправлені на Перемогу.

💎 Наш залишок - 2584,30 грн., лежить цілим і чекає на слушну нагоду принести користь, або нагальної потреби. (ну і поки я його доб'ю до якоїсь круглої суми), то ж за бажанням долучайтесь.

Дякую вам за довіру, це велика відповідальність для мене.

😊 І також - якщо ви передивилися наші курси і вам чогось не вистачило - напишіть про це під цим дописом і можливо ця лекція також з'явиться на нашому каналі!

❤️ А ми та всі учасники будемо вам вдячні!