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

Отложенный вызов Хук useTimeout в React позволяет запускать функцию через заданное время. Полезно для уведомлений, подсказок или отложенных действий. import { useEffect, useRef } from 'react'; function useTimeout(callback: () => void, delay: number) { const savedCallback = useRef(callback); useEffect(() => { savedCallback.current = callback; }, [callback]); useEffect(() => { if (delay === null) return; const id = setTimeout(() => savedCallback.current(), delay); return () => clearTimeout(id); }, [delay]); } Пример useTimeout(() => setVisible(false), 3000); 👉 @sWebDev

Что бы вы выбрали? 👍 - Проще всю бд переделать, чем эти прямоугольники красить. ❤️ - Знаешь, я и сам своего рода художник. 👉 @sWebDev | #юмор

Sticky Header Sticky Header — это фиксированный заголовок, который остаётся видимым при прокрутке страницы. Это улучшает UX, обеспечивая постоянный доступ к навигации или ключевой информации, особенно на длинных страницах. Рассмотрим два подхода: 1. CSS: .header { position: sticky; top: 0; background: #fff; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } Добавьте класс к вашему <header>, и он будет прилипать к верхней части экрана при прокрутке. 2. JavaScript + CSS: const header = document.querySelector('.header'); window.addEventListener('scroll', () => { if (window.scrollY > 0) { header.classList.add('sticky'); } else { header.classList.remove('sticky'); } }); .header.sticky { position: fixed; top: 0; width: 100%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } 👉 @sWebDev | #полезные_сниппеты

Вы пока еще не знаете JS: область видимости и замыкания Хотите глубже понять JavaScript? Книга Кайла Симпсона из серии "Вы пока еще не знаете JS" - отличный старт. Автор честно признается: никто не знает JS полностью, но с этой книгой вы точно прокачаете свои навыки. Книга разбирает два столпа языка: лексические области видимости (как правильно размещать переменные и функции, чтобы избежать хаоса) и замыкания (магия, которая позволяет функциям "запоминать" окружение и создавать мощные модули). Плюс, детальный разбор паттерна "Модуль" - для чистого и масштабируемого кода. 👉 @sWebDev | #книги

Оптимизация событий с помощью 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); return () => clearTimeout(id); }, [value, delay]); return debounced; } Пример: const [query, setQuery] = useState(""); const debouncedQuery = useDebounce(query, 500); useEffect(() => { if (debouncedQuery) { fetch(`/api/search?q=${debouncedQuery}`); } }, [debouncedQuery]); Теперь запрос отправляется только через 500 мс после остановки ввода, а не при каждом нажатии клавиши. 👉 @sWebDev

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

Tabulator Библиотека, которая превращает HTML-таблицы или данные из JavaScript в интерактивные, полнофункциональные виджеты с огромным количеством функций. Философия — "простота настройки, мощь под капотом". 👉 @sWebDev

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

Отслеживание размеров окна Что будет, если не передать defaultWidth и defaultHeight в useWindowSize? Посмотреть ответ. 👉 @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 }} // Начальное состояние animate={{ opacity: 1 }} // Конечное состояние transition={{ duration: 0.3 }} // Длительность > Нажми меня </motion.button> ); }; export default Button; 👉 @sWebDev

Примеры использования JS Fetch Статья на Snipp.ru объясняет, как использовать fetch() в JavaScript для отправки HTTP-запросов и получения данных. Рассматриваются GET, POST и другие методы, обработка ошибок, работа с JSON и заголовками. Пример отправки POST-запроса с JSON из статьи: fetch('https://example.com/api', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'John', age: 30 }) }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Ошибка:', error)); 👉 @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.error('Error:', error, info); } render() { if (this.state.hasError) { return <div>Error: {this.state.error.message}</div>; } return this.props.children; } } // Использование const App = () => ( <ErrorBoundary> <FaultyComponent /> </ErrorBoundary> ); 👉 @sWebDev | #полезные_сниппеты

Отложенный вызов Вопрос: Что произойдёт, если передать null в качестве задержки в useTimeout? Посмотреть ответ. 👉 @sWebDev

Tabulator Библиотека, которая превращает HTML-таблицы или данные из JavaScript в интерактивные, полнофункциональные виджеты с огромным количеством функций. Философия — "простота настройки, мощь под капотом". 👉 @sWebDev