Методы обхода защиты Vue JS

Одним из недостатков Vue является уязвимость для XSS атак.
В статье мы рассмотрим:
1. Директивы;
2. Минимизация векторов;
3. События;
4. Мутации;
5. Адаптация полезной нагрузки для VueJS 3;
6. Teleport;
7. Сценарии использования.

👉 @sWebDev

Splide

Splide.js - универсальная библиотека для создания слайдеров и каруселей. Благодаря ей, вы можете добавить карусель несмотря на то, используется ли чистый JavaScript, TypeScript, React или Vue.

👉 @sWebDev

API реактивности Vue 3

Реактивность во Vue - это функция, позволяющая обновлять содержимое экрана исходя из изменений внутри кода. В статье речь идёт о ref, но автор также упоминает toRef, toRefs и isRef.

👉 @sWebDev

Флаги функций в React

Флаги функций — механизмы, которые разработчики могут использовать для безопасного выпуска программного обеспечения. Они позволяют добавлять или удалять функции из программной системы в реальном времени, без необходимости каких-либо изменений кода при развертывании.

👉 @sWebDev

Style директива в Svelte

Наглядное руководство по тому, как использовать директиву style в svelte правильно.

👉 @sWebDev

Эффект прозрачного стекла на Three.js

В Three.js с версии r129 появились новые функции, позволяющие создавать элементы похожие на стекло и пластик. В статье рассмотрим, как такого эффекта можно добиться в своем проекте.

👉 @sWebDev

Композиция компонентов React

Разбираемся, зачем в React нужна компонентная композиция и как делать её правильно.

👉 @sWebDev

Floating UI

JavaScript библиотека, позволяющая легко настраивать позиционирование всплывающих элементов на странице.

👉 @sWebDev

История Angular

Angular появился в 2010 году и смог проделать длинный и извилистый путь в мире веб-разработки, но до сих пор он остаётся одним из самых популярных фронтенд-фреймворков. В статье ознакомимся с историей Angular, с момента его появления и до наших дней.

👉 @sWebDev

Создаем свой музыкальный плеер на Vue.js

Рассмотрим варианты создания музыкальных плееров на Vue. В статье представлен краткий обзор функционала каждого варианта и прикреплен репозиторий для знакомства с кодом проекта.

👉 @sWebDev

Управляем состоянием с помощью Easy Peasy в React

Easy Peasy — это проект с открытым исходным кодом, получивший более 4,1 тыс. Звезд на GitHub.
В этом руководстве мы узнаем, как использовать Easy Peasy для управления состоянием в приложениях React. Разберёмся с основными концепциями Easy Peasy, вариантами использования и построим простой пример.

👉 @sWebDev

Разработка пакетного менеджера на Node.js

В прикрепленном туториале информация о том, как разработать собственный пакетный менеджер, используя Node.js и TypeScript.

👉 @sWebDev

10 методов стилизации приложения на React

В статье упоминаются популярные: inline-style, styled components. А также, менее распространенные: React JSS, Radium и React Shadow.

Рассмотрим React Shadow:

 npm i react-shadow 

import React from "react";
import root from "react-shadow";
import styles from "homepage.css";

const Homepage = () => {
  return (
    <root.div>
      <div className="container">
        <h1>Welcome to React</h1>
        <p>This is a simple homepage</p>
      </div>
      <style type="text/css">{styles}</style>
    </root.div>
  );
};

export default Homepage;

 

Подробное использование других методов стилизации доступно по ссылке.

👉 @sWebDev

Mithril.js

Mithril.js — это современный клиентский JS-фреймворк, предназначенный для разработки одностраничных веб-приложений. Он отличается малыми размерами (9.79 Кб), поддерживает маршрутизацию и XHR.

👉 @sWebDev

Dependency injection в React

Для лучшего понимания принципов DI, представьте модуль npm, предоставляющий следующую функцию:

 
export const ping = (url) => {
  return new Promise((res) => {
    fetch(url)
      .then(() => res(true))
      .catch(() => res(false))
  })
}

В источнике статья по правильному использования DI в React приложениях и пользе, которую это может принести.

👉 @sWebDev

Cleave.js

Данная библиотека позволяет форматировать вводимый текст, номер кредитной карты, дату, номер телефона и число. Ознакомиться с полным функционалом можно в прикрепленном репозитории.

👉 @sWebDev

Создаем общедоступные виджеты React

Статья с достаточно подробным руководством по созданию собственных виджетов на React. Изучаем тонкости и особенности этого процесса.

👉 @sWebDev

Chart.js

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

👉 @sWebDev

Создание приложения dApp на React, Solidity и Web3.js

Наглядная инструкция по созданию собственного онлайн-решения для пользователей, клиентов и покупателей. С целью обеспечения их лучшей конфиденциальности и безопасности данных.

👉 @sWebDev

Индикатор прогресса на React и TailwindCSS

Индикатор прогресса - это отличное решение для сайтов с большим количеством контента. Индикатор позволяет отслеживать прогресс и объем оставшейся информации.
В статье подробная инструкция, как сделать такой функционал при помощи React и TailwindCSS.

👉 @sWebDev