Интересный фильм мог бы получиться.

👉 @sWebDev | #юмор

Как использовать директиву NgClass для динамической привязки стилей к компонентам

Директива NgClass в Angular динамически применяет CSS-классы к элементам в зависимости от состояния компонента. Это позволяет гибко назначать или удалять классы на основе условий.

Пример использования:

<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">
  Этот элемент будет активен или отключен в зависимости от состояния.
</div>

Классы active и disabled применяются в зависимости от переменных isActive и isDisabled.

Динамическая привязка через объект:

NgClass часто используется для привязки классов через объект, где ключи — это имена классов, а значения — булевые выражения.

@Component({
  selector: 'app-example',
  template: `<button [ngClass]="buttonClasses">Кнопка</button>`
})
export class ExampleComponent {
  isActive = true;
  isDisabled = false;

  get buttonClasses() {
    return {
      'btn-active': this.isActive,
      'btn-disabled': this.isDisabled
    };
  }
}

👉 @sWebDev

Solar System Scale Model

Анимированная солнечная система на Vue.js.

👉 @sWebDev

Что вы выберете при дедлайне?

❤️ — Как угодно, лишь бы успеть.

👍 — Страдаю, но делаю правильно.

👉 @sWebDev | #юмор

ScrollReveal

ScrollReveal — это библиотека для анимации элементов при прокрутке страницы. Она помогает добавлять эффекты появления, позволяя постепенно отображать контент, когда он попадает в область видимости пользователя.

👉 @sWebDev

Little Bouncy Radio

Анимация радиоприемника с кнопкой проигрывания на Mo.js.

👉 @sWebDev

Структура папок для React.js: лучшие практики

Статья описывает различные подходы к организации файлов в React-приложениях, такие как группировка по функциям, по типу файлов и гибридный подход. Описаны примеры и лучшие практики интеграции таких современных функций, как Redux, Hooks, Context API, Styled-components и тестирование, в структуру проекта для улучшения масштабируемости и упрощения разработки.

👉 @sWebDev

Spooky Headless Wizard

Анимация чародея на Mo.js и GSAP.

👉 @sWebDev

Headroom.js

Headroom.js — это легковесная JavaScript-библиотека, которая позволяет управлять видимостью заголовков на странице во время прокрутки. Она "прячёт" заголовок, когда пользователь скроллит вниз, и возвращает его, когда пользователь прокручивает страницу вверх.

👉 @sWebDev

Динамическая загрузка компонентов с использованием Angular Ivy

Какой метод используется для динамической загрузки компонентов в Angular Ivy?

Если забыли, то вернитесь к посту от 23.09.2024.

👉 @sWebDev

Сначала думаешь, а потом как обычно...

👉 @sWebDev | #юмор

Использование createPortal для рендеринга компонентов вне DOM-иерархии в React

Метод createPortal в React позволяет рендерить компоненты вне текущей DOM-структуры. Это полезно для создания модальных окон, всплывающих меню или уведомлений, которые должны отображаться поверх остальных элементов без влияния родительских стилей и позиционирования.

Создание уведомления, рендерящегося в отдельном узле DOM:

import React from 'react';
import ReactDOM from 'react-dom';

function Notification({ message }) {
  return ReactDOM.createPortal(
    <div className="notification">
      {message}
    </div>,
    document.getElementById('notification-root')
  );
}

В этом примере компонент Notification рендерится в элемент с ID notification-root, который находится вне основного DOM-дерева приложения. Это позволяет отображать уведомление поверх других компонентов без конфликтов стилей и вложенности.

👉 @sWebDev

Happy Pizza

Анимация пиццы на Mo.js и GSAP.

👉 @sWebDev

Боитесь озвучивать свои зарплатные ожидания?

❤️ - Да.

👍 - Нет.

👉 @sWebDev | #юмор

Planck.js

Planck.js — это легковесный 2D физический движок, написанный на JavaScript и предназначенный для создания физически корректных симуляций в браузере. Planck.js использует технологию Box2D, известную из разработки игр, для реализации столкновений, гравитации и других физических эффектов. Библиотека поддерживает объекты с различными формами, физическими свойствами, такими как плотность и упругость, и позволяет создавать простые 2D игры или интерактивные симуляции. Planck.js хорошо интегрируется с canvas и SVG, что делает её удобной для создания анимаций и визуализации физических систем.

👉 @sWebDev

Vertical Parallax Scroll

Скролл-анимация на GSAP.

👉 @sWebDev

React и жизнь после сборки

Статья рассказывает о том, как можно восстановить исходный код React-приложений из готовых сборок, даже если исходников нет под рукой. Описываются методы работы с декомпиляторами и деобфускаторами, использование файлов .git для восстановления и применение файлов source maps. Рассматриваются реальные кейсы из опыта авторов, примеры сборок и инструменты, которые помогают решить подобные задачи.

👉 @sWebDev

Simple Mo.js animation

Абстрактная анимация на Mo.js.

👉 @sWebDev