Сподіваюся всі живі та здорові.

P.S. Намагаюся встигнути з випуском React-Code-Smells на п'ятницю.

😢Звіт по останньому збору на кровоспинний матеріал😢

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

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

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

А мені особисто дуже шкода витраченого часу і здоров'я тих хто цей матеріал не отримав. Такі справи. Пробачте.

Фух, зробив таки нове відео!

👉 Зробив для вас нове маленьке відео з серії React Code Smells. На цей раз поговорили про всякі константи, чисті функції😅 та навіть про те, що буде якщо створювати нові компоненти прямо в іншому компоненті. Спойлер - робити таке не треба, а от чому - дізнаєтесь уже з відео.

✍️ Особливо буде корисно початківцям, але не тільки, чистий код ще нікому не завадив.

Тому дивіться, і всім гарної п'ятниці.

PS. Про плани на ефір протягом повних двох днів пам'ятаю, але поки часу на це немає, проект, адаптація та специфіка трохи мене займають. Зате цікаво!

Хотів я вам сьогодні завтра викласти відео про SOLID (дякую за ідею Anutkabreus) але захворів капітально. Тому не очікуйте на щось цікаве цього тижня. І якщо комусь не буду відповідати - теж не ображайтеся, з 38.5 не дуже "програмировай" виходить.

А от чому про SOLID, а не, наприклад DRY - тому що по-перше його багато питають на співбесідах, по-друге він складніший (з DRY, KISS, YAGNI і без мене розберетесь) а по-третє це такий цікавий принцип до якого ви будете повертатися декілька разів за свою кар'єру.

Правда в DRY теж є підводний камінчик, але про це якось потім.

Бережіть себе і не хворійте.

🕺Я повернувся🕺

😔 Скажу вам коротко і не толерантно - COVID це повна лажа. Висока температура і супутні ефекти діють дуже ефективно - перші два дні я взагалі уривками пам'ятаю. Так що не хворійте, тим паче зараз не то щоб був час.

Тепер по суті.

👉 Готуюсь до доповіді про SOLID. Можливо зробимо прямий ефір з питаннями, як раніше. Як ви до такого ставитесь?

👉 Обдумую лекцію про безпеку - XSS, XSRF, Prototype Pollution. Питання стоїть в підході. Або просто в загальному розповісти про загрози і їх види (і тоді тут будуть ще XML, SQL ін'єкції) або йти по одному але от прямо з експлуатацією. Але тут бажано малими групами працювати. Що думаєте з цього приводу?

💊 Щодо ліків - вони вже закуплені, тепер чекаємо на звіт про отримання. Як тільки з'явиться - викладу фото отримання і фото рахунків. На рахунку ще залишилась грамулечка грошей, якщо не заперечуєте - перекинемо їх Бабічу на "Незамовлений Хеппіміл". Один буде від мене, один від спільноти.

Бережіть себе, бережіть своїх близьких.

💡 До речі, хто дивиться ReactCodeSmells 💡

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

😅 І ще цікавий момент - всі ці помилки не вигадані, а взяті з реальних проектів. Повірте, там ще й не таке бува. Травма від Angular проекту який не білдався в прод режимі, важив 12MB, і був зареліжений на прод в мене так і не загоїлася.

А які ви жахи бачили?)

Всім гарного дня, бережіть себе.

👨‍💻Про пулреквести в команді👨‍💻

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

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

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

👉 Один ПР - одна задача. Тобто один баг, одна таска, одна сторя. Рефакторинг, також окремим PR, як би не хотілося.
👉 З першого правила витікає друге правило - мінімальність. Уявіть собі що цей PR приходить до вас, а вам ще треба дві таски до вечора зробити. Який би ПР ви хотіли бачити? Звісно маленький та акуратний, і щоб нічого зайвого.
👉 Smoke Test перед PR-ом обов'язковий. Тобто підготували ПР, запустили код, перевірили що все працює. Нічого так не дратує рев'ювера як не працюючий код в PR.
👉 Корисний опис PR. Це лінк на таску, по-пунктах що зроблено (високорівнево), можна ще й скрін нового UI докласти (наприклад як ваш новий UI виглядає на маленькому екрані)

Для PR в Open-Source опис буде трохи іншим (бо там немає тасок, в більшості), але всі інші правила залишаються такими самими.

Вдалих вам ПР-ів, і скоро побачимось!
@reactbeginners

П'ятнична оповідка (відпочиньте)

😅 Розповім я вам про свою травму з ангуляр проектом. Покликали мене колись на проект один, підстрахувати хлопців перед релізом. Треба були зайві руки на підхваті багу пофіксити, таску допиляти. Дрібниці, але часу вони від'їдають багацько. Ще треба додати, що проект був не нашим, його паралельно переймали від однієї південно-азійської країни і хлопці до наведення ладу ще не бралися.

👓 Отже витягнув я проект і давай переглядати. Перше що кинулось в очі - розмір файлів. 12_000 рядків в одному файлі. Я починаю нервувати на 500 рядках, а за 12_000 може й грець вхопити😁. Причому цей файл не був якимось виключенням, подібних монстрів (правда вже десь на 5000 рядків) по проекту вистачало.

👀 Наступним приколом проекту були залежності. Їх було багато, вони один одного дублювали і використовувалися без жодного порядку. Ба більше, проект мігрували з більш ранньої версії Angular (це було видно по старій версії HttpService), але міграцію не завершили, просто використовували старий та новий API паралельно.

😂 Але це були ще квіточки. Вишеньки пішли коли я взявся фіксити якусь багу. В Angular, на відміну від React розмітка пишеться в окремому файлі у вигляди звичайного HTML + спеціальні атрибути. Так от, де б ви думали лежали ці файли? Правильно, в базі даних! І якщо, не дай боже вам треба було ту розмітку змінити то треба було йти в базу і писати скрипт міграції. А потім цю міграцію розкатувати по всіх енвайрментах руками, бо яка ж автоматизація, ви що. А уявляєте собі як там працювала підсвітка синтаксису і як кльово було читати HTML в базі?

🤣 А добило мене те, що проект в —prod версії не білдався. От взагалі. Його білдали в dev версії, без мініфікації, без оптимізацій, з усіма dev приколами і викладали на Prod. Важило те монстрище аж 12MB (це тільки JS). Я думав що посивію коли то побачив, але нічого, пережив якось.

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

Всім гарної п'ятниці!

SOLID, прямий ефір в понеділок 03.04.22, 19:00


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

👉 Так що резервуйте собі вечір наступного понеділка і приходьте, буду всіх радий бачити!

👩‍🏫 А поки що буду вас знайомити з веб вразливостями - XSS, XSRF, Prototype Pollution.

Бережіть себе, і пам'ятайте - "всеодно добро, "закохає" зло" (С) ТНМК

Web Vulnerabilities #1 - XSS

💡Сама ідея вразливості дуже проста: це всього-навсього виконання чужого JavaScript коду на веб сторінці.

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

❗️Виникає XSS тоді, коли ви виводити на сторінку дані від користувача або з інших систем як є, без їх "знешкодження", або з не повним знешкодженням.

До прикладу уявіть собі форум пасічників на якому ви пишете наступний пост:

Бджоли рулять!!!
<script>alert('ТАК!');</script>

✍️ Якщо виводити цей контент як є (доприкладу через .innerHTML=), станеться наступне: текст з'явиться як текст, а от script секція буде додана саме як script. Браузер цей скрипт виконає і користувач побачить вікошко з текстом десь з 2004 року.

Звичайно всі адекватні фреймоврки про цю проблему знають і біль-менш успішно її успішно її вирішують. Але є три моменти

1️⃣ По-перше, не завжди ми використовуємо фреймворки взагалі, іноді в проді лежать самописки або якісь екзоти. Та й element.innerHTML = USER_INPUT_PLEASE_NO ніхто не відміняв, навіть в тому ж React. (не робіть так)

2️⃣ По-друге, фреймворки не святі. В React-і була проблема з серіалізованим стейтом сторінки під час server-side-rendering. Особливо не пояснюю, бо проблема давно вирішена, але це чудова ілюстрація того, що навіть стабільні фреймворки бувають вразливі.

3️⃣ По-третє, всі фреймворки мають спосіб як обійти санітанізацію (тобто знешкодження) контенту, тому що це буває потрібно. Уявіть собі що вам потрібно рендерити якийсь HTML з бази даних або з іншого сервісу. Ось тут без обходу знешкодження ніяк. І якщо ви зробите її некоректно, або хтось отримає доступ до джерела цієї розмітки - ви в повній дупі і цей вираз навіть на половину не передає рівень ваших проблем.

❓А от як з цим боротися - наступному пості.
@reactbeginners

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

Це відео піднімає дві важливі проблеми:

1️⃣ Інфоциганщина як така, тобто неякісне навчання просто за гроші. Нажаль таке буває і з IT курсами.

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

Відео до перегляду

Web Vulnerabilities #2 - XSS - як боротися.

З тим що таке XSS ми наче трохи розібралися. Щоб закріпити матеріал, раджу спробувати самому таку просту вправу:

Cтворіть форму з textArea та реалізуйте логіку додавання повідомлень під форму за допомогою innerHTML або аналогів. Потім спробуйте підпихнути туди код який ввімкне камеру, або зробить запит на будь-яку API на фоні. Можна взяти React та dangerouslySetInnerHTML

Тепер давайте перейдемо до засобів боротьби з XSS.

1️⃣ Використовуйте перевірені фреймоврки або бібліотеки, які вміють знешкоджувати XSS з коробки - наприклад ті самі Angular, React або Vue.

2️⃣ Якщо ви не можете в п.1 (буває таке 😢 в самописних фреймворках або зарегульованих компаніях) - використовуйте спеціальні бібліотеки для знешкодження контенту. Не робіть власні "велосипеди", якщо ви тому спеціально не навчалися. Тема XSS дуже складна і помилитися дуже і дуже просто.

3️⃣ Налаштуйте npm audit (бажано на рівні CI) щоб бачити знайдені вразливості у ваших залежностях. А npm audit fix допоможе виправити частину з них.

4️⃣ Не обходьте захист бібліотек від XSS аж допоки це не стане абсолютно необхідно. І навіть в цьому випадку, шукайте можливість дозволити не весь HTML, а лише мінімальний набір тегів та атрибутів, який вам потрібен.

5️⃣ Використовуйте додаткові способи захисту: Content-Security-Policy Header, Permission-Policy Header (буде окремий пост). Це зменшить вектори атак та зменшить шкоду, яку зловмисник зможе завдати.

6️⃣ Завжди ставтеся до будь-яких чужих даних як до шкідливих. Не важливо чи це - користувацький ввід або 3rd party система. Зламають її, зламають і вас. До-речі, ви ж в курсі, що window.location.href містить саме користувацькі дані, правда ж?

Тепер щодо React. Якщо вам потрібно вивести HTML, для цього є метод dangerouslySetInnerHTML, який є просто обгорткою над .innerHTML. Тобто, це прямі ворота в пекло і його можна використовувати виключно в поєднанні з іншими бібліотеками які вміють відсікати script-и і весь не бажаний контент.

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

@reactbeginners

🎁Подарунки в прямому ефірі!🎁

Як ви вже знаєте в понеділок, 03.04 о 19:00, у нас буде ефір про SOLID, про те що воно таке, навіщо воно треба і про те, чому він на React натягується, але не так щоб повністю.

❤️ А от про подарунки ви ще не знаєте. Я зібрав для вас два подарункові набори (тобто буде два переможці). Перший набір - дві пари фірмових носочків, блокнот та набір класних наліпок. Набір другий - термочашка, блокнот та теж наліпки. І ще мікросюрприз, якщо в переможця є маленька дитина. Але про це вже під час ефіру.

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

1️⃣ Поширити цей пост в лінкедині та написати під ним коментар. Якщо у вас немає лінкедину - нічого страшного, можете поширити його у фейсбук, твітер чи де вам зручно. Головне скиньте мені посилання на поширення, щоб я додав вас до розіграшу.

2️⃣ І, як завжди, прийти на ефір, хто не прийшов, той не отримав 😂

Чекаю на всіх, приходьте, ставте питання, будемо навчатися разом!

Сьогодні п'ятниця, тому ось вам фото подаруночків на наступний понеділок (їх насправді трохи більше, просто місця було для фото мало)

Приходьте, буде дуже лайтово, просто у форматі розмови. Мене самого колись ця тема з SOLID також діставала, тож я хочу зробити її краще ніж тоді коли вчив сам.

Неофіційний початок буде десь о 18:45, хто хоче просто поспілкуватися, приходьте трохи раніше.

Дякую за вашу підтримку і поширення (і тим хто поставив зірки на GitHub для React-Code-Smells 😁)

Всім гарної п'ятниці.

Безкоштовна практика з носіями Англійської.

❗️Мені тут підкинули ресурс, який пропонує українцям віком від 10 до 35 років (не дуже чесно, але вже як є) безкоштовну практику з англійською з носіями мови.

Не буду казати наскільки англійська важлива - це і так зрозуміло, тому кому треба англійську підтягнути (це всього година на тиждень) раджу спробувати.

❤️ Дякую Ростиславу Пилипіву за наводку.

П.С. - Чекаю всіх на 19 годину, буде SOLID, балачки та майже лисий я 😀