Як браузер рендерить веб-сторінку — розповідає Сергій Бабіч

Ми поговорили про таке як будується HTML DOM, CSSOM, Render Tree. Розібрали що таке reflow та repaint, і навіть трохи зачепили оптимізацію веб сторінок. Тож, як маєте час та натхнення — раджу взяти горнятко кави або чаю та подивитися запис (важливо - в лекції є неточність, перегляньте будь-ласка опис).

А ще, окрім проведення цікавих лекцій, Сергій також активно підтримує ЗСУ і саме зараз допомагає військовим з Першої Окремої Бригади Спеціального Призначення ім. Івана Богуна готуватися до зими. Зими, що буде складною для кожного з нас, а особливо — для тих, хто захищає нас із вами на передовій, на першій та другій лініях оборони, аби ми могли вчитися або навіть просто жити. Тож, якщо у вас є бажання долучитись до коштозбору «Зима близько» — запрошую вас доєднатися донатом! І я, і Сергій, а особливо наші військові будемо вам усім надзвичайно вдячні!

Бережіть себе та допомагайте ЗСУ.

Окремо хочу подякувати пані Ірині (нажаль не знаю ніку в телеграм) яка помітила цю неточність і написала нам. Дякую!

Як писати хороший код?

👉 Сьогодні, о 19:00, на нашому YouTube, нас чекає загальна лекція про те, як писати хороший код. Ми поговоримо про те, що можна назвати хорошим кодом, очевидні і не дуже очевидні вимоги, а також буде кільки практичних порад як покращити ваш код.

😎Приклади будуть на звичайному JavaScript без прив'язки до фреймворку, тож сподіваюся будуть корисні всім.

❓До речі, як ви думаєте, яка найочевидніша ознака що почали писати кращий код?

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

Ніхто не знає як писати гарний код...

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

❓Або напишіть будь-ласка, чи було в цій лекції щось корисне. Тому що одна справа писати про об'єктивні речі, і зовсім інша про суб'єктивні та ще й принципові.

😊 Наші наступні плани - відео 10 хвилин про Git, і лекція про те, як написати свій React.

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

Десять хвилин про Git, або Git для початківців?

👉 А у нас нове відео-коротун. На цей раз про основні команди для роботи з git - init, clone, checkout, add, commit, push, pull та merge.

❓Дехто може запитати навіщо в 22 році використовувати консоль. Відповідь проста - уміння працювати з консоллю відкриває вам чудовий світ автоматизації вашої рутини. Робите пуш, і далі вже сервер виконує ті консольні команди, що ви вказали - білд, lint, test та таке інше. А ви в цей час - насолоджуєтеся кавою.

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

Про технічні інтерв'ю.

👉 Лайв стрім із Сергієм Бабічем прямо зараз

https://t.me/frontiarnia_news/68

Ми забули про Chrome Dev Tools!

👂Колись, давно давно, на одному проекті нас намагалися позбавити Chrome. Мовляв не сек'юрно, його треба окремо ставити, коротше сидіть як усі на Edge (на тому що ще не був на Chromium). І ми тоді дуже дуже впиралися і бодалися, щоб нас залишили на Chrome.

✍️А причина нашої впертості була саме в Chrome Dev Tools. Це настільки крутий інструмент для веб розробника, що переоцінити його майже не можливо. Саме тому ми анонсуємо нову лекцію про Chrome Dev Tools.

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

Анонс вже скоро! Бережіть себе і не забувайте про ЗСУ, їх теж треба берегти.

А пам'ятаєте ми збирали кошти на машину для WASP?

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

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

👉Саме тому я відкриваю банку на 20_000 грн на авто для WASP до якої ви можете долучитися на наступних умовах:

✍️ Найбільший донат отримує кєпку автоматично
✍️ Серед усіх інших ми розіграємо другу кєпку за принципом 50 грн - 1 шанс.
✍️ Якщо ви хочете прийняти участь у розіграші - обов'язково вкажіть контактні дані.

Розіграш відбудеться на наступному тижні під час ефіру про Chrome Developer Tools, а щоб усе було справедливо, я також приймаю участь (але без шансу виграти).

Ще раз посилання на баночку
ПБ: 4731 1856 2929 6887

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

Давно хотів поговорити про швидкий веб, але все ніяк та ніяк.

☺️ Але і тут все сталося як найкраще - 30.09, о 19:00, Сергій Бабіч, Роман Савицький і я зробимо легенький, можна сказати п'ятничний, ефір про веб перформанс.

😉 Одразу хочу сказати - чогось супер складного там не буде - це просто розмова на тему. Як воно піде - сам не знаю, бо сценарію в нас немає :)

👉 Отже, кому цікаво - запрошую на трансляцію у цю п'ятницю, 30.09, о 19:00 (лінка вже веде на трансляцію, можете натиснути на нагадування, щоб не пропустити)

А ще ми збираємо кошти на колеса для WASP і вже зібрали 3930 з 20000, у кого є змога - долучайтеся!

Бережіть себе і близьких, скоро зустрінемося!

Про кєпочки...

Як ви знаєте, на ефірі про Chrome Developer Tools, ми розігруємо дві росіянські кєпочки здобуті на фронті хлопцями, для яких ми зараз проводимо збір на колеса.

Ціль достатньо амбітна, зібрати 20_000 гривень до вівторка і я розумію що нашим маленьким ком'юніті зібрати її буде важко. Саме тому маю до вас прохання: поширте/поставте лайк цьому посту в Лінкедин.

Чим більше людей побачить наш збір - тим більше шансів зібрати необхідну суму вчасно

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

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

Трохи про безпеку

https://t.me/toisamyibabich/455

Давно хотів зробити це відео - аутентифікація за 10! хвилин.

🥸 Аутентифікація річ не проста, але за допомогою сучасних інструментів її базову версію можна імплементувати всього за 10 хвилин!

👉 Як - дивіться наше нове десяти хвилинне відео - Аутентифікація для React застосунку за 10 хвилин за допомогою Firebase - основи

❤️ А тим часом ми продовжуємо збирати на WASP і будемо вдячні з кожну гривню!

Бережіть себе і скоро зустрінемося.

Є речі на які ми не здатні впливати. Але, як кажуть, роби що повинен і здійсниться, чому судилося. Тому - запрошую сьогодні на п'ятничний #ефір про #веб #перформанс який ми проведемо разом з Serhii Babich та Roman Savitskyi

❓ Що - п'ятничні балачки про веб-перформанс
👉Де - https://youtu.be/BnBaWd9t7Wc

🥰 Не очікуйте нічого серйозного або складного - це ж п'ятниця!

❤️ А тим часом ми продовжуємо збирати на WASP і будемо вдячні з кожну гривню!

Бережіть себе і свої нерви

🥰Проміжні результати збору🥰

До кінця збору залишилося три дні - час підвести проміжні результати:

👉 Кількість благодійників - 18 осіб (супер!)
👉 Найбільша пожертва - 500 грн (4 людини)
👉 Загальна зібрана сума - 5580

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

А ще ми вчора провели п'ятничний, легенький підкаст про веб перформанс. Він настільки легенький що його можна навіть на фон поставити 😊

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

👨‍💻Лекція Chrome Developer Tools - вже завтра!👨‍💻

👉 Ми поговоримо про всі головні можливості Chrome Dev Tools - від розмітки та модифікації коду на льоту до performance та LightHouse .

🫵 А там часом нам потрібна жертва - веб сайт на якому ми будемо експериментувати. Серед кандидатів - dou.ua, gov.uk або веб сайт - який ви запропонуєте!

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

П.С. На банці вже 7_480, ви супер!

Бережіть себе і близьких.

✍️Готуємось до сьогоднішньої лекції✍️

Матеріалу сьогодні буде багато, тому дуже раджу:

👉 Перед лекцією створити новий профіль в Chrome без жодних розширень
👉 Перед лекцією відкрити Chrome Developer Tools і пройтися по цьому веб сайту самостійно - https://revengefor.com. Це спростить розуміння матеріалу під час самої лекції.
👉 На лекцію виділити окремий час коли вас ніхто не буде відволікати.

Чекаю всіх сьогодні, у вівторок, 04.10, о 19:00 на нашому каналі.

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

💰Про сьогоднішній розіграш💰

👀 Як ви знаєте, ми збираємо пожертви на купівлю коліс для WASP і наразі зібрали 7880 гривень. За ці пожертви ми розігруємо дві автентичні росіянські кєпки (які я навіть поправ)

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

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

❗️Всі, хто зробив пожертву та бажає прийняти участь у розіграші, але не написав свій нік у телеграм - напишіть мені особисто суму і час пожертви. Інакше як ми вас знайдемо?

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

🤯 Аж голова болить! 🤯

😅 Це один з коментарів які ми отримали під час ефіру про ChromeDev Tools - і це абсолютно справедливо, тому що нової інформації там дуже і дуже багато. Але що робити - треба навчатися. А яка ваша думка щодо цього ефіру?

👉 Тим часом розшукуємо потенційних переможців розіграшу:

❓ Zenoviy S
❓Anatoliy N
❓ Yulia G

Якщо ви є - напишіть мені будь-ласка в особисті.

🐝 Відео викладемо завтра в кінці дня, після редагування.

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

👓Chrome Developer Tools - для тих хто не встиг! 👓

👩‍🏫 Запис попередньої лекції про Chrome Developer Tools вже готовий до перегляду за посиланням! Лекція вийшла не супер простою (хоч я намагався), але я сподіваюся кожен знайде для себе щось і нове і корисне.

👂Також буду вдячний за відгуки, тому що саме через відгуки ми стаємо кращі.

💪 А подаруночки вже пакуються і сьогодні/завтра поїдуть до нових власників. Не знаю що вони будуть з ними робити, але сподіваюся щось цікаве)

Бережіть себе і чекайте наступного анонсу!

P.S. Банка буде відкрита до п'ятниці (якщо раптом що 🤗)

😎React-use😎

Для тих хто ще не бачив - пропоную подивитися на npm пакет react-use (32k зірок та >1kk завантажень) який містить велику кількість вже готових для використання кастомних реакт хуків, які можна використати для

👨‍💻 Прискорення, власне, розробки
😉 Навчанню написання власних хуків

⚫️ Документація
⚫️ Код
⚫️ Bundlephobia для перформанс параноїків

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