Управление типами кортежей в TypeScript

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

👉 @sWebDev

Froot Looper: SVG

Анимация коробки на GSAP.

👉 @sWebDev

Peg.js

Peg.js — парсер-генератор на JavaScript, позволяющий создавать парсеры для специализированных языков и грамматик. Использует PEG (Parsing Expression Grammar) для описания правил синтаксического анализа.

👉 @sWebDev

Работа с декоратором Optional()

Что произойдет, если @Optional() зависимость не найдена?

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

👉 @sWebDev

Считаете ли свой интерфейс интуитивно понятным?

👍 — Да, 100%.

❤️ — Нет, могло быть и лучше.

👉 @sWebDev | #юмор

ChangeDetectorRef для ручного контроля изменений в компонентах

ChangeDetectorRef — инструмент в Angular, позволяющий управлять обнаружением изменений в компонентах вручную. Это особенно полезно, когда автоматическое обнаружение изменений (change detection) не может уловить изменения состояния, например, при работе с асинхронными операциями или сторонними библиотеками, которые Angular не отслеживает по умолчанию.

Методы markForCheck() и detectChanges() позволяют более гибко управлять процессом обновления компонента. Например, если нужно обновить представление при изменении данных, полученных через сторонний API, можно вызвать detectChanges() после обновления данных:

import { ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `<p>{{ data }}</p>`
})
export class ExampleComponent {
  data: string;

  constructor(private cdr: ChangeDetectorRef) {}

  updateData(newData: string) {
    this.data = newData;
    this.cdr.detectChanges();
  }
}

👉 @sWebDev

SVG line drawing animation

Анимация линий на Anime.js.

👉 @sWebDev

Ваши друзья тоже перестают понимать, когда вы объясняете что-то про код?

👍 — Нет, они в теме.

🤔 — Иногда теряются.

❤️ — Постоянно, даже не пытаются понять.

👉 @sWebDev | #юмор

Polly.js

Polly.js — библиотека JavaScript для записи и воспроизведения HTTP-запросов, созданная Netflix. Она позволяет тестировать приложение оффлайн, избегая избыточных запросов к серверу. Поддерживает популярные HTTP-библиотеки (Fetch, Axios, XHR) и гибкие настройки для управления запросами.

👉 @sWebDev

Punk Poker: SVG

Пример анимации на GSAP.

👉 @sWebDev

Через тернии к позиции Middle React разработчика

Статья которая поможет Junior-разработчикам перейти на уровень Middle. Узнайте, какие аспекты JavaScript и React важно освоить, почему стоит разобраться с Redux и Context API, и как тестирование и работа с Webpack и Docker повысят ваш профессионализм.

👉 @web_craft | #собес

Cubes - three.js & anime.js

Анимация спирали на Anime.js и Three.js.

👉 @sWebDev

SpriteJS

SpriteJS — библиотека для 2D-рендеринга, подходящая для создания анимаций и игр. Поддерживает Canvas и WebGL, работает с текстом, формами и слоями, делая управление графикой простым и эффективным.

👉 @sWebDev

Работа с декораторами HostListener

Для чего обычно используется декоратор @HostListener в Angular?

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

👉 @sWebDev

Насколько часто чужой код вызывает у вас недоумение?

👍 — Редко, всё интуитивно.

🤔 — Иногда встречаю странные решения.

❤️ — Регулярно, порой это сюрреализм.

👉 @sWebDev | #юмор

Метод ngAfterContentInit для управления контентом, переданным через ng-content

В Angular метод ngAfterContentInit является жизненным циклом компонента, который вызывается после инициализации контента, переданного через ng-content. Это позволяет выполнять операции над переданными дочерними элементами после того, как они станут частью DOM компонента.

Пример:

import { Component, ContentChild, AfterContentInit } from '@angular/core';
import { ElementRef } from '@angular/core';

@Component({
  selector: 'app-card',
  template: `<div class="card"><ng-content></ng-content></div>`
})
export class CardComponent implements AfterContentInit {
  @ContentChild('header') header!: ElementRef;

  ngAfterContentInit() {
    if (!this.header) {
      console.warn('Контент заголовка не передан!');
    } else {
      console.log('Заголовок загружен:', this.header.nativeElement.textContent);
    }
  }
}

Здесь CardComponent проверяет наличие элемента header и логгирует его содержание при успешной инициализации.

👉 @sWebDev

Tria

Абстрактная геометрическая анимация на Three.js.

👉 @sWebDev

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

👍 - Да, легче.

❤️ - Нет, не всегда, зависит от фронта.

👉 @sWebDev | #юмор

Ztext.js

Ztext.js — лёгкая библиотека для добавления 3D-эффектов и анимаций к текстам на веб-страницах. Работает без WebGL и позволяет создавать глубину и ротацию текста. Подходит для выделения заголовков и декоративного текста.

👉 @sWebDev