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

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

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

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

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


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

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

https://t.me/toisamyibabich/875

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

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

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

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

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

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

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

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

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

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

Давайте розбиратися:

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

Це може бути проблемою, коли ми оновлюємо одне поле в об'єкті, але не оновлюємо інші, залежні від нього поля (наприклад тому що правила по яким треба перерахувати залежні поля, знає лише бекенд). В результаті ми отримаємо не коректний стан даних на фронтенді, ще й розсинхронізований з бекендом.

2️⃣ Другу помилку краще проілюструвати:

export default function App() {
  const [users, setUsers] = useState([{ name: "1" }]);
  const updateFirstUser = () => {
    users[0].name = "updated";
    setUsers([...users]);
  };

  return (
    <>
      {users.map((u, i) => (
        <User user={u} key={i} />
      ))}

      <button onClick={updateFirstUser}>Update first user</button>
    </>
  );
}

const User = ({ user }) => <p>name: {user.name}</p>;

Якщо ви запустите цей код, то все відпрацює нормально, і по кліку на кнопку ви побачите нове ім'я користувача на сторінці. Але, якщо ви використаєте memo для компоненту User, або заміните його на PureComponent, то ваш код, несподівано, перестане працювати!

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

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

Висновок:

👉 Думайте як ваш код буде використовуватися в майбутньому,
👉 Робіть паузу для саморев'ю
👉 Не спішіть в п'ятицю :)

Всім гарного вечора!

Web Vulnerabilities #3 - XSS підсумки.

👉 XSS - це виконання стороннього, не авторизованого коду на веб сторінці.

👉 XSS виникає коли ви виводити сторонню інформацію "як є", без знешкодження.

👉 Для запобігання XSS потрібно знешкоджувати будь-який сторонній контент перед додаванням його на вашу веб сторінку.

Детальніше тут і тут.

❓ Питання до спільноти - хто хоче практичне заняття з XSS? :)

@reactbeginners

Ще один реальний кейс і порушення SOLID

👩‍🏫 В HTML5 є чудовий компонент -

<input type="time"/> 

який з коробки дозволяє вам досить зручно вибрати час.

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

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

🧐 Здавалося б все чудово, але розробники забули/забили на OpenClosed принцип і захардкодили сам механізм вибору форматування. Тепер, якщо в мене стоїть англійська локаль в ОС - я бачу AM/PM і програмно змінити це не можливо. Відповідно я змушений викинути цей зручний компонент (який ще й працює з коробки в мобільних) і шукати щось нове.

🤨 Отаке, порушення одного маленького принципу, "яке потрібно лише тим хто кодить на Angular або Vanilla JS" викинуло працю кількох розробників на вітер і змусило всіх інших витрачати додатковий час на пошук та встановлення іншого рішення.

Всім гарної п'ятниці і не забивайте на такі "не потрібні" принципи програмування як SOLID.

📅 Апдейт на тиждень 📅

👩‍🏫 Працюю над відео про структуру React проекту. Спробуємо розібрати що не так у дефолтній структурі NextJS, чому і як краще. Тема суперечлива, але як казав класик, "будемо полемізувати".

🧑‍💻 Один з підписників підкинув мені цікавий кейс з реального життя, треба його вам показати. Це, скоріше за все, буде вже текстом.

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

Всім гарного понеділка!

🎉 Ви не повірите, але один з наших підписників відкрив свою школу FPV пілотів! 🎉

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

🛫 По-перше, пілоти FPV зараз потрібні. Пілотувати Mavic або Matrice не дуже складно. Автокорекція та інтелектуальне керування все дуже спрощують. Але, з чимось більш складним (та сама Лелека), або FPV таким пілотам впоратися важче. А пілоту FPV - ні, тому що це певно найскладніший коптер для керування. Тож, якщо ви полетіли на ньому, то і на всьому іншому полетите.

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

❤️ Ну і по-третє - це все зробив один з нас! Навіть дизайн сайту був зроблений ще одним з членів нашого маленького ком'юніті. Ну як тут не радіти?

👉 Отже до справи. 2 - 4 людини в групі (чим менше тим краще, тож це дуже добре), тиждень симулятора, тиждень польотів. Новенька техніка, декілька варіантів FPV платформ. Плюс, за бажанням для вас можуть зібрати дрон, або, що краще, допомогти зібрати самому. Для своїх є знижка в 10% за промокодом FreeReact (на перші 5 людей)

Сайт, Інста (невже я пишу це слово), телеграм для зв'язку. Підписуйтесь (звісно кому цікаво) та поширюйте. Це дійсно корисна для всіх справа!

Серденьок йому бажаю я!

Ось ще один приклад з життя (максимально спрощений)

🗒 Маємо компонент який тримає в собі стейт моделі і керує діалогом з формою. Модель виконана у вигляді масиву об'єктів із value в середині, методу оновлення стейту немає взагалі.

export default function App() {
  const [isOpen, setIsOpen] = useState(false);
  const [fields] = useState([{ value: "test" }]);
  const closeDialog = () => setIsOpen(false);
  const openDialog = () => setIsOpen(true);

  return (
    <>
      <button onClick={openDialog}>Open edit dialog</button>
      <dialog open={isOpen}>
        <Form initialFields={fields} onCancel={closeDialog} />
      </dialog>
    </>
  );
}

🗒 Маємо другий компонент - форму, яка, приймає початкові дані і тримає їх у власному, окремому, стейті. На формі є кнопка з типом reset, яка при натисканні очищує форму та закриває діалог.

function Form({ initialFields, onCancel }) {
  const [fields, setFields] = useState(initialFields);
  const setField = (e, field) => {
    field.value = e.target.value;
    setFields([...fields]);
  };
  return (
    <form>
      {fields.map((field, i) => (
        <input key={i} value={field.value} onChange={(e) => setField(e, field)} />
      ))}
      <button type="reset" onClick={onCancel}>
        Cancel
      </button>
    </form>
  );
}

Проблема (вибачте, виклик!) полягає в тому, що, якщо ви відредагуєте поле і закриєте форму, а потім її знову відкриєте, то побачити внесені зміни. Незважаючи на reset і не зважаючи що метод setFields батьківскього компоненту взагалі не існує.

❓В задачі питається: де баг і що треба зробити з розробником цієї диверсії ❓

П.С. Дякую пану Ярославу за наведений приклад.

Відповідь на попередню задачу

Попередній приклад є React версією дуже популярного на співбесіді питання, в якому початківці бувають помиляються:

const a = { v:1 };
const b = a;
b.v = 0;
console.log(a.v); // ????

❓Подумайте хвильку, що буде в консолі?

А в моєму прикладі все те саме, лише загорнуте в React. Тож давайте цей приклад розберемо

1️⃣ Під час першого рендеру, ми викликаємо App і передаємо в стейт масив об'єктів, а потім, одразу ж, отримаємо цей масив назад і записуємо в константу fields.

2️⃣ Після цього викликається компонент Form який отримує посилання на той самий масив через пропс і кладе отримане посилання собі в стейт. Зверніть увагу, що і в App, і в Form ми маємо один і той самий масив з тими самими об'єктами.

3️⃣ Після зміни інпуту, викликається метод SetField, який записує значення в поле value об'єкту. Потім створюється новий масив, який записується в стейт Form. Але цей новий масив все ще містить ті самі об'єкти які він отримав від компоненту App. Тому, змінюючи їх в одному місці, вони змінюються усюди.

😊От і вся магія, як бачите нічого складного. Саме тому, доречі, я рекомендую спочатку гарно розібрати JS, а потім вже переходити до React, а не навпаки.

🔨 Шляхів вирішити цю ідею - багато. Наприклад не мутувати стейт, про що книжка пише з самого початку. Або, передавати в форму клони за допомогою structuredClone або JSON.stringify/JSON.parse.

❗️Головне те, щоб ви розуміли що відбувається і чому. І тоді вирішення проблеми знайти буде геть не складно. Ще й співбесіду буде проходити легше)

Бережіть себе, допомагайте ЗСУ, скоро побачимось!

Мені просто немає що сказати 😢

Руки не працюють. Голова не думає. Єдине що спадає на думку - всі наші пожертви були не дарма.

І так, їх ще буде потрібно багато. Але шлях у нас один. До їх кінця. До нашої перемоги.

Готуйтесь, гуртуйтесь, заробляйте, допомагайте, не опускайте руки.

Не забувайте.

🎙Анонс нового ефіру🎙

Пан Сергій запросив мене до себе на канал поговорити про... мене???

😎 Що з того вийде я не знаю, але кому цікаво трохи зі мною познайомитись, послухати трохи про наші курси, про те чим я займаюся окрім роботи і дізнатися чому ж я більше не стрибаю з парашутом - приходьте в суботу на 19:00.

🍺 Точно буде не напряжно, трохи гумора і можливо трохи матюків, якщо кішка Сергія не повернеться до норми до суботи 🐈.

Всіх запрошую ❤️

😮‍💨 Хлопці з Create-React-App втомилися і більше не рекомендують його для нових проектів😮‍💨

❗️Реакт випустив нову документацію (доречі, класна), в якій зазначив, що:

> ... ми рекомендуємо вибрати один із фреймворків на основі React, популярних у спільноті

🦣 Окремо Ден Абрамов зазначив, що команда планує перетворити його (CRA, а не Абрамова) на ланчер, який буде пропонувати відібрані фреймворки і стартувати проект вже на них.

👉 Для нас це значить наступне:

1️⃣ Якщо нам треба щось, що швидко збирається і не дуже складне - беремо Vite (npm create vite)

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

❗️В незалежності від обраного пункту починаємо вчити Next.JS. Можливо навіть доведеться зробити по ньому декілька відео.

П.М. А ще я випадково знайшов пост де команда, яка фактично відродила JSX не рекомендує до використання файли з цим розширенням 🤭

Всіх чекаю в суботу!

Наразі Create-React-App team прямо рекомендує використовувати замість CRA:

👉 Next.JS
👉 Remix

Походу треба робити нові курси 🥳

Всі ми тут дуже різні

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

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

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

Тому в цей день - я хочу побажати всім нам - розуміння і трохи терпіння. Розуміння того, що хоча ми всі дійсно дуже різні, але всі ми Українці. Терпіння - пробачати маленькі огріхи тих хто поруч. І тоді, ніяка руснява наволоч навіть подивитись в нашу сторону не зможе. Бо як казали Швейцарці Вільгельму II - ми просто зробимо по два постріли і розійдемося.

Всім сили, розуміння та терпіння.

Всім привіт, 20.04 відбудеться досить цікава Онлайн/Офлайн подія - Front-End Meetup від Levi9

👉 React Query & RTK Query (як раз для нас)
👉 CSS Trends та що нового в CSS (CSS завжди буде корисним, хто піде - розкажіть і мені)
👉 Нові підходи в Angular - це вже не зовсім те, але підходи можуть бути цікавими для розширення кругозору.

Онлайн - безкоштовно, оффлайн в Києві за 150 гривень які підуть на благодійність.

Реєстрація - тут