SVG Animation with Speech Recognition

Анимация, распознающая выбранный цвет. Выполнено на just-animate.js и TweenMax.js.

👉 @sWebDev

Компонент для измерения производительности React компонентов?

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

👉 @sWebDev

404 Page

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

👉 @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

Claymorphic SVG button

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

👉 @sWebDev

Как преобразовать компоненты Figma в Next.js с помощью Tailwind CSS

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

👉 @sWebDev

Tilt.js

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

👉 @sWebDev

Three JS - Projects particle menu

Анимированная фигура, откликающаяся на изменения в меню. Выполнено с использованием SCSS и Three.js.

👉 @sWebDev

Анимация и переходы с использованием Tailwind CSS

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

👉 @sWebDev

Nanogallery 2

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

👉 @sWebDev

Street Fighter - Vue/Bulma

Меню выбора персонажа из игры Street Fighter, выполненное на Vue.js.

👉 @sWebDev

Выбор директивы Vue для отображения списка элементов

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

👉 @sWebDev

Распространенные ошибки при создании композиционных функций в Vue

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

👉 @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

Создаем клон LinkedIn на React

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

👉 @sWebDev

Как настроить Node.js Express сервер для React

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

👉 @sWebDev

Cample.js

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

👉 @sWebDev

Fluid text hover

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

👉 @sWebDev

Битва CLIs: почему мы отказались от Angular CLI в пользу Nx

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

👉 @sWebDev