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

Защита от 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

Tilt.js Tilt.js - легковесная JavaScript библиотека, добавляющая трехмерный эффект наклона к элементам при наведении курсора. Простота использования и настройки позволяет легко создавать красивые визуальные эффекты на вашем веб-сайте. Эффекты наклона могут придать вашему дизайну дополнительную динамичность и привлекательность. 👉 @sWebDev

Как преобразовать компоненты Figma в Next.js с помощью Tailwind CSS В эпоху быстрого развития веб-технологий стандарты дизайна быстро меняются. Разработчикам иногда сложно учитывать все новшества при вёрстке. В материале рассмотрим доступный способ преобразования конструкций Figma в Next.js-код с помощью Tailwind CSS. 👉 @sWebDev

Claymorphic SVG button Анимированная кнопка с резиновым эффектом, выполненная на CSS, SVG и GSAP.js. 👉 @sWebDev

Защита от уязвимостей IDOR в React The Sneaky Insecure Direct Object References (IDOR) - уязвимость, существующая из-за возможности несанкционированного доступа к данным путем изменения идентификаторов объектов. Уязвимость возникает, когда злоумышленник может получить доступ к внутренним объектам и ресурсам, изменив параметры: идентификаторы, ключи или имена в URL или запросах приложения. Рассмотрим вариант защиты:

 UserDetails() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('/api/user', {
      headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`
      }
    })
      .then(response => response.json())
      .then(setUser);
  }, []);
  // Рендер деталей пользователя...
}

Сервер проверяет токен и возвращает данные пользователю, связанному с этим токеном. 👉 @sWebDev

404 Page Анимированная страница 404. Проект выполнен на GSAP и SVG. 👉 @sWebDev

Компонент для измерения производительности React компонентов? Компонент, позволяющий измерять производительность компонентов и их потомков. Включает в себя следующие параметры: id, функцию onRender, которая принимает три аргумента. Что это за компонент? 👉 @sWebDev

SVG Animation with Speech Recognition Анимация, распознающая выбранный цвет. Выполнено на just-animate.js и TweenMax.js. 👉 @sWebDev

ZangoDB Легковесная и быстрая NoSQL база данных, разработанная специально для JavaScript. Она предоставляет простой API для выполнения запросов и управления данными, а также поддерживает индексы и транзакции. Библиотека обладает малым размером и простотой использования, идеально подходящая для проектов, где требуется быстрый и гибкий доступ к данным. 👉 @sWebDev

Путь миграции крошечного приложения на Vue 3 Рассмотрим процесс миграции небольшого приложения на Vue 3. Автор подробно рассказывает о причинах выбора Vue, шагах, необходимых для обновления кода и изменениях, которые были внесены в приложение. 👉 @sWebDev