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

Коллективизация. 👉 @sWebDev | #юмор

Alarm Clock Трехмерная анимация будильника на Three.JS. 👉 @sWebDev

Оптимизация производительности в Angular ChangeDetectionStrategy.OnPush работает по принципу, что изменения в компоненте должны происходить только в следующих случаях: 1. Изменение входного свойства (@Input). 2. Событие внутри компонента (например, клик по кнопке). 3. Использование асинхронного пайпа для подписки на Observable или Promise. Для использования этой стратегии, в декораторе компонента нужно задать свойство changeDetection:

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

@Component({
  selector: 'app-user',
  template: `
    <div>
      <p>{{ user.name }}</p>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserComponent {
  @Input() user: { name: string };
}

В примере компонент UserComponent будет проверять изменения только тогда, когда свойство user изменяется. Это значит, что если родительский компонент обновляется, но свойство user остается неизменным, UserComponent не будет проходить процесс проверки изменений. 👉 @sWebDev

Жизненно? ❤️ - Да. 👍 - Нет. 👉 @sWebDev | #юмор

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

Rivets.js Rivets.js – это библиотека для привязки данных (data-binding) в JavaScript, которая позволяет легко связывать данные с HTML элементами. Она работает по принципу MVVM (Model-View-ViewModel) и обеспечивает двустороннюю привязку данных. 👉 @sWebDev

Knotwork Абстрактная интерактивная анимация на Three.js. 👉 @sWebDev

Глубокое погружение в формы в современном React Статья подробно рассматривает создание форм в современном React без использования сторонних библиотек. Автор описывает основные методы работы с формами, такие как использование POST запросов, управление состоянием формы, асинхронная обработка данных, и оптимистичное обновление интерфейса. 👉 @sWebDev

Frontend теперь в телеграм! Собрали крупные русскоязычные каналы, где вы найдете всю информацию о последних трендах и лучших практиках: Логово Верстальщика — научит верстать продающие сайты. Node.JS — поможет узнать все тонкости и секреты JavaScript и его фреймворков. Frontender's notes — советы и полезные приемы для каждого разработчика.

Fire shader Настраиваемая анимация камина на Three.js. 👉 @sWebDev

Gun.js Gun.js — это библиотека JavaScript, предназначенная для создания децентрализованных графовых баз данных, поддерживающих работу в реальном времени. Gun.js используется для разработки приложений, которые могут синхронизироваться между разными устройствами без необходимости наличия центрального сервера, что делает её полезной для создания P2P-приложений и оффлайн-функциональности. 👉 @sWebDev

Мы за бесплатное обучение Подборка каналов для роста и развития в сфере Frontend-разработки 👥 Reactify | Frontend Разработка — активное сообщество для бесплатного обучения веб-разработке. 💼 Frontend | Собеседования — огромная база актуальной теории для Frontend Разработчиков. Обучайтесь, общайтесь, растите вместе с нами. Станьте частью IT-сообщества!

Курам на смех. 👉 @sWebDev | #юмор

Джентельменский набор трушного фронтендера Опытные Frontend-разработчики собрали самые востребованные и бесплатные каналы, без которых не обойдется ни один настоящий фронтендер. Макеты для верстки — самый крупный канал с макетами для верстки. Первоисточник всех макетов в Telegram. Полезная вËрстка — канал с готовыми решениями повседневных задач: слайдеры, анимация, навигация и т.д. JavaScript заметки — образовательный канал с ежедневными практическими заметками по языку. codepen.js — готовые коды: реализованные на css и js анимации, скрипты и интерфейсы. Оживи статичные макеты Figma Start — каждый день выпускаем крутые макеты для верстки. Выбери самый интересный и удиви рекрутеров! Развивайся с нами, ведь так проще!

Random Three.js Генератор коробки на Three.js. 👉 @sWebDev

ТОП-4 Курса по Программированию ⚡Tutortop — маркетплейс курсов №1 по количеству школ-партнеров, курсов и реальных отзывов студентов. ✅Хотите стать программистом, но не знаете с какого языка начать? Помогаем разобраться в самых популярных и востребованных языках программирования. Подарок в конце подборки! Выбрать #реклама 16+ tutortop.ru О рекламодателе

Создание кастомных валидаторов с ValidatorFn ValidatorFn — это функция, которая принимает AbstractControl (например, FormControl) и возвращает null, если данные валидны, или объект с ошибкой, если нет. Пример кастомного валидатора, который проверяет, начинается ли значение с определенной буквы:

import { AbstractControl, ValidatorFn } from '@angular/forms';

export function startsWithLetterValidator(letter: string): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const startsWithLetter = control.value?.startsWith(letter);
    return startsWithLetter ? null : { startsWithLetter: { value: control.value } };
  };
}

Применение валидатора:

import { FormBuilder, Validators } from '@angular/forms';
import { startsWithLetterValidator } from './validators/starts-with-letter.validator';

this.form = this.fb.group({
  name: ['', [Validators.required, startsWithLetterValidator('A')]]
});

Валидатор проверяет, что значение поля name начинается с буквы "A". 👉 @sWebDev

Обучение на Frontend-разработчика. С нуля за 9 месяцев. На курсе вы получите все навыки, необходимые для старта в профессии Frontend-разработчика. Персональный наставник middle/senior уровня. 14 проектов, лайвкодинг, хакатоны, репетиции техсобеседования. Освоите JavaScript, React, TypeScript Официальный диплом и сертификат школы. Гарантия трудоустройства. Если вы не устроитесь, вернём деньги. Это закреплено в договоре п. 6.14. До 22 сентября скидка 30% на все курсы Result University Узнать больше #реклама 16+ result.school О рекламодателе

Доступное объяснение. 👉 @sWebDev | #юмор