Frontender Libs - обзор библиотек JS / CSS
7.45K subscribers
2.02K photos
735 videos
5 files
213 links
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Купить рекламу: https://telega.in/c/sWebDev
Download Telegram
Анимации с 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
👍2❤1
Примеры использования 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
👍2
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 | #полезные_сниппеты
❤3👍1
JavaScript. Рецепты для разработчиков

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

👉 @sWebDev | #книги
Отложенный вызов

Вопрос:
Что произойдёт, если передать null в качестве задержки в useTimeout?

Посмотреть ответ.

👉 @sWebDev
Tabulator

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

👉 @sWebDev
👍2
JavaScript для профессиональных веб-разработчиков

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

👉 @sWebDev | #книги
👎2👍1
🤖 AI для фронтенд-разработчика: собираем инструменты на Podlodka Frontend Crew

AI-инструменты уже используют все, но порой в обсуждении с LLM возникает ощущение, что голова полна ответов, но их всё ещё недостаточно, чтобы разрешить вполне себе прикладные вопросы.

Эксперты Podlodka Frontend Crew собрали онлайн-конференцию «Фронтенд с AI», чтобы вместе с практиками из индустрии увидеть, как работает AI в разных аспектах фронтенд-разработки, а главное — сразу начать использовать новые подходы в реальной жизни.

💬 Какие темы ждут участников сезона с 5 по 9 октября:

🔴 AI Coding и подготовка репозитория к работе с AI
🔴 Spec Kit для разработки интерфейсов
🔴 Агентная разработка в закрытом контуре
🔴 WebMCP как дополнительный harness
🔴 AI-дизайн и его место в процессе разработки.

Полная программа — уже на сайте! Формат: пять дней живых Zoom-сессий по утрам и вечерам, закрытое Telegram-комьюнити и много общения со спикерами.

Если хочется не просто читать про AI-тренды, а получить концентрированную порцию знаний именно про AI для фронтенда, присоединяйтесь к сезону.

Вы поймёте, как встроить новые инструменты и подходы в свою работу и найдёте множество единомышленников.

👉 Билеты на сезон
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM