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

Управление анимациями с помощью AnimationBuilder AnimationBuilder из модуля animations позволяет создавать анимации в Angular. Он используется для динамического запуска или изменения анимаций на основе логики приложения. Пример:

import { Component, ElementRef } from '@angular/core';
import { AnimationBuilder, style, animate } from '@angular/animations';

@Component({
  selector: 'app-animation',
  template: `<div #box class="box"></div><button (click)="animate()">Animate</button>`,
  styles: [`.box { width: 100px; height: 100px; background: red; margin-top: 20px; }`]
})
export class AnimationComponent {
  constructor(private builder: AnimationBuilder, private el: ElementRef) {}

  animate() {
    const animation = this.builder.build([
      style({ transform: 'translateX(0)' }),
      animate('1s', style({ transform: 'translateX(300px)' })),
      animate('1s', style({ transform: 'translateX(0)' }))
    ]);
    animation.create(this.el.nativeElement.querySelector('.box')).play();
  }
}

👉 @sWebDev

А как вы думали это работает? 👉 @sWebDev | #юмор

Бесплатное обучение HTML и CSS. Для начинающих. 14 дней На курсе вы: - Освоите базу верстки сайтов — HTML и CSS - Научитесь переводить дизайн в код для сайтов - Получите поддержку от наставника в чате курса Курс подойдет тем, кто: 🎓 Ищет себя и пробует новое. Вы хотите узнать, каково быть разработчиком, и понять нравится ли вам это направление. Обучение покажет, что IT проще, чем кажется. 🎓 Хочет стать frontend-разработчиком. Вы решили стать программистом, но не знаете, с чего начать. На курсе получите базовые технологии frontend без лишней информации. 🎓 Научиться верстать сайты Вы умеете делать прототипы и собирать сайты в конструкторах, но хотите добавить больше функциональности в свои проекты. Подать заявку #реклама 16+ result.school О рекламодателе

📶 С 1 декабря для граждан РФ открыт доступ к платным материалам по программированию Вот отсортированные базы с тонной материала(книги, курсы, ресурсы и гайды). Выбирай своё направление:: 👩‍💻 Frontend 👩‍💻 PHP ⚙️ Backend 👩‍💻 Моб. Dev 📱 GitHub 👩‍💻 GameDev 🤓 Всё айти 👩‍💻 DevOps 👩‍💻 Python 🖥 Data Science 👩‍💻 Java 🐞 Тестирование 👩‍💻 C# 🤔 Хакинг & ИБ 👩‍💻 С/С++ 📱 Маркетинг 🖥 SQL 🖥 Дизайн 👩‍💻 Golang 👣 Rust Скачивать ничего не нужно — все выложили в Telegram с доступом по ссылке

Работа с ChangeDetectorRef в Angular Для чего используется ChangeDetectorRef в Angular? Если забыли, то вернитесь к посту от 18.11.2024. 👉 @sWebDev

Swup Swup – это библиотека для создания плавных переходов между страницами. Она позволяет загружать контент без перезагрузки страницы. Работает с заменой HTML-контента в рамках одной страницы. 👉 @sWebDev

Peas Интерактивная анимация гороха на matter.js. 👉 @sWebDev

Интерактивное руководство по рендерингу в React Это интерактивное руководство объясняет, как React рендерит и обновляет интерфейс: сначала создаёт UI, а затем обновляет только изменённые части при изменении состояния, демонстрируя процесс на примерах и диаграммах. 👉 @sWebDev

Parallax Grid Пример параллакс анимации для сетки на странице реализованный с помощью GSAP. 👉 @sWebDev

Прокачаем ваш frontend скилл с junior до middle Научим писать код, который не стыдно показать Первые 7 дней бесплатно. Попробуй! Узнать больше #реклама 16+ ykul.ru О рекламодателе

Minified.js Minified.js – это легковесная JavaScript-библиотека, которая предоставляет функциональность для манипуляции DOM, обработки событий, выполнения AJAX-запросов и создания анимаций. 👉 @sWebDev

Когда подключаете новую библиотеку, что делаете в первую очередь? 👍 - Читаю документацию. ❤️ - Пишу код, а там разберёмся. 👉 @sWebDev | #юмор

Cyberpunk DigiPurge Страница в стиле киберпанк на на Three.js. 👉 @sWebDev

Метод unstable_batchedUpdates в React unstable_batchedUpdates позволяет объединить несколько вызовов обновления состояния, чтобы минимизировать количество ререндеров компонентов. Обычно React автоматически выполняет "батчинг" обновлений состояния внутри событий, таких как клики или события ввода. Однако, если обновление происходит вне этих контекстов, например, внутри setTimeout или промиса, каждое изменение состояния вызывает отдельный ререндер. Пример применения:

import { unstable_batchedUpdates } from 'react-dom';

setTimeout(() => {
    unstable_batchedUpdates(() => {
        setState1(prev => prev + 1);
        setState2(prev => prev + 1);
    });
}, 1000);

Без использования unstable_batchedUpdates React вызвал бы два ререндера, один для каждого setState. С помощью метода обновления объединяются в один ререндер, улучшая производительность приложения. 👉 @sWebDev

Расизм в JavaScript. 👉 @sWebDev | #юмор

Работа с опцией { static: true } в декораторе ViewChild Что делает опция { static: true } в декораторе @ViewChild? Если забыли, то вернитесь к посту от 10.11.2024. 👉 @sWebDev

Focus-visible Focus-visible — полифилл для псевдокласса :focus-visible, показывающий стили фокуса только для пользователей с клавиатурой. Упрощает стилизацию и улучшает доступность интерфейсов, скрывая фокус при использовании мыши. 👉 @sWebDev

Glass Configurator Генератор стакана на Three.js. 👉 @sWebDev