Назначение preinit()
Для чего используется метод
Забыли? Вернитесь к посту от09.06.2025 .
👉 @sWebDev
Для чего используется метод
ReactDOM.preinit()
?Забыли? Вернитесь к посту от
👉 @sWebDev
❤2
Для чего используется метод ReactDOM.preinit()?
Anonymous Quiz
3%
Для удаления загруженных ресурсов.
11%
Для асинхронного рендера DOM.
3%
Для добавления компонента в дерево.
83%
Для предварительной регистрации ресурса до рендера.
👍5❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Зачем вы тащите старую библиотеку в новый проект?
👍 – Потому что она проверена временем.
❤️ – Потому что в старой хотя бы всё понятно.
🤔 – Потому что в новой нет нужной фичи.
👉 @sWebDev | #юмор
👍 – Потому что она проверена временем.
❤️ – Потому что в старой хотя бы всё понятно.
🤔 – Потому что в новой нет нужной фичи.
👉 @sWebDev | #юмор
❤10👍4🤔3
Защита от утечек данных в RSC
В React Server Components для предотвращения случайной утечки чувствительных данных на клиент существуют экспериментальные функции
👉 @sWebDev
В 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
👍5❤1
Stretchy.js
Stretchy.js — JavaScript-библиотека для автоматического изменения размера полей ввода по мере набора текста. Позволяет создавать гибкие и адаптивные формы без жёстко заданных размеров. Подойдёт для полей с тегами, динамических анкет и интерфейсов с непредсказуемой длиной пользовательского ввода.
👉 @sWebDev
Stretchy.js — JavaScript-библиотека для автоматического изменения размера полей ввода по мере набора текста. Позволяет создавать гибкие и адаптивные формы без жёстко заданных размеров. Подойдёт для полей с тегами, динамических анкет и интерфейсов с непредсказуемой длиной пользовательского ввода.
👉 @sWebDev
❤2
Media is too big
VIEW IN TELEGRAM
Interactive Glass Lens Effect
Интерактивная анимация линзы с эффектом преломления на Three.js и GSAP.
👉 @sWebDev
Интерактивная анимация линзы с эффектом преломления на Three.js и GSAP.
👉 @sWebDev
❤2👍1
Как управлять фокусом в React с помощью flushSync
Установить фокус на элемент, который появляется после смены состояния - частая проблема в React. Из-за пакетной обработки обновлений DOM не успевает измениться вовремя. В статье разбирается, как использовать
👉 @sWebDev
Установить фокус на элемент, который появляется после смены состояния - частая проблема в React. Из-за пакетной обработки обновлений DOM не успевает измениться вовремя. В статье разбирается, как использовать
flushSync
для синхронного ререндера, который гарантирует наличие элемента в DOM. Подход позволяет надёжно управлять фокусом в модальных окнах и динамических формах без костылей вроде setTimeout
.👉 @sWebDev
❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Аnimated Music Player
Интерактивная анимация плеера с эффектом прокрутки на GSAP и Draggable.js.
👉 @sWebDev
Интерактивная анимация плеера с эффектом прокрутки на GSAP и Draggable.js.
👉 @sWebDev
❤2👍1
Sal.js
Sal.js — легковесная библиотека для создания анимаций появления элементов при прокрутке. Использует Intersection Observer для высокой производительности и работает без зависимостей. Подойдёт для лендингов, портфолио и сайтов, где требуется анимированное появление контента.
👉 @sWebDev
Sal.js — легковесная библиотека для создания анимаций появления элементов при прокрутке. Использует Intersection Observer для высокой производительности и работает без зависимостей. Подойдёт для лендингов, портфолио и сайтов, где требуется анимированное появление контента.
👉 @sWebDev
❤1👍1
Функция свойства injector
Зачем используется свойство
Забыли? Вернитесь к посту от16.06.2025 .
👉 @sWebDev
Зачем используется свойство
injector
у RouterOutlet
?Забыли? Вернитесь к посту от
👉 @sWebDev
❤2
Зачем используется свойство injector у RouterOutlet?
Anonymous Quiz
54%
Для доступа к провайдерам из текущего маршрута.
23%
Для проверки, активен ли маршрут.
13%
Для навигации в дочерние пути.
10%
Для получения query параметров.
❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Насколько сложным оказался для вас переход от HTML/CSS к JavaScript?
👍 – Настолько, что дальше я не продвинулся(ась).
❤️ – Было непросто, но справился(ась).
🤔 – JavaScript мне дался легко, не сложнее, чем HTML/CSS.
👉 @sWebDev | #юмор
👍 – Настолько, что дальше я не продвинулся(ась).
❤️ – Было непросто, но справился(ась).
🤔 – JavaScript мне дался легко, не сложнее, чем HTML/CSS.
👉 @sWebDev | #юмор
🤔10❤4👍3
Защита от потери данных при навигации
Функциональный гард
👉 @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
👍3❤1
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 июля.
Думаешь над своим пет-проектом, но не знаешь с чего начать? Грантовая программа от VK Mini Apps поможет с этим.
За три этапа вы проработаете концепт своего приложения, выведете его на многомиллионную аудиторию и можете получить средства на его продвижение.
Что предлагают:
— Финансирование до 1 млн ₽
— Поддержка, продвижение, консультации от команды VK
— Аудитория в 45 млн активных пользователей
Этапы:
1️⃣ Идея (прием заявок до 31.07) — 50 000
2️⃣ Релиз с монетизацией (до 5.10) — 150 000
3️⃣ Прокачка и рост (до 30.11) — до 800 000 + номинации
🛠 Направления: игровые сервисы, социальные сервисы и инструменты для авторов ВКонтакте.
Можно подаваться индивидуально или командой. Проекты должны быть новыми (зарегистрированы не ранее 2 июля 2025).
⏳ Подавай заявку до 31 июля.
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Как называется, когда ты следуешь инструкции, но совершенно не понимаешь ее смысла?
👍 — Это "главный признак джуна" — способность превратить решение на 5 минут в увлекательное трехдневное приключение.
❤️ — Называется «скопировал со Stack Overflow и надеюсь, что сработает».
👉 @sWebDev | #юмор
👍 — Это "главный признак джуна" — способность превратить решение на 5 минут в увлекательное трехдневное приключение.
❤️ — Называется «скопировал со Stack Overflow и надеюсь, что сработает».
👉 @sWebDev | #юмор
👍4❤1
Please open Telegram to view this post
VIEW IN TELEGRAM
Two.js
Two.js — JavaScript-библиотека для 2D-рисования, которая предоставляет единый API для рендеринга в SVG, Canvas и WebGL. Упрощает создание и управление векторными фигурами и сценами. Подойдёт для создания интерактивной инфографики, визуализаций данных и процедурной графики.
👉 @sWebDev
Two.js — JavaScript-библиотека для 2D-рисования, которая предоставляет единый API для рендеринга в SVG, Canvas и WebGL. Упрощает создание и управление векторными фигурами и сценами. Подойдёт для создания интерактивной инфографики, визуализаций данных и процедурной графики.
👉 @sWebDev
❤1