Frontend Советы

Совет по CSS 💡 Знаете ли вы о свойстве shape-outside в CSS? Demo https://www.codewithshripal.com/playground/css/shape-outside 👉@frontend_sovet

🚀 Подборка полезных IT каналов в Max Системное администрирование, DevOps 📌 https://max.ru/i_odmin Все для системного администратора https://max.ru/bash_srv Bash Советы https://max.ru/sysadminof Книги для админов, полезные материалы https://max.ru/i_odmin_book Библиотека Системного Администратора https://max.ru/i_devops DevOps: Пишем о Docker, Kubernetes и др. 1C разработка 📌 https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С Программирование C++📌 https://max.ru/cpp_lib Библиотека C/C++ разработчика Программирование Go📌 https://max.ru/golang_lib Библиотека Go (Golang) разработчика Программирование React📌 https://max.ru/react_lib React Программирование Python 📌 https://max.ru/python_of Python академия. https://max.ru/BookPython Библиотека Python разработчика Java разработка 📌 https://max.ru/bookjava Библиотека Java разработчика GitHub Сообщество 📌 https://max.ru/githublib Интересное из GitHub Базы данных (Data Base) 📌 https://max.ru/database_info Все про базы данных Фронтенд разработка 📌 https://max.ru/frontend_1 Подборки для frontend разработчиков Библиотеки 📌 https://max.ru/programmist_of Книги по программированию https://max.ru/proglb Библиотека программиста https://max.ru/bfbook Книги для программистов Программирование 📌 https://max.ru/bookflow Лекции, видеоуроки, доклады с IT конференций https://max.ru/itmozg Программисты, дизайнеры, новости из мира IT https://max.ru/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻 Шутки программистов 📌 https://max.ru/itumor Шутки программистов Защита, взлом, безопасность 📌 https://max.ru/thehaking Канал о кибербезопасности https://max.ru/xakkep_1 Хакер Free Книги, статьи для дизайнеров 📌 https://max.ru/odesigners Статьи, книги для дизайнеров Математика 📌 https://max.ru/Pomatematike Канал по математике https://max.ru/phismat_1 Обучающие видео, книги по Физике и Математике Вакансии 📌 https://max.ru/progjob Вакансии в IT Мир технологий 📌 https://max.ru/mir_teh Канал для любознательных Бонус 📌 https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга https://max.ru/mockva_life Свежие новости Москвы

⚛️ Прощай, e.preventDefault(): Нативные формы в React Управление формами в React всегда требовало кучи бойлерплейта: отдельные useState для данных, лоадеров и ошибок, ручной try/catch и обязательный e.preventDefault(). В React 19 появились Actions и новые хуки, которые забирают эту рутину на себя, используя нативные возможности браузера. 1. useActionState (Стейт формы) Позволяет привязать асинхронную функцию к форме и автоматически сохранять результат её выполнения (например, сообщения об ошибках). 2. useFormStatus (Контекст лоадера) Позволяет дочерним элементам читать статус родительской формы (загрузка, отправленные данные). Больше не нужно прокидывать пропс isLoading сквозь всё дерево компонентов. 🚀 Как это выглядит на практике:

import { useActionState, useFormStatus } from "react";

// 1. Асинхронный экшен (может быть и Server Action)
async function createUserAction(prevState, formData) {
  const name = formData.get("name");
  
  if (!name) return { error: "Имя обязательно!" };
  
  await fetch("/api/users", { method: "POST", body: name });
  return { success: true, message: "Пользователь создан!" };
}

// 2. Изолированная кнопка, которая "знает" о статусе загрузки
function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button disabled={pending}>
      {pending ? "Сохраняем..." : "Создать"}
    </button>
  );
}

// 3. Сама форма
export function UserForm() {
  const [state, formAction] = useActionState(createUserAction, null);

  return (
    // Просто передаем action в форму! Никаких onSubmit.
    <form action={formAction}>
      <input name="name" placeholder="Введите имя" />
      
      {state?.error && <p className="error">{state.error}</p>}
      {state?.success && <p className="success">{state.message}</p>}
      
      <SubmitButton />
    </form>
  );
}

🧠 Senior-нюансы: • Где вызывать useFormStatus? Он работает под капотом как Context API. Поэтому его нужно вызывать только в дочерних компонентах внутри <form>. Если вызвать его в компоненте UserForm из примера выше, pending всегда будет false. • Progressive Enhancement: Если вы используете фреймворк с SSR (например, Next.js), такая форма может отправить данные даже если JavaScript на клиенте еще не загрузился или вовсе отключен. 👉@frontend_sovet

🚀 Подборка полезных IT каналов в Max Системное администрирование, DevOps 📌 https://max.ru/i_odmin Все для системного администратора https://max.ru/bash_srv Bash Советы https://max.ru/sysadminof Книги для админов, полезные материалы https://max.ru/i_odmin_book Библиотека Системного Администратора https://max.ru/i_devops DevOps: Пишем о Docker, Kubernetes и др. 1C разработка 📌 https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С Программирование C++📌 https://max.ru/cpp_lib Библиотека C/C++ разработчика Программирование Python 📌 https://max.ru/python_of Python академия. https://max.ru/BookPython Библиотека Python разработчика Java разработка 📌 https://max.ru/bookjava Библиотека Java разработчика GitHub Сообщество 📌 https://max.ru/githublib Интересное из GitHub Базы данных (Data Base) 📌 https://max.ru/database_info Все про базы данных Фронтенд разработка 📌 https://max.ru/frontend_1 Подборки для frontend разработчиков Библиотеки 📌 https://max.ru/programmist_of Книги по программированию https://max.ru/proglb Библиотека программиста https://max.ru/bfbook Книги для программистов Программирование 📌 https://max.ru/bookflow Лекции, видеоуроки, доклады с IT конференций https://max.ru/itmozg Программисты, дизайнеры, новости из мира IT https://max.ru/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻 Шутки программистов 📌 https://max.ru/itumor Шутки программистов Защита, взлом, безопасность 📌 https://max.ru/thehaking Канал о кибербезопасности https://max.ru/xakkep_1 Хакер Free Книги, статьи для дизайнеров 📌 https://max.ru/odesigners Статьи, книги для дизайнеров Математика 📌 https://max.ru/Pomatematike Канал по математике https://max.ru/phismat_1 Обучающие видео, книги по Физике и Математике Вакансии 📌 https://max.ru/progjob Вакансии в IT Мир технологий 📌 https://max.ru/mir_teh Канал для любознательных Бонус 📌 https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга https://max.ru/mockva_life Свежие новости Москвы

💻Angular — один из самых строгих и системных инструментов разработки пользовательских интерфейсов. Его выбирают крупные компании, где важны масштабируемость, предсказуемость кода и возможность развивать продукт долгие годы. Мы расскажем вам как работать с этим инструментом. Записывайтесь на открытые уроки в преддверии старта курса «Angular-разработчик»: 📆26 марта в 20:00 МСК на открытом уроке разберём, как LLM ускоряют фронтенд-разработку. Покажем их развитие, подготовим Angular-проект к работе с ИИ, создадим приложение и обсудим, где ИИ реально помогает разработчику. 📆9 апреля в 20:00 МСК на открытом уроке разберём сигналы в Angular: создадим реактивную форму с валидацией, обсудим управление состоянием и сравним с подходом на RxJS. 📆21 апреля в 20:00 МСК разберём архитектуру Angular-приложения: слои, feature-подход, разделение UI, логики и API, а также паттерны и структуру реального проекта. Подробности об уроках и регистрация: https://vk.cc/cVBn4b Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

CSS совет 💡 Проявите креативность с текстом всего с 3 строками CSS-кода ✨ 👉@frontend_sovet

🚀 Подборка полезных IT каналов в Max Системное администрирование, DevOps 📌 https://max.ru/i_odmin Все для системного администратора https://max.ru/bash_srv Bash Советы https://max.ru/sysadminof Книги для админов, полезные материалы https://max.ru/i_odmin_book Библиотека Системного Администратора https://max.ru/i_devops DevOps: Пишем о Docker, Kubernetes и др. 1C разработка 📌 https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С Программирование C++📌 https://max.ru/cpp_lib Библиотека C/C++ разработчика Программирование Python 📌 https://max.ru/python_of Python академия. https://max.ru/BookPython Библиотека Python разработчика Java разработка 📌 https://max.ru/bookjava Библиотека Java разработчика GitHub Сообщество 📌 https://max.ru/githublib Интересное из GitHub Базы данных (Data Base) 📌 https://max.ru/database_info Все про базы данных Фронтенд разработка 📌 https://max.ru/frontend_1 Подборки для frontend разработчиков Библиотеки 📌 https://max.ru/programmist_of Книги по программированию https://max.ru/proglb Библиотека программиста https://max.ru/bfbook Книги для программистов Программирование 📌 https://max.ru/bookflow Лекции, видеоуроки, доклады с IT конференций https://max.ru/itmozg Программисты, дизайнеры, новости из мира IT https://max.ru/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻 Шутки программистов 📌 https://max.ru/itumor Шутки программистов Защита, взлом, безопасность 📌 https://max.ru/thehaking Канал о кибербезопасности https://max.ru/xakkep_1 Хакер Free Книги, статьи для дизайнеров 📌 https://max.ru/odesigners Статьи, книги для дизайнеров Математика 📌 https://max.ru/Pomatematike Канал по математике https://max.ru/phismat_1 Обучающие видео, книги по Физике и Математике Вакансии 📌 https://max.ru/progjob Вакансии в IT Мир технологий 📌 https://max.ru/mir_teh Канал для любознательных Бонус 📌 https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга https://max.ru/mockva_life Свежие новости Москвы

⚛️ Как я перестал бояться useEffect и упростил код Сегодня разберём проблему, которую я постоянно вижу в React-проектах - перегруженный useEffect. Типичная картина:

useEffect(() => {
  fetchData();
  logEvent();
  updateTitle();
}, [user, token, locale, theme]);

❌ Что здесь не так: 🔘эффект делает слишком много 🔘зависимости растут как снежный ком 🔘любое изменение ломает логику 🔘сложно тестировать и дебажить ✅ Что я начал делать вместо этого 1. Один useEffect - одна причина

useEffect(() => {
  fetchData(user, token);
}, [user, token]);

useEffect(() => {
  updateTitle(locale);
}, [locale]);

2. Логику выношу в кастомные хуки

useUserData(user, token);
usePageTitle(locale);

Компонент сразу становится читабельным:

function Profile() {
  useUserData(user, token);
  usePageTitle(locale);

  return <UI />;
}

3. Не боюсь useCallback и useMemo, но использую осознанно Не для «оптимизации ради оптимизации», а чтобы: 🔘стабилизировать зависимости 🔘убрать лишние перерендеры 🔘сделать поведение предсказуемым 👉@frontend_sovet

🎨 CSS Tip: Как скрыть контент визуально, но оставить его доступным В погоне за минималистичным дизайном мы часто используем иконки без подписей. Но для пользователей скринридеров (и для SEO!) кнопка без текста - это проблема. ❌ Ошибка: Использовать display: none, visibility: hidden или opacity: 0. Эти свойства полностью убирают элемент из дерева доступности. Скринридер его просто проигнорирует. ✅ Решение: Паттерн .visually-hidden (или .sr-only). Этот класс заставляет элемент «исчезнуть» с экрана, но остаться в DOM и быть доступным для ассистивных технологий. Разбор магии из сниппета: 1. position: absolute - убираем элемент из потока документа, чтобы он не занимал место. 2. width: 1px; height: 1px - некоторые скринридеры игнорируют элементы с нулевыми размерами, поэтому оставляем 1 пиксель. 3. overflow: hidden - скрываем контент, который не влезает в наш 1 пиксель. 4. white-space: nowrap - предотвращаем перенос текста (если текст разобьется на строки в 1px, скринридер может прочитать его некорректно). 5. clip-path: circle(0) - финальный штрих, полностью обрезаем видимую область этого 1 пикселя. 📌 Сниппет:

.visually-hidden {
  /* Убираем из потока */
  position: absolute;
  
  /* Размеры 1px, чтобы скринридер не игнорировал элемент */
  width: 1px;
  height: 1px;
  
  /* Скрываем всё, что не влезает */
  overflow: hidden;
  
  /* Запрещаем перенос строк */
  white-space: nowrap;
  
  /* Обрезаем визуальную часть */
  clip-path: circle(0);
  
  /* Альтернативные варианты скрытия: */
  /* transform: scale(0); */
  /* transform: translateX(-9999px); */
}

Итог: ✅ Виден для Screen Reader ✅ Перехватывает фокус (если это интерактивный элемент) ❌ Не занимает места в верстке ❌ Не реагирует на клики мыши (но работает с клавиатуры) 👉@frontend_sovet

Как проверить, что данная строка является анаграммой другой строки в JavaScript? Анаграмма — приём, состоящий в перестановке букв или звуков определённого слова, что в результате даёт другое слово или словосочетание. Несколько примеров анаграмм на английском: 1. evil = vile 2. a gentleman = elegant man 3. eleven plus two = twelve plus one Так как же проверить, являются ли строки анаграммами в JS? На картинке пример кода, реализующий проверку с помощью встроенных функций. 👉@frontend_sovet

Шпаргалка по CSS 👉@frontend_sovet

📕Создание приложения Movie Watchlist Manager на Angular: от компонентов до управления состоянием - разработчикам JavaScript/TypeScript, Junior/Middle разработчикам, желающим освоить Angular, Frontend-разработчикам на других фреймворках (React, Vue) На открытом уроке 19 ноября в 20:00 мск мы погрузимся в созданию приложения по отслеживанию просмотренных фильмов/сериалов с использованием сигнальных сторов в Angular: 📗 На вебинаре разберем: 1. Создание компонентов и подключение API для поиска и добавления фильмов. 2. Организация архитектуры проекта и лучшие практики. 📘 В результате на практике изучите и освоите базовые концепции Angular (компоненты, сервисы, DI), работу с формами, API и реактивными потоками, использование store для управления состоянием приложения и лучшие методы построения современного SPA-приложения на Angular. 👉 Регистрация на урок и подробности о курсе Angular Developer: https://vk.cc/cRpDss Все участники открытого урока получат скидку на курс "Angular Developer" Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Почему ваши UI-компоненты растут как снежный ком и как этого избежать Когда один компонент делает всё: и рисует интерфейс, и тянет данные, и валидирует форму, и ещё 20 мелких задач. Такой код трудно поддерживать, тестировать и переиспользовать. 🧩 Как понять, что компонент уже перерос нормы? - У него больше 200–250 строк. - Он содержит и бизнес-логику, и сетевые запросы, и рендер - всё вперемешку. - В нём много useEffect, часть из которых «о чём-то своём». - Вы боитесь открыть файл, потому что там хаос. 🛠️ Что делать, чтобы этого избежать? 1. Выносите бизнес-логику в кастомные хуки Например, вместо:

function UsersList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users').then(r => r.json()).then(setUsers);
  }, []);

  return users.map(u => <UserCard key={u.id} user={u} />);
}

Сделайте:

function useUsers() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users').then(r => r.json()).then(setUsers);
  }, []);

  return users;
}

function UsersList() {
  const users = useUsers();
  return users.map(u => <UserCard key={u.id} user={u} />);
}

UI остаётся чистым. 2. Разделяйте компонент на контейнер и представление - Контейнер — получает данные и передаёт вниз. - Представление — только отображает. 3. Удаляйте «лишние» обязанности Если компонент отвечает больше чем за одну задачу, значит это уже два компонента. 4. Не бойтесь мелких файлов Один компонент = один файл = одна ответственность. 👉@frontend_sovet

📕От нуля до пиццы за 60 минут: Angular Reactive Forms в бою - разработчикам JavaScript/TypeScript, Junior/Middle разработчикам, желающим освоить Angular, Frontend-разработчикам на других фреймворках (React, Vue) На открытом уроке 13 ноября в 20:00 мск мы погрузимся в создание интерактивного конструктора пиццы с использованием Angular Reactive Forms и сигналов. 📗 На вебинаре: 1. Понимание архитектуры компонентов и Template syntax: директивы, биндинги, pipes 2. Погружение в Event handling и реактивность 📘 В результате на практике изучите и освоите создание и настройка форм через FormBuilder, работу с FormGroup и FormControl, валидацию данных и обработку ошибок. 👉 Регистрация на урок и подробности о курсе Angular Developer: https://vk.cc/cRfpXs Все участники открытого урока получат скидку на курс "Angular Developer" Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

🔥 Сегодня разберём одну мелочь, которая часто делает код новичков неаккуратным — жёстко прописанные размеры. Часто вижу такое:

.button {
  width: 200px;
  height: 50px;
}

❌ Проблема в том, что такие кнопки «ломаются» при адаптиве — текст не влезает, ширина не подстраивается под экран. ✅ Лучше так:

.button {
  padding: 12px 24px;
  display: inline-block;
}

Теперь размер зависит от контента, а не от фиксированных значений. А если хочешь добавить гибкости — используй min-width или max-width, чтобы задать границы:

.button {
  padding: 12px 24px;
  min-width: 150px;
  max-width: 100%;
}

💡 Мой совет: всегда думай, нужно ли фиксировать размер, или можно доверить это контенту и адаптивности. В 80% случаев фиксированные размеры — зло 😄 👉@frontend_sovet

📕Angular UI-Kit с нуля: Как построить библиотеку переиспользуемых компонентов - разработчикам JavaScript/TypeScript, Junior/Middle разработчикам, желающим освоить Angular, Frontend-разработчикам на других фреймворках (React, Vue) На открытом уроке 29 октября в 20:00 мск мы разберёмся в применении Angular Reactive Forms и сигналов: 📗 На вебинаре: 1. Template syntax: директивы, биндинги, pipes. 2. Event handling и реактивность. 📘 В результате на практике изучите и освоите создание и настройка форм через FormBuilder, работу с FormGroup и FormControl, валидацию данных и обработку ошибок. 👉 Регистрация на урок и подробности о курсе Angular Developer: https://vk.cc/cQL6Kp Все участники открытого урока получат скидку на курс "Angular Developer" Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Сделать ошибки TypeScript более красивыми и человекочитаемыми в VSCode с помощью Pretty TypeScript Errors. https://github.com/yoavbls/pretty-ts-errors 👉@frontend_sovet

🎨 Совет: не бойся CSS-переменных! Сегодня хочу показать вам, как CSS-переменные реально упрощают жизнь фронтенд-разработчику. Когда вы только начинаете изучать CSS, кажется, что переменные — это «фишка для продвинутых». Но на самом деле они помогают держать стиль проекта под контролем. Пример 👇

:root {
  --main-color: #0ea5e9;
  --text-color: #1e293b;
}

body {
  background: var(--main-color);
  color: var(--text-color);
}

button {
  background: var(--main-color);
}

Теперь вы можете изменить цветовую схему всего проекта, просто поменяв значение --main-color в одном месте. А если хотите сделать тёмную тему, достаточно переопределить эти переменные:

@media (prefers-color-scheme: dark) {
  :root {
    --main-color: #1e293b;
    --text-color: #f1f5f9;
  }
}

🔥 Всё — тёмная тема готова без лишнего кода! Попробуйте применить это в своём проекте — даже маленьком. Потом уже не сможете без переменных 😄 👉@frontend_sovet

🎨 CSS переменные: маленький хак для удобства Сегодня хочу показать простой, но очень полезный приём при работе с CSS переменными. Мы часто пишем что-то вроде:

:root {
  --primary-color: #4f46e5;
}
button {
  background: var(--primary-color);
}

Но что если переменная не определена? Браузер просто ничего не подставит. Чтобы подстраховаться, всегда задавайте fallback:

button {
  background: var(--primary-color, blue);
}

Теперь, даже если где-то вы забыли определить --primary-color, кнопка всё равно останется синим. 👍 Я лично часто использую это при темизации — можно быстро переключать темы, не боясь, что интерфейс "развалится". Попробуйте применить у себя и посмотрите, насколько это уменьшит количество багов! 👉@frontend_sovet

CSS переменные vs SCSS переменные - когда какие? Сегодня покажу вам, как я выбираю между CSS custom properties (--var) и SCSS-переменными ($var). Оба инструмента решают похожую задачу, но работают в разное время и по-разному влияют на проект. 1) Как они живут - SCSS $var - подставляются на этапе сборки. В итоговом CSS переменных уже нет. Быстро, просто, но не изменить в рантайме. - CSS --var - существуют в браузере, участвуют в каскаде, могут меняться через медиа- и контейнер-запросы, селекторы, JS. Идеальны для тем, адаптивов и динамики. 2) Примеры на пальцах Тема/бренд + тёмный режим (CSS)

:root { --primary: #4f46e5; }
.button { background: var(--primary); }

/* Тёмная тема меняет только значение */
.dark { --primary: #7c3aed; }

Адаптив без дублирования (CSS)

:root { --gap: 8px; }
@media (min-width: 768px) {
  :root { --gap: 16px; }
}
.grid { gap: var(--gap); }

Живая смена из JS (CSS)

document.documentElement.style.setProperty('--primary', '#22c55e');

Дизайн-токены, генерация классов (SCSS)

$colors: (
  primary: #4f46e5,
  success: #16a34a,
  danger:  #dc2626
);

@function color($name) { @return map-get($colors, $name); }

@each $name, $val in $colors {
  .text-#{$name} { color: $val; }
}

.btn--primary { background: color(primary); }

Флюидная типографика (CSS)

:root { --fs-h1: clamp(1.75rem, 1rem + 3vw, 3rem); }
h1 { font-size: var(--fs-h1); }

3) Когда что выбрать - Берите SCSS $var, если: - значения никогда не меняются в браузере; - нужно удобно генерировать кучу классов/правил из карт и циклов; - вы хотите ранний фейл при ошибке (компилятор сразу ругнётся). - Берите CSS --var, если: - требуется темизация, переключатели, A/B, кастомизация у пользователя; - значения зависят от медиа/контейнер-запросов; - хотите использовать calc(), clamp() и каскад как фичу. 4) Частые ошибки - «Почему $primary не меняется в тёмной теме?» - потому что это SCSS и оно уже подставлено при сборке. - var(--x) без фоллбэка:

  color: var(--link, #2563eb); /* ← безопаснее */
  

- Переопределение не там, где действует селектор. Помните: CSS-переменные каскадируют — задавайте их на нужной “высоте” (:root, .dark, контейнер). 5) Любимый гибрид-подход (очень практично) - Храню источник правды в SCSS-карте → генерю из неё CSS-переменные в :root. Так у меня есть и удобство сборки, и сила рантайма.

$tokens: (
  primary: #4f46e5,
  spacing: 8px,
  radius: 12px
);

:root {
  @each $k, $v in $tokens {
    --#{$k}: #{$v};
  }
}

/* дальше в CSS / компоненте */
.card {
  padding: var(--spacing);
  border-radius: var(--radius);
  background: var(--primary);
}
.dark { --primary: #7c3aed; }

6) Мини-практика (сделайте прямо сейчас) 1. Возьмите ваш $colors в SCSS и сгенерируйте из него :root { --color-name: value }. 2. Переключите тему добавлением класса .dark на <html> и переопределите 2–3 ключевых токена. 3. Переведите один медиазависимый размер (например, `gap`) на CSS-переменную как в примере выше. 7) Чеклист напоследок - Нужна динамика/тема/адаптив → CSS --var. - Нужна генерация/сборка/статичность → SCSS $var. - Большой проект? Делайте гибрид: токены → :root через SCSS. 👉@frontend_sovet