Canvas sprite-sheet bubbles

Интерактивные мыльные пузыри реализованные с помощью GSAP.

👉 @sWebDev

Angular сделает RxJS необязательным; разработчики Drupal перейдут на Headless

Статья обсуждает, как Angular сделает библиотеку RxJS необязательной, упрощая работу для разработчиков, и как разработчики Drupal переходят на headless CMS, используя Drupal как бэкенд с современными JavaScript-фреймворками на фронтенде, что позволяет создавать более динамичные веб-приложения.

👉 @sWebDev

Travel carousel

Интерактивная карусель карточек с использованием Swiper.js.

👉 @sWebDev

Blaze.js

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

👉 @sWebDev

Работа с методами жизненного цикла

Какой метод жизненного цикла компонента в Angular используется для выполнения собственных проверок и действий, которые не могут быть захвачены встроенными механизмами обнаружения изменений?

Забыли? Вернитесь к посту от 08.07.2024.

👉 @sWebDev

Подборка удобных интерфейсов.

👉 @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

Shader-Experiment

Настраиваемая анимация на Three.js.

👉 @sWebDev

Часто вы отвлекаетесь при программировании?

❤️ - У меня получается концентрироваться.

👍 - Бывает.

👉 @sWebDev | #юмор

Particles.js

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

👉 @sWebDev

Офер в Яндекс для опытных фронтендеров за два дня

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

Как правило, за несколько собеседований сложно понять, подходит ли вам команда и наоборот. Multitrack позволит вам поработать в трёх разных командах Яндекса и выбрать подходящую. Вы сможете погрузиться в рабочие процессы, познакомиться с будущими коллегами и понять, с какими задачами и технологиями хотите работать.

Узнать подробности и зарегистрироваться.

City Illustration

Интерактивная анимация города на GSAP и React.js.

👉 @sWebDev

Работа с деревом Angular

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

👉 @sWebDev

Race Car Island

Анимация гонок на GSAP.

👉 @sWebDev

Dropzone.js

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

👉 @sWebDev

Изменения в процессе рендеринга в React 19 RC

Как в React 19 RC изменился процесс рендеринга компонентов по сравнению с React 18?

Забыли? Вернитесь к посту от 14.07.2024.

👉 @sWebDev

Мир глазами front-end разработчика.

👉 @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