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

Прокачаем ваш frontend скилл с junior до middle Научим писать код, который не стыдно показать Первые 7 дней бесплатно. Попробуй! Узнать больше #реклама 16+ ykul.ru О рекламодателе

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

Когда подключаете новую библиотеку, что делаете в первую очередь? 👍 - Читаю документацию. ❤️ - Пишу код, а там разберёмся. 👉 @sWebDev | #юмор

Cyberpunk DigiPurge Страница в стиле киберпанк на на Three.js. 👉 @sWebDev

Метод unstable_batchedUpdates в React unstable_batchedUpdates позволяет объединить несколько вызовов обновления состояния, чтобы минимизировать количество ререндеров компонентов. Обычно React автоматически выполняет "батчинг" обновлений состояния внутри событий, таких как клики или события ввода. Однако, если обновление происходит вне этих контекстов, например, внутри setTimeout или промиса, каждое изменение состояния вызывает отдельный ререндер. Пример применения:

import { unstable_batchedUpdates } from 'react-dom';

setTimeout(() => {
    unstable_batchedUpdates(() => {
        setState1(prev => prev + 1);
        setState2(prev => prev + 1);
    });
}, 1000);

Без использования unstable_batchedUpdates React вызвал бы два ререндера, один для каждого setState. С помощью метода обновления объединяются в один ререндер, улучшая производительность приложения. 👉 @sWebDev

Расизм в JavaScript. 👉 @sWebDev | #юмор

Работа с опцией { static: true } в декораторе ViewChild Что делает опция { static: true } в декораторе @ViewChild? Если забыли, то вернитесь к посту от 10.11.2024. 👉 @sWebDev

Focus-visible Focus-visible — полифилл для псевдокласса :focus-visible, показывающий стили фокуса только для пользователей с клавиатурой. Упрощает стилизацию и улучшает доступность интерфейсов, скрывая фокус при использовании мыши. 👉 @sWebDev

Glass Configurator Генератор стакана на Three.js. 👉 @sWebDev

Почему компонентная композиция — это отличная идея Статья рассматривает преимущества подхода компонентной композиции в разработке React-приложений. Автор объясняет, как использование композиции позволяет создавать гибкие и переиспользуемые компоненты, которые проще настраивать и комбинировать. 👉 @sWebDev

Cat vs ball of wool Анимация кота на Three.js. 👉 @sWebDev

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

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

Курс «Разработчик 1С» от Яндекса. За 6 месяцев освоите один из самых простых языков программирования и пройдёте стажировку Зарегистрироваться #реклама 16+ practicum.yandex.ru О рекламодателе

Как думаете, баги на фронте легче исправлять? 👍 - Да, легче. ❤️ - Нет, не всегда, зависит от фронта. 👉 @sWebDev | #юмор

Tria Абстрактная геометрическая анимация на Three.js. 👉 @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

Насколько часто чужой код вызывает у вас недоумение? 👍 — Редко, всё интуитивно. 🤔 — Иногда встречаю странные решения. ❤️ — Регулярно, порой это сюрреализм. 👉 @sWebDev | #юмор