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

Splitting.js

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

👉 @sWebDev

Personal Space — Generative Design/Animation!

Анимированная сцена, реализованная с применением библиотеки Anime.js.

👉 @sWebDev

Как защититься от XSS атак в React?

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

👉 @sWebDev

Horizontal Scroll Gallery

Галерея c горизонтальным скроллом, выполненная при помощи Less и библиотеки Babel.js

👉 @sWebDev

Защита от внедрения компонентов в React

Если есть компонент, который динамически импортирует и рендерит другой компонент на основе свойства, то есть шанс передачи вредоносного имени компонента в качестве свойства и его импортирования.

Хороший способ обезопасить себя - это ограничить количество компонентов, которые можно динамически импортировать и рендерить. Импортируя только тот, чье имя есть в списке:

   const COMPONENTS = {
   Home: () => import('./Home'),
   Profile: () => import('./Profile'),
   // ...
   };

   function DynamicComponent({ componentName }) {
   const [Component, setComponent] = useState(null);

   useEffect(() => {
   const loadComponent = COMPONENTS[componentName];
   if (loadComponent) {
   loadComponent()
   .then(setComponent)
   .catch(console.error);
   }
   }, [componentName]);

   return Component ? <Component /> : null;
   }

👉 @sWebDev

Moon Reflection on Sea - Anime js

Анимация смены времени суток, выполненная на Anime.js.

👉 @sWebDev

Сервис для обнаружения типа устройства пользователя на TypeScript и Vue 3

Туториал для разработки собственного сервиса, способного определять способ взаимодействия с веб-приложением (touchscreen, мышка), ориентацию экрана (горизонтальная, вертикальная), тип устройства (desktop, tab, phone).

👉 @sWebDev

Fitty

Fitty - небольшая библиотека для автоматической подгонки размера текста под размер его контейнера. Она помогает автоматически масштабировать текст, чтобы он полностью вписывался в заданный блок, сохраняя при этом читаемость.

👉 @sWebDev

PComm Ghost | Anime JS

Анимированное приведение, выполненное на Anime.js.

👉 @sWebDev

🔥Тест по React JS от OTUS🔥

— Ответьте на 19 вопросов и проверьте, насколько хорошо вы знаете язык. Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js со скидкой!

🚀ПРОЙТИ ТЕСТ ОНЛАЙН-КУРСА ПО REACT.JS https://otus.pw/H0pAg/

Курс доступен в рассрочку.

🎁Пройдете успешно тест, получите доступ к открытым урокам курса.

Нативная интеграция. Информация о продукте www.otus.ru