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

Примеры использования 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

Анимации с Framer MotionFramer 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

Отслеживание размеров окнаЧто будет, если не передать defaultWidth и defaultHeight в useWindowSize?Посмотреть ответ.👉 @sWebDev

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

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

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

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

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

👉 @sWebDev | #книги