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

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

IT схлопнулось, а половина вакансий — откровенный скам? Знакомо. Больно. Проходили. Если хочешь фильтр по реальным предложениям — тебе к нам. В нашем канале: • только проверенные вакансии каждый день; • надёжные работодатели и крупные компании; • зарплаты по рынку и выше; • ДМС и полный набор соцплюшек для твоего комфорта; • адекватные HR-ы; • никаких монструозных тестовых заданий; • поддержка в поиске работы — и для джунов, и для опытных разработчиков. Найдём работу, которая действительно стоит твоих навыков. Подписывайся 👉 Твой Оффер | Работа в IT

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

Господи, да в чём проблема стать фронтендером? Подписался на эти три канала: 👉 Фронтенд 👉 Верстка 👉 Node.JS Заходишь каждый день, тратишь 15 минут и изучаешь актуальную информацию. Можешь сразу применять на практике. ВСЁ! Это настолько просто, что даже твой кот справится. Подпишись сейчас, потом спасибо скажешь.

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

👨👨👨👨👨👨👨👨👨👨 Каналы с Junior IT вакансиями и стажировками Подписывайся и забирай свой оффер 🤘 1. Стажировки и вакансии по России и миру 2. IT вакансии по СНГ 3. IT стажировки по СНГ 4. ИИ-ассистент для автооткликов 5. IT стажировки и волонтерства 6. IT стажировки в топовых компаниях мира 7. Удалённые IT вакансии и стажировки 8. Python вакансии и стажировки 9. БИГТЕХ вакансии и стажировки 10. Design вакансии и стажировки 11. QA вакансии и стажировки 12. Junior вакансии и стажировки 13. Frontend вакансии и вопросы собесов 14. Вакансии и стажировки для аналитиков 15. Вакансии в русских стартапах за границей 16. Вакансии и стажировки для DevOps 17. Вакансии, которых нет на ХХ.РУ

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

👩‍💻 Всем программистам посвящается! Вот 17 авторских обучающих IT каналов по самым востребованным областям программирования: Выбирай своё направление: 👩‍💻 Frontend — t.me/frontend_ready 📱 JavaScript — t.me/javascript_ready 👩‍💻 Backend — t.me/backend_ready 📱 GitHub & Git — t.me/github_ready 👩‍💻 IT Новости — t.me/it_ready 👩‍💻 Python — t.me/python_ready 🤔 InfoSec & Хакинг — t.me/hacking_ready 🖥 SQL & Базы Данных — t.me/sql_ready 🤖 Нейросети — t.me/neuro_ready 👩‍💻 C/C++ — https://t.me/cpp_ready 👩‍💻 C# & Unity — t.me/csharp_ready 📖 IT Книги — t.me/books_ready 👩‍💻 Java — t.me/java_ready 👩‍💻 Linux — t.me/linux_ready 🖼️ DevOps — t.me/devops_ready 👩‍💻 Bash & Shell — t.me/bash_ready 🐞 QA-тестирование — t.me/qa_ready 🖥 Data Science — t.me/data_ready 🖥 Design — t.me/design_ready 📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!

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

Ваша история в IT начинается в Авито 🚀 Хотите расти в разработке — приходите на оплачиваемую стажировку в Авито. Мы ищем будущих специалистов в направлениях Frontend, Backend, QA и Android. Вы будете работать над продуктами, которыми ежедневно пользуются миллионы людей, и прокачивать навыки с помощью: ➡️ наставника — подскажет, как мыслить в процессе решения задач; ➡️ комьюнити стажёров — всегда рядом, чтобы обсудить задачи и поддержать; ➡️ корпоративных курсов, библиотек и баз знаний — всё, чтобы развиваться быстрее. Выберите два направления — основное и запасное. Если не получится попасть в первое, сможете пройти отбор на второе при наличии мест. Условия: ➡️ зарплата и корпоративный ноутбук, ➡️ формат — офис, удалёнка или гибрид, ➡️ от 25 часов в неделю, ➡️ продолжительность — 9 месяцев, ➡️ компенсация питания, консультации с психологами и юристами, ➡️ после стажировки — возможность остаться в команде, если покажите крутой результат. 📌 Регистрация открыта до 12 ноября. Подать заявку можно по ссылке.

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

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

VK RecSys Challenge — решите задачу холодного старта Привет! Открываем регистрацию на VK RecSys Challenge – соревнование по разработке рекомендательных систем. Задача – решить одну из ключевых проблем рекомендаций: как показать пользователю ролик, который он точно посмотрит, даже если никто этот ролик не видел. Вам предстоит поработать с реальным датасетом VK-LSVD: 40 миллиардов обезличенных пользовательских взаимодействий и 20 миллионов коротких видео. Ждём студентов, исследователей, ML-инженеров – всех, кому интересен мир рекома. Формат участия: - индивидуально или в команде до 4 человек - 5 сабмитов в день - призовой фонд – 2 500 000 рублей Приём заявок – до 15 декабря Подробности и регистрация – по ссылке Зарегистрироваться #реклама 16+ dev-events.com О рекламодателе

Старт продаж премиальных апартаментов Skysoul в Крыму Премиальный комплекс в 30 метрах от собственного пляжа ✅ Комплекс — 4-х кратный победитель премии в сфере недвижимости URBAN AWORDS как самый привлекательный инвестиционный проект ЮФО 🏠 Комплекс можно: - Сдавать посуточно через отельера международного класса и получать пассивный ежемесячный доход (при этом отдыхая в отпуске в собственном номере) - Выгодно перепродать ⚡ О проекте: - Первая береговая линия – всего в 30 метрах расположен собственный пляж - На территории открытый и 2 круглогодичных бассейна - Более 14,5 га впечатляющей территории: 4-этажный SPA-комплекс, амфитеатр, панорамный ресторан, медцентр, игровое пространство для детей, магазины и бутик ⚡Роскошные панорамные виды на потухший вулкан, море и виноградники ✅Получите цены и презентацию первыми: Перейти на сайт Проектная декларация на сайте https://наш.дом.рф/. #реклама mrqz.me О рекламодателе

Оптимизация событий с помощью 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

Бесплатный курс по дизайну: веб, графический и UX/UI Получи востребованные навыки: - создание дизайна сайтов и приложений - создание инфографики и карточек для маркетплейсов - работа в графическом редакторе Figma и др. Студенты курса в среднем зарабатывают от 68 000 ₽ уже во время обучения💰 Зарегистрироваться #реклама 16+ ydaev.ru О рекламодателе