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

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

👉 @sWebDev

Simple Mo.js animation

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

👉 @sWebDev

ConvNetJS

ConvNetJS — это JavaScript-библиотека для построения и обучения нейронных сетей непосредственно в браузере. Она поддерживает сверточные нейронные сети (CNN) и используется для создания моделей глубокого обучения, таких как распознавание изображений и обработка текстов.

👉 @sWebDev

Работа с функцией inject()

Какая альтернатива используется вместо inject() для инъекции зависимостей в Angular?

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

👉 @sWebDev

Оптимизация рендеринга списков в Angular

Директива *ngFor в Angular используется для отображения списков, но часто приводит к излишним перерисовкам элементов при изменении данных. Это происходит, если Angular не может правильно сопоставить элементы и считает, что нужно перерисовать весь список. Метод trackBy помогает Angular отслеживать изменения и определять, какие элементы нужно обновить.

Пример:

@Component({
  selector: 'app-optimized-list',
  template: `
    <ul>
      <li *ngFor="let item of items; trackBy: trackByFn">{{ item.name }}</li>
    </ul>
  `,
})
export class OptimizedListComponent {
  items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
  ];

  trackByFn(index: number, item: any): number {
    return item.id; // Уникальный идентификатор
  }
}

В этом примере Angular будет использовать id как ключ, предотвращая перерисовку элементов при изменении содержимого.

👉 @sWebDev

Philosophy any form of art

Генератор абстракций на Three.js.

👉 @sWebDev

А как часто вы видите подобные комментарии в коде?

👍 — Часто.

❤️ — Такие комментарии после меня.

👉 @sWebDev | #юмор

Filesize.js

Filesize.js — библиотека для форматирования размера файлов в удобочитаемый вид, например, "1.2 MB" или "150 KB". Она поддерживает различные системы единиц измерения и может округлять значения до нужного количества знаков после запятой. Используется в интерфейсах для отображения информации о размере загружаемых и скачиваемых файлов.

👉 @sWebDev

GSAP GRID

Интерактивная сетка с анимациями на GSAP.

👉 @sWebDev

Представляем @svg-use

В статье рассказывается о создании и использовании библиотеки @svg-use для работы с SVG-иконками в JavaScript-приложениях, таких как React. Основное внимание уделено оптимизации загрузки SVG-файлов с помощью <use href>, а не через инлайновые SVG, что снижает нагрузку на JS-бандлы и DOM. Также рассматриваются плюсы и минусы использования этой техники и перспективы для будущих стандартов веб-разработки.

👉 @sWebDev