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

Borger 3D Интерактивный конструктор бургера на Three.js. 👉 @sWebDev

Защита от потери данных при навигации Функциональный гард CanDeactivateFn в Angular предотвращает уход с маршрута для защиты от потери несохраненных данных. Гард — это функция, которая получает экземпляр компонента для проверки его состояния и возвращает true или false, разрешая или блокируя навигацию.

import { CanDeactivateFn } from '@angular/router';

// Интерфейс, который должен реализовать компонент
export interface HasUnsavedChanges {
  hasUnsavedChanges(): boolean;
}

// Функциональный гард, который проверяет наличие
// несохраненных изменений в компоненте.
export const unsavedChangesGuard: CanDeactivateFn<HasUnsavedChanges> = (
  component
) => {
  // Если есть несохраненные изменения, запрашиваем подтверждение
  if (component.hasUnsavedChanges()) {
    return confirm(
      'У вас есть несохраненные изменения. Вы уверены, что хотите покинуть страницу?'
    );
  }
  // Если изменений нет, разрешаем навигацию
  return true;
};

👉 @sWebDev

Старт продаж премиальных апартаментов Skysoul в Крыму Премиальный комплекс в 30 метрах от собственного пляжа ✅ Комплекс — 4-х кратный победитель премии в сфере недвижимости URBAN AWORDS как самый привлекательный инвестиционный проект ЮФО 🏠 Комплекс можно: - Сдавать посуточно через отельера международного класса и получать пассивный ежемесячный доход (при этом отдыхая в отпуске в собственном номере) - Выгодно перепродать ⚡ О проекте: - Первая береговая линия – всего в 30 метрах расположен собственный пляж - На территории открытый и 2 круглогодичных бассейна - Более 14,5 га впечатляющей территории: 4-этажный SPA-комплекс, амфитеатр, панорамный ресторан, медцентр, игровое пространство для детей, магазины и бутик ⚡Роскошные панорамные виды на потухший вулкан, море и виноградники ✅Получите цены и презентацию первыми: Перейти на сайт Проектная декларация на сайте https://наш.дом.рф/ #реклама mrqz.me О рекламодателе

Насколько сложным оказался для вас переход от HTML/CSS к JavaScript? 👍 – Настолько, что дальше я не продвинулся(ась). ❤️ – Было непросто, но справился(ась). 🤔 – JavaScript мне дался легко, не сложнее, чем HTML/CSS. 👉 @sWebDev | #юмор

Функция свойства injector Зачем используется свойство injector у RouterOutlet? Забыли? Вернитесь к посту от 16.06.2025. 👉 @sWebDev

Sal.js Sal.js — легковесная библиотека для создания анимаций появления элементов при прокрутке. Использует Intersection Observer для высокой производительности и работает без зависимостей. Подойдёт для лендингов, портфолио и сайтов, где требуется анимированное появление контента. 👉 @sWebDev

Аnimated Music Player Интерактивная анимация плеера с эффектом прокрутки на GSAP и Draggable.js. 👉 @sWebDev

Как управлять фокусом в React с помощью flushSync Установить фокус на элемент, который появляется после смены состояния - частая проблема в React. Из-за пакетной обработки обновлений DOM не успевает измениться вовремя. В статье разбирается, как использовать flushSync для синхронного ререндера, который гарантирует наличие элемента в DOM. Подход позволяет надёжно управлять фокусом в модальных окнах и динамических формах без костылей вроде setTimeout. 👉 @sWebDev

Interactive Glass Lens Effect Интерактивная анимация линзы с эффектом преломления на Three.js и GSAP. 👉 @sWebDev

Гайд для маркетологов по эффективным онлайн-встречам Как CMO, PR и digital-маркетологам повысить результативность брейнштормов, совещаний и планерок с командой с помощью онлайн-встреч? Гайд МТС Линк: 37 страниц полезных материалов, чек-листов и кейсов для эффективных видеовстреч и совещаний. ✅ В гайде: - Как создать постоянную ссылку на регулярные встречи с подрядчиками, командой или агентствами и подключаться в 2 клика; - Как управлять встречей и завершить ее четкими договоренностями с ИИ-расшифровкой голоса в текст; - Как проводить кастдевы, брейнштормы и формулировать гипотезы с помощью 15+ шаблонов в онлайн-досках МТС Линк; - Как разом пригласить всех участников на синк таким образом, чтобы все пришли. Бонус внутри: 5 способов не выгореть от бесконечных синков. ✨ Скачайте гайд бесплатно по ссылке Скачать #реклама 16+ mts-link.ru О рекламодателе

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

Люди, которые пользуются светлой темой: 👍 – Эти люди я. ❤️ – Отрабатывают карму за прошлые жизни. 👉 @sWebDev | #юмор

Заяц под дождем Анимированная сцена с дождем на Three.js и Ammo.js. 👉 @sWebDev

Защита от утечек данных в RSC В React Server Components для предотвращения случайной утечки чувствительных данных на клиент существуют экспериментальные функции taintObjectReference и taintUniqueValue. taintObjectReference помечает весь объект как небезопасный для клиента, а taintUniqueValue — только конкретное значение в нём. При попытке передать такие "помеченные" данные в пропсы клиентского компонента React выбросит ошибку, блокируя утечку.

// server-component.js
import { taintUniqueValue } from 'react';
import { ClientComponent } from './client-component';

async function getData() {
  const data = {
    publicInfo: 'Some data',
    apiKey: 'SECRET-KEY-123'
  };

  taintUniqueValue(
    'Ключ API не должен попасть на клиент.',
    data,
    data.apiKey
  );
  return data;
}

export default async function Page() {
  const pageData = await getData();
  
  // Эта передача вызовет ошибку
  return <ClientComponent data={pageData} />;
}

👉 @sWebDev

Онлайн-магистратура с IT специальностями от Яндекса Совместно с ИТМО, МИФИ, МФТИ. Онлайн-магистратура с актуальными программами и гибким графиком обучения. Получите высокооплачиваемую IT профессию, официальный диплом и практические знания. Господдержка оплаты. Совмещение с работой! Подать заявку #реклама 16+ practicum.yandex.ru О рекламодателе

Зачем вы тащите старую библиотеку в новый проект? 👍 – Потому что она проверена временем. ❤️ – Потому что в старой хотя бы всё понятно. 🤔 – Потому что в новой нет нужной фичи. 👉 @sWebDev | #юмор

Назначение preinit() Для чего используется метод ReactDOM.preinit()? Забыли? Вернитесь к посту от 09.06.2025. 👉 @sWebDev

Хотите освоить JavaScript и собрать свой проект за полтора месяца? Присоединяйтесь к Интенсиву — проекту Т-Образования. Учитесь очно в Москве или онлайн из любого города России. Что вас ждет: — 4—5 занятий в день: теория и практика вместе, каждый день вы пишете код; — программа от техлидов и разработчиков Т-Банка — никакой воды, только рабочие инструменты; — упор на JavaScript для фронтенд- и бэкенд-разработки; — ускоренный формат с полным погружением; — выпускной проект, который можно положить в портфолио и показать на собеседовании; — обучение летом без пересечений с вузом. Программа делится на два этапа: — с 14 июля по 3 августа — основа языка, практика каждый день; — с 4 по 24 августа — углубленные темы, командная работа, защита проекта. Финал — не просто сертификат: лучшие участники смогут пройти собеседование в команду Т-Банка. Для тех, кто будет учиться очно, интенсив это еще и комьюнити: экскурсии по офису, квизы, настольные игры и общение с теми, кто тоже хочет расти в ИТ. Кому подойдет: студентам 2—4 курсов, которые готовы поработать летом и вырасти до реальных задач.  Регистрируйтесь уже сейчас