Frontender Libs - обзор библиотек JS / CSS
8.56K subscribers
1.98K photos
719 videos
1 file
231 links
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Менеджер по рекламе: @Spiral_Yuri

Купить рекламу: https://telega.in/c/sWebDev
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
📢 VK Dev Grants: программа для разработчиков под VK Mini Apps.

Думаешь над своим пет-проектом, но не знаешь с чего начать? Грантовая программа от VK Mini Apps поможет с этим.

За три этапа вы проработаете концепт своего приложения, выведете его на многомиллионную аудиторию и можете получить средства на его продвижение.

Что предлагают:
— Финансирование до 1 млн ₽
— Поддержка, продвижение, консультации от команды VK
— Аудитория в 45 млн активных пользователей

Этапы:
1️⃣ Идея (прием заявок до 31.07) — 50 000
2️⃣ Релиз с монетизацией (до 5.10) — 150 000
3️⃣ Прокачка и рост (до 30.11) — до 800 000 + номинации

🛠 Направления: игровые сервисы, социальные сервисы и инструменты для авторов ВКонтакте.

Можно подаваться индивидуально или командой. Проекты должны быть новыми (зарегистрированы не ранее 2 июля 2025).

Подавай заявку до 31 июля.
2
This media is not supported in your browser
VIEW IN TELEGRAM
Как называется, когда ты следуешь инструкции, но совершенно не понимаешь ее смысла?

👍 — Это "главный признак джуна" — способность превратить решение на 5 минут в увлекательное трехдневное приключение.

❤️ — Называется «скопировал со Stack Overflow и надеюсь, что сработает».

👉 @sWebDev | #юмор
👍61
Two.js

Two.js — JavaScript-библиотека для 2D-рисования, которая предоставляет единый API для рендеринга в SVG, Canvas и WebGL. Упрощает создание и управление векторными фигурами и сценами. Подойдёт для создания интерактивной инфографики, визуализаций данных и процедурной графики.

👉 @sWebDev
2
Media is too big
VIEW IN TELEGRAM
Шаровая молния

Настраиваемая интерактивная анимация шаровой молнии на Three.js.

👉 @sWebDev
👍3
Почему Error Boundaries в React — это не просто try...catch

Многие разработчики считают Error Boundaries аналогом try...catch, но это заблуждение приводит к ошибкам в обработке сбоев. В статье разбирается, почему эти механизмы принципиально разные и в каких случаях стандартный try...catch бессилен.

👉 @sWebDev
👍2
Media is too big
VIEW IN TELEGRAM
Ripple effect

Интерактивный эффект ряби на воде на Three.js.

👉 @sWebDev
👍41
Lingui.js

Lingui.js — библиотека для интернационализации (i18n) JavaScript-приложений. Использует стандарт ICU MessageFormat для работы со сложными правилами множественного числа и родов. Включает инструменты для извлечения сообщений из кода. Подойдёт для проектов, где требуется гибкая система локализации.

👉 @sWebDev
2
Функция хука

Что делает useSyncExternalStoreWithSelector()?

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

👉 @sWebDev
1
На самом деле, это не баг, а state-of-the-art UX. Система предугадывает код и показывает его вам заранее.

👍 — Несомненно.

❤️ — Скоро и пароль так же будут показывать, чтобы не забыл.

👉 @sWebDev | #юмор
9
Синхронизация состояния компонента с URL

Кастомный хук useQueryState инкапсулирует логику синхронизации состояния с URL-параметрами. Данный подход объединяет useState и useSearchParams, очищая код компонента и беря начальное значение из URL.

Для обновления применяется useLayoutEffect, гарантируя изменение адресной строки до отрисовки браузером и исключая визуальную рассинхронизацию.

import { useState, useLayoutEffect } from 'react';
import { useSearchParams } from 'react-router-dom';

function useQueryState(queryKey, initialValue) {
const [searchParams, setSearchParams] = useSearchParams();

const [value, setValue] = useState(
searchParams.get(queryKey) ?? initialValue
);

useLayoutEffect(() => {
const newParams = new URLSearchParams(searchParams);
newParams.set(queryKey, value);
setSearchParams(newParams);
}, [value, queryKey, searchParams, setSearchParams]);

return [value, setValue];
}


👉 @sWebDev
👍3
Media is too big
VIEW IN TELEGRAM
Interactive Particles Hero

Фоновая интерактивная анимация на Three.js.

👉 @sWebDev
👍3
Профдеформация?

👍 — Да, при удаленной работе стираются границы между профессиональной и личной коммуникацией.

❤️ — Следующий этап - отправит ей в личку ссылку на Google Calendar, чтобы «засинкаться».

👉 @sWebDev | #юмор
5👎2
Dockview

Dockview — JavaScript-библиотека для создания сложных панельных интерфейсов, как в современных IDE. Поддерживает перемещаемые, стыкуемые и изменяемые по размеру панели. Подходит для разработки веб-приложений, где требуется гибкая и настраиваемая рабочая область.

👉 @sWebDev
2
Media is too big
VIEW IN TELEGRAM
Glow effect to LineBasicMaterial without bloom

Эффект свечения для линий без Bloom-фильтра в Three.js.

👉 @sWebDev
3👍1
Оптимизация TypeScript-типов в больших проектах

В крупных проектах проверка типов в TypeScript может стать серьёзным узким местом, замедляя сборку и работу IDE. Статья разбирает неочевидные проблемы производительности, связанные со сложными типами, и предлагает конкретные подходы к их оптимизации. Полезно для тех, кто работает с большими кодовыми базами и ищет способы ускорить работу с TypeScript.

👉 @web_craft | #frontend
2👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Glitchy GSAP animated checkboxes

Анимированные чекбоксы на GSAP.

👉 @sWebDev
👍3
Probot

Probot — фреймворк для создания GitHub-приложений на JavaScript. Предназначен для автоматизации рабочих процессов и задач в репозиториях, например, для комментирования pull-реквестов или проверки стиля кода. Подходит для команд и разработчиков, стремящихся упростить управление репозиториями и рутинные операции.

👉 @sWebDev
2
Механизм защиты данных в RSC

Какую проблему решают функции
taintObjectReference и taintUniqueValue?

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

👉 @sWebDev
2