Free React For Beginners

Розбираємо реальний кейс, або косячать усі.

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

😮‍💨 Вирішуючи трохи зекономити, я роблю ось такий, дуже простий код оновлення UI.

updateUser(user)
.then(() => {
  const user = allUsers.find((x) => x.id === userId);
  user.status = status;
  setUsers([...allUsers]);
})
.catch(e=> {/*тут все ОК*/});

❓Під час тестування код чудово працює, але вже наступного дня цей код було перероблено. Як ви думаєте, чому?

Зверніть увагу, що код відпрацював на тестуванні коректно.

Перший косяк знайдено, шукаємо другий)

Хто пропустив останній ефір про SOLID - прошу до перегляду.

😃 В якості бонусу - ось презентація з совою, яка так і не потрапила в ефір)

❤️ І як завжди - буду вдячний за відгуки та пропозиції.

😎 Бабіч буде виступати на FwDays
🤩 Бабіч буде виступати про React
👉 ТРЕБА ЙТИ

https://t.me/toisamyibabich/875

Вчора у нас відбувся стрім про SOLID, наразі відео в обробці, коли буде готове я викладу сюди посилання на почищену версію.

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

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

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


До наступних зустрічей!

А ми вже в ефірі, приєднуйтесь!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

❤️ Хто молодці? Ви молодці ❤️!

Нарешті все доїхало до шпиталю і починає приносити свою користь.

Дякую всім хто долучився гривнею, хто репостив і лайкав. І дуже дякую @fwdays за підтримку, ви круті!

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

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

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

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

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

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