Frontender Libs - обзор библиотек JS / CSS

Как защититься от XSS атак в React? Межсайтовый скриптинг (XSS) представляет распространенную угрозу безопасности веб-приложений. Как защитить свое React приложение от данной уязвимости? 👉 @sWebDev

Personal Space — Generative Design/Animation! Анимированная сцена, реализованная с применением библиотеки Anime.js. 👉 @sWebDev

Верстаешь? 🔥 Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке: 1. Сверстаешь веб-сайт на HTML + CSS; 2. Оживишь страницу с помощью JavaScript; 3. Используешь фронтенд-фреймворк Angular; 4. Подключишь Backend и загрузишь сайт на хостинг; 5. Получишь советы по доработке своего проекта; 6. Добавишь в портфолио 1 качественный проект; 7. Получишь в подарок чек-лист «45 мест для поиска работы». А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова. 👉 Проскочить на интенсив бесплатно Начинаем 15 августа.

Splitting.js Инструмент для создания креативного текстового контента на веб-страницах. Splitting.js разбивает текст на мелкие фрагменты и применяет к ним различные стили и анимации, что позволяет создавать текстовые эффекты. Библиотека поддерживает различные типы разделения текста: по буквам, словам, строкам, а также предоставляет множество настроек для управления внешним видом и анимациями текста. 👉 @sWebDev

Битва CLIs: почему мы отказались от Angular CLI в пользу Nx В статье узнаем, почему разработчики Тинькофф Бизнес используют Nx для всех Angular-проектов, какие проблемы это решает и чем этот подход лучше Angular CLI. 👉 @sWebDev

Онлайн-урок "Изоморфные React-приложения с React.js , Next.js и TRPC". Разработка полноценных фуллстек приложений с поддержкой SSR стала доступной! Присоединяйтесь к бесплатному вебинару из онлайн-курса «React.js Developer» от OTUS, который состоится 14 августа в 20:00 по мск. На уроке вы узнаете: 🔹как создавать приложения с клиентской и серверной частями 🔹 настройку сборки, разработку и развертывание 🔹 получите готовый стартовый набор для создания веб-приложений на современном стеке. Не упустите шанс поучиться у профессионалов и увидеть образовательный процесс изнутри. Зарегистрируйтесь, чтобы принять участие https://otus.pw/YbIu/ Нативная интеграция. Информация о продукте www.otus.ru

Fluid text hover Анимированный текст, выполненный с помощью библиотеки Babel.js. 👉 @sWebDev

Cample.js Cample.js - это новый JS фреймворк для создания пользовательских интерфейсов. На данный момент, все ещё находится в разработке. Сейчас Cample.js можно использовать для работы с изображениями, например: изменять размер, обрезать, вращать и фильтровать изображения. 👉 @sWebDev

Как настроить Node.js Express сервер для React Это руководство поможет вам разработать простое приложение на React и подключить его к серверу, созданному с использованием Node.js. Мы начнем с создания React приложения с помощью команды create-react-app, а затем настроим его подключение к серверу Node.js c помощью proxy. 👉 @sWebDev

Создаем клон LinkedIn на React Подробный туториал по созданию клона LinkedIn с использованием React. Автор делится полным циклом разработки: от настройки проекта и авторизации и до добавления основного функционала в приложение. 👉 @sWebDev

Защита от CSRF-атак в React CSRF (Cross-Site Request Forgery) - это атака на веб-приложения, при которой злоумышленник обманывает авторизованного пользователя, заставляя его выполнить нежелательные действия на сайте без его ведома или согласия. Например, у вас есть конечная точка /api/posts/delete, которая удаляет сообщение на основе идентификатора, указанного в теле запроса, если вы проверяете только cookie для аутентификации, то злоумышленник может создать вредоносный сайт со следующим скриптом, напрямую в исходном коде:

 
   fetch('https://your-website.com/api/posts/delete', {
       method: 'POST',
       body: JSON.stringify({
         id: 'some-post-id',
       }),
       credentials: 'include',
     });

Таким образом, атакующий может использовать программное обеспечение API, такое как Postman или Insomnia, для открытия этого URL, сохраняя ту же логику. Защитой в этом случае будет использование токена или другого метода авторизации вашей конечной точки. 👉 @sWebDev

Распространенные ошибки при создании композиционных функций в Vue Обзор распространенных ошибок при создании композиционных функций во Vue.js. Рассмотрим проблемы, связанные с использованием глобального состояния, мутаций Vuex и неудачных попыток создания переиспользуемых компонентов. Также предлагаются практические советы и подходы, чтобы избежать этих ошибок и улучшить структуру и производительность приложения. 👉 @sWebDev

Выбор директивы Vue для отображения списка элементов В вашем приложении Vue есть массив с данными, которые необходимо вывести на страницу. Какую директиву можно использовать для решения данной задачи? 👉 @sWebDev

Чем занимаются фронтендеры в финтехе? Узнаешь на лекции Digital Лектория Газпромбанка. Даша Корчуганова, руководитель фронтенд-команды направления Газпромбанк-Бизнес онлайн, расскажет: — зачем в финтехе качественный фронтенд — что фронтендер — это не только про код — насколько подход и реализация разных проектов могут различаться в пределах даже одного банка. Когда: 11 августа в 17:00 (по МСК) Встретимся на лекции «Frontend — это не скучно»! Регистрируйся на вебинар — s.gpb.ru/m/ytC85FOAK Реклама Банк ГПБ (АО), ИНН: 7744001497 erid: LjN8JyeBk

Street Fighter - Vue/Bulma Меню выбора персонажа из игры Street Fighter, выполненное на Vue.js. 👉 @sWebDev

Nanogallery 2 Nanogallery 2 - легковесная библиотека JavaScript для создания красивых и адаптивных галерей и слайдеров изображений. Отличается простым в использовании API и множеством настроек, которые позволяют создавать уникальные и интерактивные галереи с минимальными усилиями. 👉 @sWebDev

Анимация и переходы с использованием Tailwind CSS В статье рассматривается создание анимаций и переходов с помощью Tailwind CSS. Автор демонстрирует, как использовать встроенные классы Tailwind для создания плавных анимаций без необходимости написания пользовательского CSS. 👉 @sWebDev

Three JS - Projects particle menu Анимированная фигура, откликающаяся на изменения в меню. Выполнено с использованием SCSS и Three.js. 👉 @sWebDev

🤖 Изоморфные React-приложения с React.js , Next.js и TRPC. Фуллстек разработка с SSR никогда не была такой простой и доступной! 🔵14 августа в 20:00 мск открытый урок онлайн курса «React.js Developer» от OTUS. На этом вебинаре мы: - научимся бутстрапить полноценные легко развертываемые приложения с клиентской и серверной частью - на примере разберем настройку сборки, процесс разработки и развертывания приложения - получим удобный набор для старта разработки любого веб-приложения на современном стеке! 🟠Это отличная возможность перенять опыт преподавателя и посмотреть на процесс обучения изнутри. Оплата курса возможна любым удобным для вас способом. ➡️ Для участия в вебинаре зарегистрируйтесь: https://otus.pw/cKum/ Нативная интеграция. Информация о продукте www.otus.ru