Free React For Beginners

З новим Роком. Нехай це буде останній рік війни. А росія нехай отримує те на що заслужила. І якщо ми перетеопимо один одного, все буде добре. Усіх зі святами!

З новим Роком. Нехай це буде останній рік війни. А росія нехай отримує те на що заслужила. І якщо ми перетеопимо один одного, все буде добре. Усіх зі святами!

Сподіваюся всі живі. Схоже що це був рекордний наліт. Як бачите - путін не зацікавлений в мирі. Йому потрібна капітуляція України. А до чого призведе наша капітуляція ви можете побачити на прикладі Білорусі. І це ще в кращому випадку...

Повернувся на два дні в Київ) помитися поголитися відпочити) В цілому все гаразд, роботи трохи є, але всі живі здорові, вже добре. З цікавого активно розширюють штат для перехоплювачів шахедів. Має бути норм. А так, продовжуємо служити. А ви як тут?

Як покласти СlaudFlare на годину? Виявляється нічого складного - все що треба, допустити помилку в масиві залежностей хуку useEffect і ClaudFlare заддосить сам себе. Так що не сумуйте якщо у вас щось не виходить, всі помиляються. Головне не опускати руки) Дякую пану Євгену за посилання

Отже про конфу. Тема звісно #React, 18 жовтня, Київ. Виступати будуть як мінімум Ілля Климов та Сергій Бабіч. Чи я буду - не знаю точно останнім часом було багато роботи, підготуватися просто не встигаю. Можливо буде альтернативний формат, побачимо. Хто хоче прийти: Промо-код на 10%: FRFB2510 Хто хоче виступити (тех комітет там чудовий) тиць сюди Бережіть себе, шахеди останнім часос геть озвіріли. Ну і скоро побачимось. Ваш зампомиш.

Отака от несподівана новина @FwDays запросили мене виступати в жовтні на React+ конфі Було неочікувано та дуже приємно, вже навіть встигли обговорити з програмним комітетом можливу тему. Якщо вдасться все зробити - може бути прямо цікаво) Але я про що - оскільки тема ще в роботі, ви можете запропонувати свою - про яку вам було б цікаво послухати. Хто зна, можливо саме її ви і почуєте зі сцени FwDays :)

Окрім обробки завантаження та обробки помилок, не забувайте також відписуватися від асинхронних подій - таймаутів, таймерів, requestAnimationFrame та запитів на сервер. Зробити все це дуже просто - головне не забути про це :) Для відміни мережевого запиту потрібно: 1. В useEffect створити екземпляр класу AbortController 2. Передати властивість signal в поле signal методу fetch (Axios це також підтримує) 3. Повернути з useEffect метод, який викличе abort на екземплярі AbortController Все... Тепер, коли зміняться залежності ефекту, або коли компонент буде демонтовано, асинхронний запит буде відмінено. З setTimeout, setInterval, requestAnimationFrame ще простіше. Вони повертають спеціальний id і все що вам треба зробити - викликати clearInterval, clearTimeout, cancelAnimationFrame у функції, яку повертає useEffect. П.М. Планую зробити ефір в якому потоптатися по типових помилках в React. + Можливо зробити розіграш під благодійний збір на майстерню. Але поки це лише в планах. Бережіть себе.

Що ви тут взагалі? Що нового в React? Що в NextJS? Як ринок - чи є робота? Бачив що з'явилися нові ШІ для розробки (типу Cursor) але сам ще спробувати не міг, обмеження і все таке. Як воно вам?

Часта помилка початківців з мережевими запитами - ігнорування процесу завантаження та відсутність обробки помилок. В чому суть. Поки ви розробляєте веб сторінку, у вас все добре. Сервер у вас десь поруч, не навантажений, всі запити проходять майже миттєво і завжди успішно. На проді ситуація геть інша. Ваш клієнт може бути в іншій країні, а сервер буде завантажений, або просто недоступний з різних причин. В результаті - користувач тицяє кнопку, а нічого не відбувається. За кулісами запит то пішов, але користувач про це не знає. І тицяє ще раз. А потім іще... Це погано, і на щастя зараз майже всі відображають індикацію завантаження. Але є але - часто забувають про обробку помилок. В результаті - користувач бачить вічний лоадер та заблокований UI. А перезавантажити сторінку - втратити форму яку користувач заповнював декільки хвилин. Або, якщо все зовсім погано, корзину яку він набирав... Щастя це не додає. Другий момент - загальний loader який блокує геть весь екран, хоча заблокувати потрібно, наприклад, лише кнопку submit, або якийсь конкретний віджет. Звісно, нам так простіше - але, заблоковано має бути лише мінімально необхідна частина UI. Це дозволить продовжити роботу зі сторінкою поки користувач чекає на результат. Тому, коли ви проектуєте щось з мережевими запитами - починайте з помилок. Замість fetch зробіть throw і подивіться як реагує ваш UI. І чи ок вам така реакція. Сповільніть інтернет через Google Developer Tools і вам одразу стане зрозуміло що не так.

Там Доу просить допомогти, заповнити зарплатне опитування. Доу постійно проводить збори для ЗСУ тому давайте і ми їм трохи допоможемо. П. М. Трохи прогулявся по Києву - гарно, тихо. Наче все й добре. Тільки ціни на каву злетіли :'(

Паршива нічка. Як раз приїхав проходити ВЛК і тут таке. В такі моменти шкодуєш що не служиш в ппо або не розробляєш далекобійну зброю. Співчуваю...

Харків, співчуваю. росії байдуже кого вбивати. Власне їй навіть на своїх глибоко байдуже. А з КАБами зараз можна боротися лише вибиваючи їх літаки. Робота ведеться але це займе час. Харків, тримайся(

От бачите, не подбали трохи за безпеку і вже в сибіру палає. Хай там навіть 20 літаків пошкоджено, але це просто найсильніша операція ССО у світі за якою можна знімати фільми будь-якого рівня. Вітаю всіх причетних, та й нас звісно) А ви будьте уважні, наступні тривоги не ігноруйте. Побачимося, почуємося :) Ваш зампомиш.

Отже про заголовки #websecurity для #frontend Заголовків багато, різних, та нас цікавлять наступні: 1. Content-Security-Policy. Уявіть простий сценарій. На вашій сторінці знайшли XSS взраливість (треба про це розповідати?) і вбудували туди свій код. А він бах - і не працює. Чому? Тому що за допомогою CSP ви можете заборонити виконувати вбудований код. Тоді зловмисник може спробувати підвантажити код зі стороннього ресурсу. А це теж не працює, тому що ви обмежили завантаження JavaScript своїм доменом. Так само ви можете задати правила для будь-якого ресурсу - хоч JavaScript, хоч зображення, хоч CSS. Що цікаво, що для налаштування цього заголовку вам не потрібно турбувати бекенд. Ви можете вказати його за допомогою тегу meta з властивістю http-equiv="Content-Security-Policy" Правда є з ними і проблеми - складність налаштування (раджу використовувати CSP builder) та конфлікти з Google Analytics домен якої залежить від регіону. Відповідно вам доведеться додавати всі піддомени гугла у white list. Таке собі. Детальніше почитати можна тут 2. Другий заголовок який нас цікавить - X-Content-Type-Options Цей заголовок забороняє браузеру тип змісту ресурсів що завантажуються. Це протидії наступній цікавій атаці. Уявіть собі що ви налаштували CSP і заборонили виконувати JS. Зловмисник це побачив і замість файлу з content-type text/javascript відправляє той самий JS але не вказуючи тип. Деякі браузери (не всі), можуть спробувати подивитися в зміст файлу, і спробувати самостійно визначити його тип. Якщо тип буде визначено як JS цей файл буде виконано в обхід CSP. Заголовок X-Content-Type-Options забороняє браузеру "вгадувати" Нажаль, для цього заголовку, немає http-equiv, тому віддавати його має саме бекенд Детальніше можна почитати тут 3. Третій заголовок - Feature Policy або його менш підтрумувана версія - Permission Policy. Тут все просто - цей заголовок вмикає/вимикає певні фічі WebAPI. Наприклад, якщо вашій веб сторінці не потрібна камера, ви можете повідомити браузеру що її вмикати взагалі заборонено. Якщо хтось таки зможе вбудувати XSS у вашу сторінку, камеру увімкнути він все одно не зможе. Так само можна вимкнути геолокацію, оплати, тощо. Це може захистити ваших користувачів раптом щось піде дуже не так. Налаштовується лише через бекенд, детальніше можна подивитися тут Заголовків ще є, наприклад X-Frame-Options, Referrer-Policy. Раджу їх також подивитися. А у мене поки все, дякую всім хто дочитав.

Всім привіт! Кажуть що збори загинаються, люди перестали підтримувати #ЗСУ. А у мене завтра #деньнародження, мені потрібна ваша допомога щоб повернути в стрій наше авто. От і давайте перевіремо. В 22 році з цим не було ніяких проблем, кожен допомагав чим…

Всім привіт! Кажуть що збори загинаються, люди перестали підтримувати #ЗСУ. А у мене завтра #деньнародження, мені потрібна ваша допомога щоб повернути в стрій наше авто. От і давайте перевіремо. В 22 році з цим не було ніяких проблем, кожен допомагав чим міг. Подивимось що буде зараз :) Отже, на мій день народження, замість купляти собі стім дек, оголошую збір на ремонт зеленого буцефала - нові передні амортизатори (9000) та нову резину (16000). Бо аморти убиті в хлам , а резина лиса як більярдна куля та дірява як друшляк. Буду дуже вдячний за вашу допомогу. Звіт буде під цим постом. П.М. Стрім обіцяти не можу, але постараюся організувати це найближчим часом. 👉Монобанка тут Ваш ЗамПомиш, #ЗСУ #ДеньНародження

Продовжуємо серію про налаштування #frontend проекту і тепер потурбуємося про #websecurity. 1. Перевірте, що файл .env.local або його аналог не доданй під git. Так ваші паролі або токени не потраплять в мережу, а ви не отримаєте додаткові рахунки. Всі ключі/токени/паролі які ви використовуються мають зберігатися окремо або в key vault, або хоча б на білд машині яка готує реліз. 2. Налаштуйте перевірку ваших залежностей за допомогою команди npm audit. Ця команда покаже вам пакети, що містять вразливості та допоможе оновити їх щоб це виправити. Для того щоб було менше false positive спрацювань: - - Перенесіть в dev секцію вашого package.json файлу всі залежності що стосуються розробки - prettier, eslint, jest, і т.д. - - Використовуйте npm audit з прапорцем --production або --omit=dev. - - Передайте привіт create-react-app :) Гарною ідеєю буде інтегрувати цю перевірку в merge фазу пулл реквесту. Або раніше якщо не хочеться все перероблювати :) 3. Безпека runtime. Через особливість налаштування, частіше цим займається команда інфраструктури або бекенду, але частково це можемо налаштувати і ми. Особливо якщо у нас щось накшталт #nextjs Мова йде про основні безпекові заголовки - Content-Security-Policy (CSP), X-Content-Type-Options, Feature-Policy. А якщо ви ще й піклуєтеся про приватність ваших користувачів то й Referrer-Policy. В разі правильного застосування, за заголовки можуть запобігти або суттєво зменшити шкоду користувачам вашої веб сторінки. Детальніше про ці заголовки та як їх налаштовувати я розповім в наступному пості, бо лонгріди ж ніхто не читає) Ваш ЗамПоМиш. П.М. Ви тут як? Бо останнім часом такий цирк на дроті що голова обертом.

Початкові налаштування нового #react проекту Видаліть все зайве - зайвий код, зображення, іконки, тощо. Передивіться вже встановлені залежності коду і перенесіть в секцію dev ті залежності, що призначені для розробки (eslint, prettier, jest). Це буде корисно коли/якщо ви будете налаштовувати npm audit --omit=dev` Налаштуйте форматування за допомогою prettier та одразу застосуйте його з прапором --write. Досить сперечатися про крапки з комами. Встановіть і налаштуйте лінтер - eslint під себе, або за правилами команди. Наприклад для не використаних змінних я ставлю warning замість error, не так сіпається око. Встановіть та налаштуйте систему хуків для git - husky. Так ви зможете виконувати будь-які додаткові дії перед/після коміту/пушу. Наприклад ви зможете налаштувати husky автоматично запускати форматування staged коду. Тепер код у всіх і завжди буде виглядати одноманітно і без зусиль. Напишіть readme - Два речення про що проект, як встановити залежності (навіть якщо це тривіальний npm install бо може бути і yarn install), як запустити dev збірку, та які правила ви налаштували (а в ідеалі ще й чому) Все, можна плисти далі. Але якщо хочеться більшого то... це буде в наступному пості :) П.М. Амеліансе, я пам'ятаю що ти не фанат прітієра, та поки краще не зустрічав)

Так панство, тут Genesis Front-End School відкриває безкоштовні курси з побудови фронт-енд застосунків. З плюсів - в теорії можуть після навчання можуть взяти на роботу З мінусів - відбір, який треба буде пройти: HTML, CSS, JavaScript/TypeScript, React. Але думається мені ви впораєтеся (або дехто взагалі ментором туди піти може 😅). Дедлайн 13 квітня, старт 19 травня. Як на мене звучить як варіант (правда умов контракту я не знаю, якщо там треба буде продати душу, то будь-те обережні, душі річ цінна навіть в поточному перебаханому сьогоденні) Тут деталі, якщо хтось влаштується буде супер. П.М. Вибачайте що контенту мало, тексту мало, всього мало. Телеграму під рукою немаю, бачу його вряди годи (лінкедин і то частіше). Та й трохи втомлююся якщо чесно. Останнім часом все дуже нервово і не просто. Напевне війна... Тримайтеся. Дотянемо, переживемо і ще посидимо на березі річки.... Всіх обняв, ваш ЗамПоМиш