29 Sept 2025, 14:32 UTC423 views4 reactionsread 8 August 2026 Фронтендеры, всем привет. 👋
Итак, затянулся сентябрь, но посты на 1.10 уже отгружены, скоро снова начнем вам давать знания по фронтенду.
У меня к вам 2 вопроса:
1. Какие бы вы хотели увидеть обновления в контенте на канале? Так как за более чем 6 месяцев мы испробовали разные варианты.
2. Кто из вас уровня мидл+ и сеньор, и интересно преподавание фронтендерам? Мои друзья сейчас в поиске спецов умеющих объяснять с…
👍3❤1
Posted without readable text
Posted without readable text
2 May 2025, 14:00 UTC848 views3 reactionsread 8 August 2026 Нашел кейс, где компонент не обновляется при изменении данных. В чем проблема?
// Кастомный хук для получения данных пользователя
function useUserData(userId) {
const [userData, setUserData] = useState(null);
useEffect(() => {
let isMounted = true;
const fetchData = async () => {
const response = await fetch(`/api/users/${userId}`);
const data = await response.json();
if (isMounted) …
👍3
2 May 2025, 07:00 UTC520 views3 reactionsread 8 August 2026 Push-уведомления давно стали неотъемлемой частью веб-приложений. С помощью Web Push API можно отправлять уведомления даже когда пользователь не находится на сайте.
Для реализации push-уведомлений нам понадобится:// 1. Проверяем поддержку и запрашиваем разрешение
if ('serviceWorker' in navigator && 'PushManager' in window) {
// Регистрируем Service Worker
navigator.serviceWorker.register('/sw.js')
.then(regis…
👍3
30 Apr 2025, 14:00 UTC247 views5 reactionsread 8 August 2026 В последнее время активно использую новые PWA API, которые существенно расширили возможности веб-приложений. Вот ключевые технологии, на которые стоит обратить внимание.
Базовый манифест PWA с новыми опциями:{
"name": "MyApp",
"short_name": "MA",
"description": "Описание приложения",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2196f3",
"icons": [
{
…
👍5
30 Apr 2025, 07:00 UTC200 views4 reactionsread 8 August 2026 В нескольких проектах пришлось серьезно оптимизировать под Core Web Vitals. Делюсь наработками по улучшению ключевых метрик.
LCP (Largest Contentful Paint) — время загрузки крупнейшего контентного элемента:// Измерение LCP в коде
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log(`LCP: ${entry.startTime}ms`);
console.log(`LCP элемент:`, entry.element);
}
}).…
👍4
30 Apr 2025, 06:00 UTC162 views4 reactionsread 8 August 2026 Решение задачи:
Основная проблема в коде — неправильное использование setState с объектами. При использовании useState с объектами React не делает автоматический мерж объекта, как в классовых компонентах с this.setState().
Вот что происходит:// Здесь мы заменяем всё состояние объектом { selectedUser }
// А поля users и isLoading пропадают
setState({
selectedUser
});
Это приводит к тому, что после выбора пользоват…
👍4
29 Apr 2025, 14:00 UTC160 views4 reactionsread 8 August 2026 Недавно столкнулся с неочевидной проблемой в TypeScript. Найдите ошибку:interface User {
id: number;
name: string;
email: string;
}
interface UserState {
users: User[];
selectedUser: User | null;
isLoading: boolean;
}
function UserList() {
// Инициализация состояния
const [state, setState] = useState<UserState>({
users: [],
selectedUser: null,
isLoading: false
});
// Обработчик выбора…
👍4
29 Apr 2025, 07:10 UTC183 views5 reactionsread 8 August 2026 За последние годы перешел к более функциональному стилю кодирования и заметил, как это улучшило читаемость и надежность кода. Делюсь основными техниками.
Вот пример в функциональном стиле:// Чистые функции без побочных эффектов
const calculateTotal = (items) =>
items.reduce((sum, item) => sum + item.price * item.quantity, 0);
// Композиция функций
const compose = (...fns) => x =>
fns.reduceRight((acc, fn) => fn(…
👍5
28 Apr 2025, 07:00 UTC180 views3 reactionsread 8 August 2026 Последнее время работаю над оптимизацией загрузки изображений на сайтах. Два ключевых решения, которые реально улучшили и производительность, и визуал — это CSS-свойство aspect-ratio и HTML-атрибут srcset.
Вот базовая реализация адаптивного изображения:<picture>
<source
media="(max-width: 480px)"
srcset="image-small.jpg 480w, image-small-2x.jpg 960w"
sizes="100vw"
/>
<source
media="(max-width: …
👍3
28 Apr 2025, 06:00 UTC174 views2 reactionsread 8 August 2026 Решение задачи:
В коде есть две основные проблемы:
— Отсутствие обработчика onDragEnter или постоянного обновления dragOverItem:
— При быстром перетаскивании можно "проскочить" через элементы, и onDragOver не сработает для всех элементов, над которыми проходит курсор. — Это может привести к некорректному определению целевой позиции.
— Обработчик handleDrop привязан к элементам списка, но не к контейнеру:
— Если поль…
👍2
Showing the 12 most recent of 20 posts we hold for @frontendino. View and reaction counts are the latest single reading for each post, not a live figure, and a recent post is still accumulating both. A view count marked ≈ was rounded by Telegram before we ever saw it — t.me prints views in full below 1,000 and to three significant figures above, so ≈1,200,000 means somewhere between 1,150,000 and 1,249,999. Unmarked counts are exact. Text is reproduced from the public post preview and truncated for length.