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

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

Another Metaballs Анимация шаров на странице реализованная с Three.js и GSAP. 👉 @sWebDev

26–27 апреля проводим Weekend Offer Frontend Устроиться в Яндекс за выходные — реально. Ищем крутых фронтендеров с опытом работы от 4 лет, готовых работать в офисном или гибридном режиме в России. Подавайте заявку до 23 апреля — и всего за два дня пройдите все технические собеседования. После сможете пообщаться с нанимающими менеджерами и выбрать из 10 команд ту, которая покажется самой интересной. Если всё сложится хорошо, сразу же пришлём вам офер. Узнать подробности и зарегистрироваться.

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

Крупнейший университет искусственного интеллекта Временные ряды — это данные, упорядоченные во времени, например, трафик на дорогах, изменения температуры или спрос на товары. С помощью AI можно предсказывать тренды, выявлять аномалии и оптимизировать процессы. Получите полный доступ к курсу по временным рядам на сайте. Это абсолютно бесплатно. ✨ 8 000+ студентов со всего мира ✨ 600+ AI-проектов, созданных студентами ✨ Сборная Университета — победители крупнейших AI-хакатонов России ✨ Стажировки в крупнейших компаниях России (РЖД, Ростелеком, РУДН, Совкомбанк, Самолет и другие) ✨ Трудоустраиваем выпускников в крупнейшие компании (Яндекс, ВТБ, Сбербанк, Роскосмос и другие) Будем рады видеть тебя среди наших студентов! Узнать больше #реклама 16+ neural-university.ru О рекламодателе

AI скоро сможет создавать сложные кодовые базы с нуля. Это повод волноваться? 👍 – Да, звучит серьезно! ❤️ – С нуля все могут, ты попробуй разобраться в том, что уже есть! 👉 @sWebDev | #юмор

Metaballs Настраиваемая анимация шаров на Three.js и GSAP. 👉 @sWebDev

Принудительный ререндер в React В React метод flushSync() немедленно обновляет состояние и ререндерит компонент, обходя пакетирование. Это полезно, когда нужно сразу отобразить изменения перед выполнением других операций, например, измерения размеров DOM-элемента. Обычно React группирует обновления в батчи, но иногда требуется мгновенный ререндер.

import { useState, useRef } from "react";
import { flushSync } from "react-dom";

function Example() {
  const [text, setText] = useState("Исходное значение");
  const spanRef = useRef(null);

  function handleClick() {
    flushSync(() => {
      setText("Обновлённое значение");
    });
    console.log("Ширина:", spanRef.current.offsetWidth);
  }

  return (
    <div>
      <button onClick={handleClick}>Изменить</button>
      <span ref={spanRef}>{text}</span>
    </div>
  );
}

flushSync() гарантирует, что offsetWidth обновится сразу после изменения текста. 👉 @sWebDev

Есть ли способ точнее объяснить, как работает HTML? 👍 – Это идеальная визуализация. ❤️ – Даже документация так чётко не объясняет. 🤔 – Добавьте ещё пару div-ов для надёжности. 👉 @sWebDev | #юмор

Дарим подписку на Яндекс Музыку Ответьте на 1 вопрос и Яндекс Музыка ваша для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже в подписке. Попробуйте бесплатно❤️ Попробовать #реклама 18+ music.yandex.ru О рекламодателе Реклама на Яндексе