Фронтендим

Нашел кейс, где компонент не обновляется при изменении данных. В чем проблема? // Кастомный хук для получения данных пользователя 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) { setUserData(data); } }; fetchData(); return () => { isMounted = false; }; }, []); return userData; } // Компо...

Push-уведомления давно стали неотъемлемой частью веб-приложений. С помощью Web Push API можно отправлять уведомления даже когда пользователь не находится на сайте. Для реализации push-уведомлений нам понадобится:// 1. Проверяем поддержку и запрашиваем разрешение if ('serviceWorker' in navigator && 'PushManager' in window) { // Регистрируем Service Worker navigator.serviceWorker.register('/sw.js') .then(registration => { console.log('Service Worker зарегистрирован'); // Запрашиваем разрешение на ...

Фронтендеры, всем привет. 👋 Итак, затянулся сентябрь, но посты на 1.10 уже отгружены, скоро снова начнем вам давать знания по фронтенду. У меня к вам 2 вопроса: 1. Какие бы вы хотели увидеть обновления в контенте на канале? Так как за более чем 6 месяцев мы испробовали разные варианты. 2. Кто из вас уровня мидл+ и сеньор, и интересно преподавание фронтендерам? Мои друзья сейчас в поиске спецов умеющих объяснять сложное простым языком, но для самых нулей. Пишите свои ответы на оба вопросы в пред...

В последнее время активно использую новые PWA API, которые существенно расширили возможности веб-приложений. Вот ключевые технологии, на которые стоит обратить внимание. Базовый манифест PWA с новыми опциями:{ "name": "MyApp", "short_name": "MA", "description": "Описание приложения", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#2196f3", "icons": [ { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icons/icon-512.png...

Недавно работал над проектом с визуализацией данных и хочу поделиться подходом к интеграции D3.js с React, который оказался наиболее эффективным. Ключевая идея: React отвечает за DOM, а D3 — за вычисления:import { useRef, useEffect, useState } from 'react'; import * as d3 from 'd3'; function BarChart({ data, width = 600, height = 400 }) { const svgRef = useRef(null); const [tooltip, setTooltip] = useState({ show: false, x: 0, y: 0, value: '' }); useEffect(() => { if (!data || !svgRef.current) re...

Давно использую CSS Grid, но недавно открыл для себя несколько продвинутых техник, которые очень упрощают создание сложных макетов. Вот мощная техника для адаптивной сетки без медиа-запросов:.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }Эта строчка автоматически создает столько колонок шириной не менее 250px, сколько поместится, и равномерно распределяет доступное пространство. Для более сложных макетов можно использовать именованные области и л...

Недавно использовал WebAssembly для оптимизации работы с изображениями в браузере. Это позволило ускорить обработку в 8-10 раз по сравнению с чистым JavaScript. Вот пример интеграции Wasm-модуля в React:import React, { useState, useEffect } from 'react'; function ImageProcessor() { const [wasmModule, setWasmModule] = useState(null); const [image, setImage] = useState(null); const [processedImage, setProcessedImage] = useState(null); // Загрузка Wasm-модуля useEffect(() => { async function loadWa...

В нескольких проектах пришлось серьезно оптимизировать под 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); } }).observe({ type: 'largest-contentful-paint', buffered: true }); Для оптимизации LCP: — Испол...

Недавно писал компонент для drag-and-drop и столкнулся с неочевидной ошибкой. Найдите проблему:import React, { useState, useRef } from 'react'; function DragDropList({ items: initialItems }) { const [items, setItems] = useState(initialItems); const dragItem = useRef(null); const dragOverItem = useRef(null); const handleDragStart = (e, index) => { dragItem.current = index; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', index.toString()); e.target.classList.add('draggi...

📝 Решение задачи: Основная ошибка в коде связана с инициализацией контекста:// Создаем контекст const ThemeContext = createContext();При создании контекста не указано значение по умолчанию. Из-за этого, если useTheme будет вызван вне провайдера, проверка if (!context) не сработает правильно, потому что context будет равен undefined, а не null. Исправление:// Создаем контекст с начальным значением null const ThemeContext = createContext(null); Либо можно предоставить полноценное начальное значен...