Frontender Libs - обзор библиотек JS / CSS

Оптимизация событий с помощью debounce Иногда функция вызывается слишком часто — например, при вводе в поисковую строку или скролле страницы. Это перегружает приложение. useDebounce в React помогает запускать действие только после того, как пользователь перестал что-то делать. import { useEffect, useState } from "react"; function useDebounce<T>(value: T, delay: number) { const [debounced, setDebounced] = useState(value); useEffect(() => { const id = setTimeout(() => setDebounced(value), delay); ...

👉 @sWebDev | #книги

JavaScript. Рецепты для разработчиков Книга «JavaScript. Рецепты для разработчиков» Шелли Пауэрс, представляет собой практическое руководство для программистов, желающих углубить свои знания в JavaScript. Автор предлагает множество готовых решений и «рецептов» для типичных задач веб-разработки, таких как работа с DOM, асинхронное программирование, обработка событий и создание интерактивных интерфейсов. Книга отличается ясным стилем, примерами кода и акцентом на современные стандарты JavaScript, ...

На чьей вы стороне? ❤️ - фронтед. 👍 - бэкенд. 👉 @sWebDev | #юмор 👉 @sWebDev

Анимации с Framer Motion Framer Motion — популярная библиотека для React, которая упрощает создание плавных анимаций. С её помощью можно легко добавлять интерактивные эффекты, такие как масштабирование кнопки при наведении или анимация появления элемента. import { motion } from 'framer-motion'; const Button: React.FC = () => { return ( <motion.button whileHover={{ scale: 1.1 }} // Анимация при наведении курсора whileTap={{ scale: 0.9 }} // Анимация при клике initial={{ opacity: 0 }} // Начальное...

Сохранение состояния Что обеспечивает хук useLocalStorage, в отличие от обычного useState? Посмотреть ответ. 👉 @sWebDev

React Error Boundary Error Boundary изолирует ошибки в компонентах (например, при сбоях в сторонних библиотеках или API), чтобы приложение оставалось стабильным. Это особенно актуально для крупных проектов, где ошибка в одном компоненте не должна ломать весь UI. import { Component } from 'react'; class ErrorBoundary extends Component { state = { hasError: false, error: null }; static getDerivedStateFromError(error) { return { hasError: true, error }; } componentDidCatch(error, info) { console.er...

JavaScript для профессиональных веб-разработчиков Автор доступно объясняет сложные концепции языка, включая замыкания, асинхронное программирование, работу с DOM и современные стандарты ECMAScript. Книга сочетает теорию с практическими примерами, что делает её полезной как для начинающих, так и для опытных программистов. Обновлённое издание охватывает последние тренды веб-разработки. 👉 @sWebDev | #книги