Frontender Libs - обзор библиотек JS / CSS

Torus Tunnel Анимация туннеля на Three.js. 👉 @sWebDev

Настройка взаимодействия компонентов в Angular С помощью @HostBinding можно динамически изменять стили и классы хост-элемента компонента в зависимости от его состояния. Например, можно подсвечивать компонент при наведении курсора мыши или изменять его внешний вид при получении новых данных.

@Component({ ... })
export class HighlightComponent {
  @HostBinding('style.backgroundColor') backgroundColor = 'transparent';
  // ...
}

@HostListener позволяет компоненту реагировать на события, происходящие вне его области видимости. Это может быть полезно для создания выпадающих меню, модальных окон и других элементов интерфейса, которые должны взаимодействовать с остальной частью страницы.

@Component({ ... })
export class DropdownComponent {
  @HostListener('document:click', ['$event'])
  onClick(event: MouseEvent) { /* ... */ }
}

👉 @sWebDev

Мир глазами front-end разработчика. 👉 @sWebDev | #юмор

Изменения в процессе рендеринга в React 19 RC Как в React 19 RC изменился процесс рендеринга компонентов по сравнению с React 18? Забыли? Вернитесь к посту от 14.07.2024. 👉 @sWebDev

Dropzone.js Dropzone.js - это легковесная библиотека JavaScript, предназначенная для простой интеграции drag-and-drop загрузки файлов на веб-сайты. Она позволяет пользователям перетаскивать файлы в специальную область. 👉 @sWebDev

Как повысить эффективность вебинаров? Организация продающего вебинара - не простая задача, ведь необходимо предусмотреть множество деталей: удобную дату, вовлекающий контент, методы продвижения и взаимодействия с участниками. Вебинары от МТС Линк помогают привлекать новых клиентов и увеличивать конверсию из участника в лид. В сервисе доступен анализ поведения пользователей во время вебинара, синхронный перевод, автовебинары и интерактивные инструменты для вовлечения участников. Делимся методичкой с кейсами, чек-листами и инструкциями для маркетологов, PR и event-менеджеров, чтобы сделать вебинары эффективным инструментом для лидогенерации. Получите методичку бесплатно на сайте. Скачать #реклама 16+ mts-link.ru О рекламодателе

Race Car Island Анимация гонок на GSAP. 👉 @sWebDev

Работа с деревом Angular Статья рассматривает различные способы структурирования данных в Angular-приложениях, в частности, плоскую и вложенную структуры. В статье обсуждаются преимущества и недостатки обоих подходов, их влияние на производительность, простоту использования и возможности для масштабирования. Кроме того, рассматриваются примеры кода и сценарии использования, чтобы помочь разработчикам выбрать наиболее подходящий метод для своих проектов. 👉 @sWebDev

City Illustration Интерактивная анимация города на GSAP и React.js. 👉 @sWebDev

Офер в Яндекс для опытных фронтендеров за два дня 24–25 августа приглашаем фронтендеров с опытом работы от четырёх лет получить офер в Яндекс через multitrack за 2 дня. Достаточно решить задачи онлайн до 20 августа и пройти несколько технических секций 24 августа, чтобы уже 25-го получить офер и выбрать три команды, к которым вам было бы интересно присоединиться. Как правило, за несколько собеседований сложно понять, подходит ли вам команда и наоборот. Multitrack позволит вам поработать в трёх разных командах Яндекса и выбрать подходящую. Вы сможете погрузиться в рабочие процессы, познакомиться с будущими коллегами и понять, с какими задачами и технологиями хотите работать. Узнать подробности и зарегистрироваться.

Particles.js Particles.js — это легковесная библиотека JavaScript, которая позволяет создавать и анимировать частицы на веб-странице. Она часто используется для создания фона с анимацией частиц, который может быть интерактивным и реагировать на действия пользователя, такие как перемещение мыши. 👉 @sWebDev

Часто вы отвлекаетесь при программировании? ❤️ - У меня получается концентрироваться. 👍 - Бывает. 👉 @sWebDev | #юмор

Shader-Experiment Настраиваемая анимация на Three.js. 👉 @sWebDev

Объединение объектов с useSetState в React useSetState — это хук, который позволяет объединять объекты в их текущем состоянии, аналогично this.setState в классовом компоненте. Пример использования:

import { useSetState } from 'react-use';

const Demo = () => {
  const [state, setState] = useSetState({});

  return (
    <div>
      <pre>{JSON.stringify(state, null, 2)}</pre>
      <button onClick={() => setState({ hello: 'world' })}>hello</button>
      <button onClick={() => setState({ foo: 'bar' })}>foo</button>
      <button 
        onClick={() => {
          setState((prevState) => ({
            count: (prevState.count || 0) + 1,
          }));
        }}
      >
        count
      </button>
    </div>
  );
};

В этом примере, кнопка "hello" обновляет состояние, добавляя hello: 'world'. Кнопка "foo" обновляет состояние, добавляя foo: 'bar'. Кнопка "count" увеличивает значение счетчика count на 1. Этот подход помогает управлять состояниями, объединяя их в один объект. 👉 @sWebDev

Методичка: как сделать онлайн-встречи эффективнее Надоело ждать коллег, которые постоянно забывают о встречах, а отсутствие повестки и потерянные договоренности мешают нормально работать? Команда МТС Линк собрала на 37 страницах полезные материалы, чек-листы и кейсы, которые помогают компаниям проводить эффективные совещания в онлайне с помощью сервиса Встречи. Из методички узнаете: - Как создать постоянную ссылку и подключаться на встречи в 2 клика, - Как делать заметки и работать с файлами, не переживая за качество связи и безопасность данных. - Как облегчает жизнь ИИ, который расшифровывает созвоны в текст и автоматически отправляет расшифровку на почту. Еще в методичке описаны 7 способов оценки текущей эффективности ваших онлайн-встреч. Получить гайд можно бесплатно на сайте. Скачать #реклама mts-link.ru О рекламодателе

Подборка удобных интерфейсов. 👉 @sWebDev | #юмор

Работа с методами жизненного цикла Какой метод жизненного цикла компонента в Angular используется для выполнения собственных проверок и действий, которые не могут быть захвачены встроенными механизмами обнаружения изменений? Забыли? Вернитесь к посту от 08.07.2024. 👉 @sWebDev

Blaze.js Blaze.js — это библиотека шаблонов JavaScript, изначально разработанная для Meteor, платформы полного стека для создания веб-приложений. Она проста в использовании, предлагает декларативный синтаксис для описания пользовательских интерфейсов и поддерживает реактивные данные, автоматически обновляя интерфейс при изменении данных. 👉 @sWebDev