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

описание

Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/sWebDev

← к каналу @sWebDev

7 589

подписчиков

Охват к подписчикам

18,1%

ERR

Реакции к просмотрам

0,22%

76 на 25 постов

Пересылки к просмотрам

0,74%

259

Постов в день

0,3

всего 25

Где отзываются чаще

доля реакций к просмотрам

31 окт.На чьей вы стороне? ❤️ - фронтед. 👍 - бэкенд. 👉 @sWebDev | #юмор 👉 @sWebDev2,04%
21 июн. 2024 г.без подписи0,45%
12 июл. 2024 г.без подписи0,38%
21 нояб. 2024 г.без подписи0,35%
5 дек.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 | #полезные_сниппеты0,34%
10 окт. 2025 г.без подписи0,34%
13 окт. 2025 г.Оптимизация событий с помощью 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 мс после остановки ввода, а не при каждом нажатии клавиши. 👉 @sWebDev0,27%
10 авг.АЙТИШНИКИ БЕСПЛАТНОЕ ОБУЧЕНИЕ Проект «TERMINAL» стал крупнейшей библиотекой бесплатного образования. В одном канале собраны курсы, книги, полезные инструменты и практические тренажёры для всех разработчиков: • Практические курсы и задания • Книги и статьи известных авторов • Полезные инструменты и ресурсы • IT-новости и инсайды Обучение по всем направлениям: SQL, Python, ML, Frontend, PHP, C++, Go, Git, Linux, QA, Java, Vibe-coding, InfoSec и др. ⌨️ подписаться0,23%
11 нояб.Отслеживание размеров окна Что будет, если не передать defaultWidth и defaultHeight в useWindowSize? Посмотреть ответ. 👉 @sWebDev0,22%
13 нояб.Анимации с 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; 👉 @sWebDev0,21%
7 июн. 2024 г.без подписи0,19%
4 дек.Примеры использования 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)); 👉 @sWebDev0,17%