Angular получает новый синтаксис шаблона

Знакомимся с новым синтаксисом шаблонов, который будет введен в Angular. Автор объясняет, что новый синтаксис позволит разработчикам писать более компактный и выразительный код шаблонов, упрощая разработку и повышая читаемость. В материале описаны основные изменения, такие как новые структурные директивы, измененные способы привязки данных и улучшенная поддержка условной логики.

👉 @sWebDev

Защита от XSS атак в React

Распространенной угрозой безопасности в веб-приложениях является межсайтовый скриптинг (XSS), который возникает, когда злоумышленник внедряет вредоносные скрипты на веб-страницы, потенциально нанося ущерб или компрометируя пользовательские данные.

   function Comment({ text }) {
     return <div dangerouslySetInnerHTML={{ __html: text }} />;
   }

В компоненте мы используем dangerouslySetInnerHTML для рендеринга текста пользователя, если пользователь пишет HTML, он будет отображен как есть, что дает выполнять произвольный JavaScript (включая вредоносный).

Для предотвращения атак XSS, стоит избегать dangerouslySetInnerHTML. JSX React отлично справляется с экранированием потенциально опасных строк по умолчанию. Когда нужно отобразить предоставленный пользователем текст, просто вставьте его в качестве дочерних элементов, например:

   function Comment({ text }) {
     return <div>{text}</div>;
   }

👉 @sWebDev

Sassy Search Bar

Анимированная строка поиска с подсказками, реализованная на SCSS и TypeScript.

👉 @sWebDev

Как перетаскивать в Vue?

Vue.js отлично подходит для создания не только простых пользовательских интерфейсов, но и для разработки продвинутого функционала для пользователей. Например, Drag'n'Drop (перетаскивание элементов), который может быть полезен для сортировки или группировки элементов.

👉 @sWebDev

Maskito

Не так давно команда Тинькофф выложила в открытый доступ свою разработку - библиотеку Maskito, предназначенную для маскирования и валидации ввода данных в текстовых полях. Она обеспечивает простой способ применения маски к текстовому вводу, такому как номера телефонов, почтовые индексы, даты и другие форматы. Maskito обладает гибкими настройками, позволяющими настроить поведение и внешний вид маски, а также предоставляет возможность валидации ввода данных. Это полезный инструмент для создания пользовательских форм с ограничениями и форматированием текстовых полей.

👉 @sWebDev

Сanvas slider GSAP parallax

Слайдер изображений, выполненный на GSAP.js.

👉 @sWebDev

Путь миграции крошечного приложения на Vue 3

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

👉 @sWebDev

ZangoDB

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

👉 @sWebDev

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