Механизм spread-оператора

Что произойдет, если применить spread-оператор к значению false внутри объекта inline-стилей в React?

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

👉 @sWebDev

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

Хук 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 | #книги

👉 @sWebDev | #книги

Сохранение состояния

Что обеспечивает хук useLocalStorage, в отличие от обычного useState?

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

👉 @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

Господи, да в чём проблема стать фронтендером?

Подписался на эти три канала:

👉 Фронтенд
👉 Верстка
👉 Node.JS

Заходишь каждый день, тратишь 15 минут и изучаешь актуальную информацию. Можешь сразу применять на практике. ВСЁ!

Это настолько просто, что даже твой кот справится. Подпишись сейчас, потом спасибо скажешь.

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