CustomMarquee

Анимация бегущей строки на GSAP.

👉 @sWebDev

Glfx.js

Glfx.js — JavaScript-библиотека для применения визуальных эффектов к изображениям с использованием WebGL. Включает размытие, контраст, кривизну, пикселизацию и другие фильтры. Подойдёт для фоторедакторов, медиаплатформ и визуальных экспериментов.

👉 @sWebDev

Результат выборки

Что будет содержать QueryList, если использовать ContentChildren с read: TemplateRef?

Забыли? Вернитесь к посту от 02.06.2025.

👉 @sWebDev

Что бесит сильнее всего, когда ищешь работу?

👍 – Тишина после отклика.

❤️ – Бесконечная цепочка интервью.

🤔 – Ощущение, что на вакансию откликнулся весь твой город.

👉 @sWebDev | #юмор

Подписка на внешний стор с выборкой

Хук useSyncExternalStoreWithSelector() используется для подписки на внешний стор с избирательным обновлением компонента. Он расширяет useSyncExternalStore() за счёт функции выбора и сравнения: обновление вызывается только при изменении выбранного значения. Это снижает количество перерендеров при работе с глобальным состоянием.

import { useSyncExternalStoreWithSelector } from 'react';

function useCustomStore(selector, isEqual) {
  return useSyncExternalStoreWithSelector(
    subscribe, // подписка на стор
    getSnapshot, // получение полного состояния
    getSnapshot, // серверный snapshot
    selector, // выбор нужного значения
    isEqual // функция сравнения
  );
}

При вызове хука можно передать selector, чтобы отслеживать только часть состояния, и isEqual, чтобы предотвратить обновление при эквивалентных значениях. Может пригодиться при подписке на сложные сторы, например, Redux без лишних обёрток.

👉 @sWebDev

Twisted Torus

Анимация фигур на Three.js.

👉 @sWebDev

Как вы тестируете код, сгенерированный нейронкой?

👍 – Пускаю на прод — если выживет, значит норм.

❤️ – Смотрю в код и надеюсь на чудо.

🤔 – Проверка? А где кнопка “Deploy”?

👉 @sWebDev | #юмор

iNoBounce

iNoBounce — библиотека для отключения «резинового» скролла на мобильных устройствах iOS. Решает проблему неконтролируемой прокрутки за пределы контента.

👉 @sWebDev

GridClash

Игра три в ряд на Three.js.

👉 @sWebDev

Основы тестирования во Vue с использованием Vitest

В статье объясняется, как писать модульные тесты во Vue-проектах с использованием Vitest — современного и быстрого инструмента, совместимого с Vite. Разбираются базовые принципы, настройка окружения и примеры тестов для компонентов. Полезно тем, кто только осваивает тестирование во Vue и хочет понять, с чего начать.

👉 @sWebDev

Morphing Particle Sphere

Интерактивная морфинг анимация текста на Three.js и GSAP.

👉 @sWebDev

SimplyCountdown.js

SimplyCountdown.js — JavaScript-библиотека для создания простого таймера обратного отсчёта. Не требует зависимостей, настраивается через HTML-атрибуты или JavaScript-объекты. Подойдёт для лендингов, акций, мероприятий и виджетов с ограниченным временем.

👉 @sWebDev

Хотите освоить JavaScript и собрать свой проект за полтора месяца?

Присоединяйтесь к Интенсиву — проекту Т-Образования. Учитесь очно в Москве или онлайн из любого города России.

Что вас ждет:
— 4—5 занятий в день: теория и практика вместе, каждый день вы пишете код;
— программа от техлидов и разработчиков Т-Банка — никакой воды, только рабочие инструменты;
— упор на JavaScript для фронтенд- и бэкенд-разработки;
— ускоренный формат с полным погружением;
— выпускной проект, который можно положить в портфолио и показать на собеседовании;
— обучение летом без пересечений с вузом.

Программа делится на два этапа:
— с 14 июля по 3 августа — основа языка, практика каждый день;
— с 4 по 24 августа — углубленные темы, командная работа, защита проекта.

Финал — не просто сертификат: лучшие участники смогут пройти собеседование в команду Т-Банка.

Для тех, кто будет учиться очно, интенсив это еще и комьюнити: экскурсии по офису, квизы, настольные игры и общение с теми, кто тоже хочет расти в ИТ.

Кому подойдет: студентам 2—4 курсов, которые готовы поработать летом и вырасти до реальных задач. 

Регистрируйтесь уже сейчас

Назначение preinit()

Для чего используется метод ReactDOM.preinit()?

Забыли? Вернитесь к посту от 09.06.2025.

👉 @sWebDev

Зачем вы тащите старую библиотеку в новый проект?

👍 – Потому что она проверена временем.

❤️ – Потому что в старой хотя бы всё понятно.

🤔 – Потому что в новой нет нужной фичи.

👉 @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