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

Dark Mode Toggle Dark Mode Toggle - это удобный способ переключать на темную тему на сайте. Сниппет использует CSS-переменные и локальное хранилище для сохранения выбора темы.

function setupDarkModeToggle() {
  const toggleButton = document.querySelector('#theme-toggle');
  const root = document.documentElement;
  const isDark = localStorage.getItem('theme') === 'dark';

  // Устанавливаем начальную тему
  if (isDark) {
    root.classList.add('dark');
  }

  toggleButton.addEventListener('click', () => {
    root.classList.toggle('dark');
    const newTheme = root.classList.contains('dark') ? 'dark' : 'light';
    localStorage.setItem('theme', newTheme);
  });
}

document.addEventListener('DOMContentLoaded', setupDarkModeToggle);

:root {
  --background: #ffffff;
  --text-color: #333333;
}

.dark {
  --background: #1a1a1a;
  --text-color: #ffffff;
}

body {
  background: var(--background);
  color: var(--text-color);
  transition: background 0.3s, color 0.3s;
}

👉 @sWebDev | #полезные_сниппеты

Google Meet перестал работать в России: что дальше? 📞🏃‍♂️ Сперва в Telegram и WhatsApp заблокировали звонки, а теперь и Google Meet сбоит. Видеозвонки не проходят ни с телефонов, ни с ПК. Для бизнеса это означает: - сорванные онлайн-совещания и встречи с клиентами; - срыв собеседований и переговоров с подрядчиками; - потерю времени и простои в коммуникациях команд; - срочный поиск альтернативы для видеозвонков и онлайн-летучек. Что делать бизнесу, когда зарубежные сервисы один за другим перестают работать в России? ✅ В МТС Линк: видеозвонки, чаты, онлайн-доски и совещания без сбоев и ограничений 40 минут; дата-центры в России, соответствие 152-ФЗ и 149-ФЗ; готовые интеграции; русскоязычная техподдержка 24/7. Проверьте, подходит ли МТС Линк вашей компании Узнать больше #реклама 16+ mts-link.ru О рекламодателе

👩‍💻 Всем программистам посвящается! Вот 17 авторских обучающих IT каналов по самым востребованным областям программирования: Выбирай своё направление: 👩‍💻 Frontend — t.me/frontend_ready 📱 JavaScript — t.me/javascript_ready 👩‍💻 Backend — t.me/backend_ready 📱 GitHub & Git — t.me/github_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 👩‍💻 Java — t.me/java_ready 👩‍💻 Linux — t.me/linux_ready 🖼️ DevOps — t.me/devops_ready 📖 IT Книги — t.me/books_ready 👩‍💻 Весь IT — t.me/it_ready 👩‍💻 Bash & Shell — t.me/bash_ready 🖥 Design — t.me/design_ready 📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!

Область видимости в JavaScript Хотите разобраться, как работают области видимости в JS? В статье простыми словами объясняется, что такое область видимости, как она влияет на доступность переменных и почему const/let отличаются от var. Узнайте про блочную, функциональную и модульную области, лексическую область и замыкания. 👉 @sWebDev

Оборудование для видеопродакшена и кинопроизводства Хотите узнать, какое оборудование используют топовые продакшн-студии, телеканалы и режиссёры на съёмках? В нашем Telegram-канале мы делимся: ✅ Подробными обзорами профессиональных камер, видеосендеров и систем связи ✅ Решениями для студий, прямых эфиров и кинопроизводства ✅ Новостями брендов и реальными кейсами интеграции оборудования ✅ Уникальными возможностями для наших партнёров и дилеров Канал TVA — это сообщество профессионалов, которым важно качество картинки, надёжность сигнала и сервис от официального поставщика. Подписывайтесь и будьте в числе тех, кто получает доступ к новым технологиям первыми. Подписаться #реклама О рекламодателе

Как frontend-разработчику получить оффер в Bigtech? Ты вроде бы уже не джун, но всё равно чувствуешь, что топчешься на месте? Рынок перегрет, требований всё больше, а откликов — всё меньше? На собесах валят на алгоритмах или просят "нарисовать" архитектуру, как будто ты ведущий. При этом вокруг кто-то постоянно получает офферы в Яндекс или VK, а у тебя не получается даже дойти до финального этапа? Хочется стабильности, интересных задач и наконец-то попасть в сильную команду...

Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Помогаю устроиться на хорошие позиции в Bigtech и сопровождаю на испытательном сроке.

В своем канале: 👉 публикую видео с решением задач, которые прямо сейчас дают крупные компании на собеседованиях 👉даю примеры по прохождению собеседований 👉разбираю резюме и докручиваю резюме подписчиков 👉и просто создаю дружелюбное, комфортное сообщество, где коллеги всегда готовы подсказать и поддержать 🎁В закрепе тебя ждёт подборка из 60 задач, которые сейчас дают на собеседованиях Яндекс, Т-Банк и другие крупные IT игроки. Подписывайся и получай максимум пользы, а нас уже больше 3500 🤓: frontend_punks Реклама, erid: 2W5zFGkvG3S ИП Галактионов Тихон Витальевич, ИНН 771618975809

Отслеживание размеров окна React хук useWindowSize отслеживает размеры окна браузера для адаптивных интерфейсов. В SSR, где window недоступен, хук использует начальные значения (defaultWidth, defaultHeight). После гидратации размеры обновляются.

import { useState, useEffect } from 'react';

function useWindowSize(defaultWidth = 0, defaultHeight = 0) {
  const [windowSize, setWindowSize] = useState({
    width: defaultWidth,
    height: defaultHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowSize;
}

Хук возвращает объект { width, height } для динамической адаптации UI. 👉 @sWebDev

Ищу желающих заполнять карточки товаров на ВБ! Работа полностью на удаленке с зп до150 000 рублей в месяц. Без опыта, нужен только телефон, занятость 3-6 часов в день. Всему обучат на бесплатном курсе и после возьму на работу: ✅ 3 дня уроков по 30 минут ✅ Домашки с проверкой и оплатой бонусами ✅ Плачу 10 тыс за каждую выполненную домашку Все кто пройдет курс, получат сертификат от школы с образовательной лицензией. ⚡ Набор заканчивается завтра. 👍 Для регистрации жмите кнопку "Зарегистрироваться" Зарегистрироваться #реклама 16+ course.wildmanager.ru О рекламодателе

Поведение на клиенте Если React-хук для адаптивного UI использует начальное значение для серверного рендеринга, что произойдет с этим значением на стороне клиента после гидратации? Посмотреть ответ. 👉 @sWebDev

Дарим подписку на Яндекс Музыку Ответьте на 1 вопрос и Яндекс Музыка ваша для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже в подписке. Попробуйте бесплатно❤️ Попробовать #реклама 18+ music.yandex.ru О рекламодателе Реклама на Яндексе

Node js разработка приложений в микросервисной архитектуре с нуля Книга Юлии Поповой «Node.js: разработка приложений в микросервисной архитектуре с нуля», вышедшая в апреле 2024 года, представляет собой практическое руководство для разработчиков от уровня джун и выше. В ней показан процесс создания микросервисов на Node.js с использованием NestJS и других популярных инструментов. Несмотря на формулировку «с нуля» в названии, материал рассчитан на тех, кто уже знаком с JavaScript, TypeScript и NestJS. Автор сосредотачивается не на теории, а на практических приемах построения масштабируемых микросервисных приложений. 👉 @sWebDev | #курсы_книги

Для крупных покупок выбирайте аккредитив Газифицируете участок или приобретаете дорогостоящую технику, мебель на заказ? Оформите аккредитив от СберБанка — оплата пройдёт только после исполнения подрядчиком всех обязательств. Какие ещё преимущества? 👌Удобство: можно оставить заявку на сайте и подписать документы в СберБанк Онлайн. ⚡Скорость: оформление — 10 минут, средства переведём за 1 день. 💰 Доступность: стоимость от 500 ₽. Узнайте, в каких случаях аккредитив пригодится вам, на сайте Узнать больше Изучите все условия кредита (займа) на сайте в соответствующем разделе. Оценивайте свои финансовые возможности и риски. Финансовые услуги оказывает: ПАО Сбербанк. #реклама sberbank.ru О рекламодателе

И как бороться с этим? 👍 - Сила воли и 10 литров кофе ❤️ - А зачем бороться? 👉 @sWebDev | #юмор

REKONFA Live 6 ноября приглашаем всех, кто имеет отношение к маркетингу и рекламным технологиям, обсудить рынок, тренды, вызовы и их решения. С докладами на актуальные темы выступят лидеры индустрии и медийные спикеры. Принять участие можно офлайн и онлайн. Мероприятие бесплатное, нужно только зарегистрироваться. Зарегистрироваться #реклама 18+ ya.rekonfa.ru О рекламодателе

CSS Custom Highlight API Стилизация текста - важная задача для Frontend-разработчика. CSS Custom Highlight API позволяет управлять внешним видом выделенных диапазонов, делая акценты гибкими и удобными. В статье разбираем основы работы API и показываем, как создавать и применять стилизованные выделения на практике. 👉 @sWebDev

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

Skeleton Loading Skeleton Loading - это серые «заглушки», которые показываются до загрузки данных. Пользователь сразу видит структуру страницы и не думает, что сайт завис. Такой приём снижает число уходов и делает интерфейс визуально быстрее. Как внедрить? Рассмотрим два варианта: 1. CSS-анимация shimmer:

.skeleton {
  background: linear-gradient(90deg,#eee 25%,#ddd 50%,#eee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

2. React/Vue: Показываем <Skeleton /> вместо контента при loading=true. 👉 @sWebDev | #полезные_сниппеты

Гайд для маркетологов по эффективным онлайн-встречам Как CMO, PR и digital-маркетологам повысить результативность брейнштормов, совещаний и планерок с командой с помощью онлайн-встреч? Гайд МТС Линк: 37 страниц полезных материалов, чек-листов и кейсов для эффективных видеовстреч и совещаний. ✅ В гайде: - Как создать постоянную ссылку на регулярные встречи с подрядчиками, командой или агентствами и подключаться в 2 клика; - Как управлять встречей и завершить ее четкими договоренностями с ИИ-расшифровкой голоса в текст; - Как проводить кастдевы, брейнштормы и формулировать гипотезы с помощью 15+ шаблонов в онлайн-досках МТС Линк; - Как разом пригласить всех участников на синк таким образом, чтобы все пришли. Бонус внутри: 5 способов не выгореть от бесконечных синков. ✨ Скачайте гайд бесплатно по ссылке Скачать #реклама 16+ mts-link.ru О рекламодателе