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

Confetti.js

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

👉 @sWebDev

Skating bunny

Мини игра на Three.js.

👉 @sWebDev

Использование React Compiler на реальном проекте

Статья предлагает подробное исследование возможностей React Compiler и его потенциальных преимуществ для разработчиков. Автор делится личным опытом и полученными знаниями от использования компилятора, разбирая, как он улучшает эффективность разработки.

👉 @sWebDev

Gooey Menu Concept

«Жидкое» меню на GSAP.

👉 @sWebDev

Million Lint

Расширение VSCode для кода на React — Million Lint , которое автоматически исправляет «медленный» код.

👉 @sWebDev

Признавайтесь, ваши мысли перед сном?

👍 - Да.

🤔 - Что такое сон?

👉 @sWebDev | #юмор

Kodama Generator

Интерактивный генератор персонажа на Three.js.

👉 @sWebDev

Оптимизация рендеринга с React.PureComponent

React.PureComponent — это специальный тип компонента в React, который оптимизирует рендеринг за счет автоматического выполнения поверхностного сравнения пропсов и состояния.

В отличие от обычного React.Component, он реализует метод shouldComponentUpdate с поверхностным сравнением пропсов и состояния.

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

PureComponent.

class PureComp extends React.PureComponent {
  render() {
    console.log('PureComponent render');
    return <div>{this.props.value}</div>;
  }
}

Родительский компонент.

class ParentComponent extends React.Component {
  state = {
    value: 0
  };

  componentDidMount() {
    setInterval(() => {
      this.setState({ value: this.state.value + 1 });
    }, 1000);
  }

  render() {
    return (
      <div>
        <RegularComponent value={this.state.value} />
        <PureComp value={this.state.value} />
      </div>
    );
  }
}

👉 @sWebDev

Как начинающие программисты комментируют код.

👉 @sWebDev | #юмор

Использование createMutableSource в React

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

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

👉 @sWebDev

Restyle

Restyle — это библиотека CSS-in-JS, разработанная для работы с React 18 и новее. Она использует новые возможности React, такие как поднятие стилей и дедупликация, чтобы обеспечить высокую производительность и оптимизацию рендеринга. Благодаря совместимости с RSC , Restyle позволяет создавать приложения, которые быстро загружаются и эффективно работают как на стороне сервера, так и на стороне клиента.

👉 @sWebDev

Responsive CSS Powered Parallax w/ React && GSAP

Интерактивная параллакс анимация коалы с использованием React.js и GSAP.js.

👉 @sWebDev

6 карусельных компонентов для современных языков фронтенда

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

👉 @sWebDev

What's behind ?

Интерактивная анимация занавеса на Three.js.

👉 @sWebDev

Dynamo.js

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

👉 @sWebDev

Вы испытываете страх перед критикой?

🤔 — Скорее да, чем нет.

👍 — Спросите лучше тех, кого я критикую.

👉 @sWebDev | #юмор

Sticky Sections with lenis smoothscroll and gsap animation

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

👉 @sWebDev

Отложенная загрузка на уровне шаблонов в Angular

Deferrable Views (отложенные представления) - это API в Angular 17, позволяющая откладывать загрузку компонентов, директив и труб до момента их необходимости. Это значительно улучшает производительность, особенно в крупных приложениях.

Отложенные представления реализованы с помощью декоратора @defer. При обнаружении элемента, обернутого в @defer, Angular не загружает соответствующий код немедленно, а откладывает его до момента рендеринга элемента на странице. Такой подход экономит время и ресурсы, загружая код только при необходимости.

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

import { Component, @defer } from '@angular/core';

@Component({
  selector: 'app-lazy-component',
  templateUrl: './lazy-component.html',
  styleUrls: ['./lazy-component.css']
})
export class LazyComponent {
  // ...component code
}

В этом примере компонент LazyComponent будет загружен только при рендеринге на странице.

👉 @sWebDev

Надеемся, что вы не были в такой ситуации...

👉 @sWebDev | #юмор