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

🤖 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 для фронтенда, присоединяйтесь к сезону.

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

👉 Билеты на сезон

👉 @sWebDev | #книги

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

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

👉 @sWebDev | #книги

Tabulator

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

👉 @sWebDev

Отложенный вызов

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

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

👉 @sWebDev

👉 @sWebDev | #книги

JavaScript. Рецепты для разработчиков

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

👉 @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 | #полезные_сниппеты

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

Отслеживание размеров окна

Что будет, если не передать defaultWidth и defaultHeight в useWindowSize?

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

👉 @sWebDev

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

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

👉 @sWebDev | #книги

Tabulator

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

👉 @sWebDev