React Notion X

React Notion X - это библиотека, которая позволяет интегрировать Notion в React-приложения. Она проста в использовании и позволяет отображать блоки Notion в React-компонентах.

👉 @sWebDev

Flip for GSAP

Пример реализации плавных переходов, выполненный с применением библиотеки Gsap.js.

👉 @sWebDev

Использование Angular-компонентов в качестве обычных HTML-элементов

Какой метод позволяет использовать Angular-компоненты в качестве обычных HTML-элементов?

👉 @sWebDev

Экспорт макетов из Figma в готовое React приложение

Авторы статьи сравнили инструменты для генерации кода из Figma двух типов:
1. Плагины, которые генерируют код прямо в Figma.
2. Плагины, которые экспортируют макеты в веб-приложение.

👉 @sWebDev

useMutableSource: подключаем React к изменяемому источнику данных

Хук useMutableSource позволяет React компонентам безопасно читать из изменяемого источника данных. Полезно для приложений, отображающих данные в реальном времени.

useMutableSource принимает два аргумента:
1. Config: объект, содержащий функции для чтения и подписки на источник данных.
2. InitialData: начальное значение данных, которое будет использоваться в случае ошибки при чтении источника данных.

Пример useMutableSource:

  const MyComponent = () => {
  const [data, setData] = useState(null);

  const { read, subscribe } = useMutableSource({
    url: "https://example.com/data",
    // ...
  });

  useEffect(() => {
    // Подписываемся на источник данных
    subscribe(data => {
    setData(data);
    });
  }, []);

  return (
    <div>
    {data && <p>Data: {data.count}</p>}
    </div>
  );
  };

👉 @sWebDev

Bboy Evolution

Морфинг анимация картины "Evolution of the B-boy Dancer".

👉 @sWebDev

♥️ Все наши каналы по JS / PHP / Python, подпишись ♥️

@seniorFront - всё про фронтенд, практика, примеры кода, интересные статьи

@frontendInterview - подготовка к собеседованиям по фронтенду

@web_craft - php, Laravel, фронтенд

@python_practics - всё про Python, обучающие материалы, полезные советы и статьи

Добавление WebAuthn в веб-приложение

В статье рассказывается, как добавить WebAuthn в веб-приложения. WebAuthn - это новый метод аутентификации, который обеспечивает более высокий уровень безопасности, чем устаревшие пароли и SMS-подтверждения. Он использует аутентификацию на основе публичных ключей, которая позволяет пользователям входить в систему с помощью устройств, таких как смартфоны или смарт-карты.

👉 @sWebDev

Babel

Babel - это транскомпилятор JavaScript, который преобразует код, написанный на новых версиях JavaScript, в код, который может быть выполнен в старых браузерах или средах.

👉 @sWebDev

Anime.js logo animation

Анимация лого на Anime.js.

👉 @sWebDev

Никаких больше If/Else: Лучшие советы для разработчиков Angular

Структуры if/else или условные операторы хоть и необходимы, но их чрезмерное использование может привести к проблемам. Чтобы решить эти проблемы, необходимо использовать более структурированный и специфичный для Angular подход к обработке условной логики в приложениях.

👉 @sWebDev

Cheerio

Cheerio - это библиотека для работы с HTML, написанная на JavaScript. Она представляет собой реализацию ядра jQuery, специально предназначенную для работы с сервером.

Преимущества Cheerio:
1. Производительность: очень быстрая библиотека, которая может обрабатывать большие HTML-документы.
2. Легкость в использовании: имеет простой и понятный API, который основан на jQuery.
3. Универсальность: поддерживает как HTML, так и XML.

👉 @sWebDev

Реклама. ООО "Яндекс" ИНН 7736207543 Erid LdtCKfwJx\

Canvas Particles w/ GSAP.js

Анимированные пузыри выполненные на Gsap.js.

👉 @sWebDev

Как правильно объявить переменную в <script setup>?

Какой из следующих вариантов является правильным синтаксисом для объявления переменной в компоненте <script setup> ?

Вариант 1: export const count = ref(0);
Вариант 2: var count = ref(0);
Вариант 3: const count = ref(0);
Вариант 4: let count = ref(0);

👉 @sWebDev

TypeScript: разработка WebAssembly-компилятора

В данной статье автор расскажет, как разработать компилятор для WebAssembly на TypeScript через разработку языка программирования для рендеринга множества Мандельброта.

👉 @sWebDev

Использование useState() для создания динамического состояния

Хук useState() используется для создания статического состояния, которое не меняется во время работы компонента. Однако его также можно использовать для создания динамического состояния, которое может изменяться в зависимости от внешних факторов.

Пример:

  function DynamicState() {
  const [state, setState] = useState(0);

  useEffect(() => {
    // Получаем данные из внешнего источника
    const data = fetch("https://example.com/data").then(response => response.json());

    // Обновляем состояние с помощью данных из внешнего источника
    setState(data.state);
  }, []);

  return (
    <div>
    <p>Текущее состояние: {state}</p>
    </div>
  );
  }

В этом примере мы используем хук useEffect() для получения данных из внешнего источника. Затем мы используем эти данные для обновления состояния компонента с помощью хука useState().

👉 @sWebDev

5-Way Gradient Generator

Интерактивный пятисторонний градиент на Vue.js.

👉 @sWebDev

React: разрабатываем кастомный useEffect

В данной статье вы найдете туториал по разработке кастомного хука, функционал которого будет аналогичен функционалу встроенного хука useEffect, за исключением того, что наш useEffect будет повторно выполняться только при изменении его зависимостей любого типа (неважно, примитивы это или объекты).

👉 @sWebDev