Когда подключаете новую библиотеку, что делаете в первую очередь?

👍 - Читаю документацию.

❤️ - Пишу код, а там разберёмся.

👉 @sWebDev | #юмор

Minified.js

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

👉 @sWebDev

Parallax Grid

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

👉 @sWebDev

Интерактивное руководство по рендерингу в React

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

👉 @sWebDev

Peas

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

👉 @sWebDev

Swup

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

👉 @sWebDev

Работа с ChangeDetectorRef в Angular

Для чего используется ChangeDetectorRef в Angular?

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

👉 @sWebDev

А как вы думали это работает?

👉 @sWebDev | #юмор

Управление анимациями с помощью 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

Вы сталкивались с таким подходом от бэкенд-разработчиков?

👍 - Да, это боль.

🤔 - Мы уже договорились использовать CSS.

❤️ - Я сам так делаю.

👉 @sWebDev | #юмор

FileSaver.js

FileSaver.js — это библиотека для сохранения файлов непосредственно из браузера. Она работает с Blob-объектами и обеспечивает простой способ загрузки данных на стороне клиента без серверной обработки.

👉 @sWebDev

See

Анимация буквы "C" на GSAP.

👉 @sWebDev

Управление компонентом React через URL

Статья объясняет, как синхронизировать состояние React-компонента с параметрами URL. Рассматриваются методы работы с window.location и библиотекой React Router, чтобы изменять состояние компонента на основе текущего URL и сохранять параметры при обновлении страницы. Приведены примеры реализации с кодом.

👉 @sWebDev

Diorama - Milk

Анимация диорамы на Three,js,

👉 @sWebDev

Choices.js

Choices.js — это легковесная библиотека для работы с пользовательскими элементами ввода, такими как выпадающие списки, многострочные выборы (multi-select), и текстовые поля с тегами. Она позволяет быстро создавать и стилизовать интерактивные элементы форм.

👉 @sWebDev

Работа с методом ngAfterContentInit

Когда вызывается метод ngAfterContentInit в Angular?

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

👉 @sWebDev

Кем быть сложнее: фулстеком или девопсом?

👍 - Фулстеком: больше задач.

❤️ - Девопсом: никто не понимает, что ты делаешь.

👉 @sWebDev | #юмор