Последние посты
Frontend Советы
14 июн., 15:34
Совет по CSS 💡Знаете ли вы о свойстве shape-outside в CSS?Demo https://www.codewithshripal.com/playground/css/shape-outside👉@frontend_sovet
Frontend Советы
18 апр., 09:56изменён
🚀 Подборка полезных 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 и др. https://max.ru/tipsysdmin Типичный Сисадмин1C разработка 📌 https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1СПрограммирование C++📌 https://max.ru/cpp_lib Библиотека C/C++ разработчикаПрограммирование Go📌 https://max.ru/golang_lib Библиотека Go (Golang) разработчикаMAXBash Советы - Bash Scripting | Linux Terminal & Shell. Скри…Укроти командную строку. Пишем эффективные Bash-скрипты для сервера и десктопа. Магия текстовой обработки: Grep, Sed, Awk и регулярные выражения (Regex). Настр…Frontend Советы
18 апр., 09:20
⚛️ Прощай, 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,Frontend Советы
21 мар., 09:11
🚀 Подборка полезных 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 разработчикаMAXСистемный Администратор | Sysadmin Windows & Linux Server. …Купить рекламу: https://telega.in/m/i_odmin Блог практикующего админа. Настройка Windows Server, Active Directory (AD), GPO и терминальных серверов (RDP). Раб…Frontend Советы
19 мар., 07:17
CSS совет 💡Проявите креативность с текстом всего с 3 строками CSS-кода ✨👉@frontend_sovet
Frontend Советы
13 янв., 18:10
⚛️ Как я перестал бояться useEffect и упростил кодСегодня разберём проблему, которую я постоянно вижу в React-проектах - перегруженный useEffect.Типичная картина:useEffect(() => { fetchData(); logEvent(); updateTitle(); }, [user, token, locale, theme]);❌ Что здесь не так:🔘эффект делает слишком много 🔘зависимости растут как снежный ком 🔘любое изменение ломает логику 🔘сложно тестировать и дебажить✅ Что я начал делать вместо этогоFrontend Советы
16 дек. 2025 г., 08:28
🎨 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:Frontend Советы
28 нояб. 2025 г., 04:21
Как проверить, что данная строка является анаграммой другой строки в JavaScript?Анаграмма — приём, состоящий в перестановке букв или звуков определённого слова, что в результате даёт другое слово или словосочетание. Несколько примеров анаграмм на английском:1. evil = vile 2. a gentleman = elegant man 3. eleven plus two = twelve plus oneТак как же проверить, являются ли строки анаграммами в JS? На картинке пример кода, реализующий проверку с помощью встроенных функций.👉@frontend_sovet
Frontend Советы
18 нояб. 2025 г., 09:02
Шпаргалка по CSS👉@frontend_sovet
Frontend Советы
13 нояб. 2025 г., 21:25
Почему ваши UI-компоненты растут как снежный ком и как этого избежатьКогда один компонент делает всё: и рисует интерфейс, и тянет данные, и валидирует форму, и ещё 20 мелких задач. Такой код трудно поддерживать, тестировать и переиспользовать.🧩 Как понять, что компонент уже перерос нормы?- У него больше 200–250 строк. - Он содержит и бизнес-логику, и сетевые запросы, и рендер - всё вперемешку. - В нём много useEffect, часть из которых «о чём-то своём». - Вы боитесь открыть файл, потому что там хаос.🛠️ Что делать, чтобы этого избежать?1. Выносите бизнес-логику в кастомные хукиНапример, вместо:function UsersList() { const [users, setUsers] = useState([]);Frontend Советы
7 нояб. 2025 г., 07:52
🔥 Сегодня разберём одну мелочь, которая часто делает код новичков неаккуратным — жёстко прописанные размеры.Часто вижу такое:.button { width: 200px; height: 50px; }❌ Проблема в том, что такие кнопки «ломаются» при адаптиве — текст не влезает, ширина не подстраивается под экран.✅ Лучше так:.button { padding: 12px 24px; display: inline-block; }Теперь размер зависит от контента, а не от фиксированных значений. А если хочешь добавить гибкости — используй min-width или max-width, чтобы задать границы:Frontend Советы
27 окт. 2025 г., 17:56
Сделать ошибки TypeScript более красивыми и человекочитаемыми в VSCode с помощью Pretty TypeScript Errors.https://github.com/yoavbls/pretty-ts-errors👉@frontend_sovetFrontend Советы
19 окт. 2025 г., 09:40
🎨 Совет: не бойся CSS-переменных!Сегодня хочу показать вам, как CSS-переменные реально упрощают жизнь фронтенд-разработчику.Когда вы только начинаете изучать CSS, кажется, что переменные — это «фишка для продвинутых». Но на самом деле они помогают держать стиль проекта под контролем.Пример 👇:root { --main-color: #0ea5e9; --text-color: #1e293b; }body { background: var(--main-color); color: var(--text-color); }button { background: var(--main-color);Frontend Советы
29 сент. 2025 г., 18:16
🎨 CSS переменные: маленький хак для удобстваСегодня хочу показать простой, но очень полезный приём при работе с CSS переменными.Мы часто пишем что-то вроде::root { --primary-color: #4f46e5; } button { background: var(--primary-color); }Но что если переменная не определена? Браузер просто ничего не подставит. Чтобы подстраховаться, всегда задавайте fallback:button { background: var(--primary-color, blue); }Теперь, даже если где-то вы забыли определить --primary-color, кнопка всё равно останется синим. 👍Frontend Советы
15 сент. 2025 г., 09:10
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)Frontend Советы
12 сент. 2025 г., 07:27
🔥 Сегодня поговорим про CSS-переменные vs. SCSS-переменныеЯ часто вижу, что начинающие путаются - когда использовать --var, а когда $var. Давайте разберёмся 👇SCSS-переменные ($primary: #333;)- Работают на этапе сборки. - Нельзя менять в рантайме. - Удобны для хранения констант: цвета, размеры, шрифты.CSS Custom Properties (--primary: #333;)- Живут в браузере, можно менять динамически (например, через JS или media queries). - Поддерживают наследование. - Отлично подходят для темизации (светлая/тёмная тема).📌 Пример:$spacing: 16px;Frontend Советы
8 сент. 2025 г., 08:20
🔥 Сегодня хочу поделиться простым, но мощным советом по JavaScript.Часто студенты и новички в JS забывают про опциональную цепочку ?.. Она позволяет обращаться к свойствам объекта без риска получить ошибку Cannot read properties of undefined.Пример:const user = { profile: { name: "Oleg" } };// Без опциональной цепочки console.log(user.profile.name); // "Oleg" console.log(user.contact.email); // ❌ Ошибка!// С опциональной цепочкой console.log(user.contact?.email); // undefined, но без ошибкиFrontend Советы
5 сент. 2025 г., 06:04
🔥 CSS совет: не злоупотребляйте !importantСегодня хочу поговорить о том, что часто встречаю в коде студентов: !important везде, где только можно.Пример:.button { background: red !important; }Да, это работает. Но чем больше !important, тем труднее потом управлять стилями. Ведь он ломает естественный приоритет CSS.⚡ Что делать вместо этого?1. Использовать специфичность:.form .button { background: red; }Frontend Советы
4 сент. 2025 г., 20:05
🎯 Совет по JavaScript: избегайте лишних if-elseОчень часто новички пишут длинные цепочки if-else if-else. Например:function getRole(role) { if (role === "admin") { return "Администратор"; } else if (role === "user") { return "Пользователь"; } else if (role === "guest") { return "Гость"; } else { return "Неизвестная роль"; } }Такой код работает, но читается тяжело. Вместо этого лучше использовать объект как словарь:function getRole(role) { const roles = {Frontend Советы
28 авг. 2025 г., 05:22
5 ошибок новичков в CSS, которые тормозят прогрессСегодня покажу самые частые промахи студентов в CSS. Если узнаешь себя — значит пора исправлять 😉1️⃣ Использовать px везде подряд В адаптивной вёрстке лучше чаще применять rem, % и vh/vw. Так интерфейс будет масштабироваться гибко.2️⃣ Забывать про box-sizing: border-box Без него размеры блоков ведут себя странно: задаёшь ширину 200px, добавляешь паддинги — и блок уже «распух» больше чем нужно.3️⃣ Писать «стили по месту» вместо переиспользования Когда каждая кнопка со своим классом .btn1, .btn2... — это сигнал к бардаку. Лучше использовать общие компоненты.4️⃣ Игнорировать каскад и специфичность Если в коде появились !important — значит что-то идёт не так. Нужно понимать, какой стиль «побеждает» и почему.5️⃣ Не проверять сайт на разных экранах Верстать только под свой ноут — это как готовить еду, пробуя её вслепую. Используй
