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

Прямой доступ к DOM-элементам Метод findDOMNode() в React предоставляет прямой доступ к реальному DOM-узлу компонента. Обычно его применяют в старых компонентах или библиотеках, где нет возможности использовать рефы. Несмотря на удобство, findDOMNode() считается устаревшим из-за ограничений и потенциальных конфликтов с React Strict Mode. Этот метод нельзя использовать в функциональных компонентах и компонентах, созданных с помощью React.forwardRef(). Команда React рекомендует вместо него использовать React.createRef() или хук useRef(), так как они безопаснее и более совместимы с современным подходом React. Пример:

import React from 'react';
import { findDOMNode } from 'react-dom';

class LegacyComponent extends React.Component {
  componentDidMount() {
    const node = findDOMNode(this);
    node.style.color = 'blue';
  }

  render() {
    return <div>Прямой доступ к DOM!</div>;
  }
}

👉 @sWebDev

Считаете ли вы эффективной такую систему оценки кандидатов? 👍 — Нет, она часто не отражает реальных способностей. ❤️ — В целом, да, позволяет отсеять неподходящих. 🤔 — Возможно, нужны какие-то дополнения. 👉 @sWebDev | #юмор

Пакетное обновление и flushSync() Как изменяется поведение пакетного обновления при использовании flushSync()? Забыли? Вернитесь к посту от 24.03.2025. 👉 @sWebDev

Alpaca Forms Alpaca Forms - это JavaScript библиотека для генерации веб-форм. Он позволяет создавать формы динамически, используя JSON-схемы. Поддерживает различные типы полей, правила валидации и темы оформления. 👉 @sWebDev

Бесплатное льготное обучение: 3 месяца Ищем людей, которые хотят обучиться и работать в IT-сфере из дома В конце обучения вы пройдете стажировку и устроитесь на работу с зп от 150.000 рублей Образование, место жительства, трудовой стаж — не важны! Для старта нужно: — пройти короткий тест — заполнить анкету На что можно рассчитывать, после обучения: ✅ удаленная работа ✅ зп от 150.000 рублей (потолка нет) ✅ стабильная подработка, если не хотите уходить с основной работы ⚡ Осталось всего 47 бесплатных мест. Успейте пройти тест и оставить заявку: Узнать больше #реклама 16+ technolium.ru О рекламодателе

Threejs Explorations Настраиваемая анимация, сочетающая морфинг и триггер на прокрутку, реализована на базе Three.js для 3D-рендеринга и GSAP для покадровой анимации. 👉 @sWebDev

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

Realistic Milky Water Настраиваемый эффект ряби на воде, реализованный с помощью Three.js. 👉 @sWebDev

UserGate Open Conf 17 / 04 / 2025 ⚡ ИТ-конференция про защиту в открытую. Здесь мы создаем площадку для открытого диалога между заказчиками, партнерами, экспертами и специалистами в сфере продуктов, технологий и услуг информационной безопасности. 🎓 Подготовили для вас: - Аналитические данные исследования рынка информационной безопасности; - Обзор новых видов и эволюции киберугроз с разбором кейсов по борьбе с ними; - Планы внедрения новых фич и обновлений продуктов экосистемы UserGate; - 30+ продуктовых, партнерских и клиентских докладов; - Нетворкинг, продуктовые демо, обмен опытом и консультации экспертов ИБ; - Ответы на любые вопросы и сбор обратной связи о работе продуктов и устройств UserGate. Зарегистрироваться #реклама openconf.usergate.com О рекламодателе

Iro.js Iro.js - это JavaScript библиотека, предоставляющая виджеты для выбора цвета. Она предлагает настраиваемые интерфейсы для выбора цвета, которые легко интегрируются в веб-приложения. 👉 @sWebDev

Вы тоже чувствуете себя так во время каждого релиза? 👍 — Да, бесконечный цикл. ❤️ — А когда-нибудь баги закончатся? 👉 @sWebDev | #юмор

Mouse Swirl Effect Эффект анимации курсора мыши с использованием Three.js. 👉 @sWebDev

Динамическое управление представлениями EmbeddedViewRef - это ссылка на конкретный экземпляр представления, созданный из TemplateRef. В отличие от ComponentRef, он относится к шаблону (<ng-template>), что позволяет динамически отображать пользовательский интерфейс.

import { Component, ViewChild, ViewContainerRef, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <ng-template #t><div>Шаблон</div></ng-template>
    <div #c></div>
    <button (click)="create()">Создать</button>
  `,
})
export class ExampleComponent {
  @ViewChild('t', { read: TemplateRef }) tRef!: TemplateRef<any>;
  @ViewChild('c', { read: ViewContainerRef }) cRef!: ViewContainerRef;

  create() {
    this.cRef.createEmbeddedView(this.tRef);
  }
}

Пример: @ViewChild получает TemplateRef (tRef) и ViewContainerRef (cRef). createEmbeddedView создает и вставляет шаблон. 👉 @sWebDev

Как вам такой замкнутый круг? 👍 – Нормально, а что тут такого? ❤️ – Отключаю AdBlock, если сайт мне реально полезен. 👉 @sWebDev | #юмор

Работа с preloadAllModules Что делает preloadAllModules в Angular? Забыли? Вернитесь к посту от 17.03.2025. 👉 @sWebDev

Litegraph.js Litegraph.js — это движок для создания визуального программирования прямо в браузере. Позволяет строить графовые структуры с узлами, соединять их и динамически изменять логику без единой строчки кода. Отлично подходит для AI, анимаций и интерактивных интерфейсов. 👉 @sWebDev

Interactive 3D Web Hero Section Интерактивная анимация фона на Three.js. 👉 @sWebDev

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