Frontend Советы

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

🎨 CSS переменные: маленький хак для удобства Сегодня хочу показать простой, но очень полезный приём при работе с CSS переменными. Мы часто пишем что-то вроде: :root { --primary-color: #4f46e5; } button { background: var(--primary-color); } Но что если переменная не определена? Браузер просто ничего не подставит. Чтобы подстраховаться, всегда задавайте fallback: button { background: var(--primary-color, blue); } Теперь, даже если где-то вы забыли определить --primary-color, кнопка всё равно оста...

🎨 Совет: не бойся CSS-переменных! Сегодня хочу показать вам, как CSS-переменные реально упрощают жизнь фронтенд-разработчику. Когда вы только начинаете изучать CSS, кажется, что переменные — это «фишка для продвинутых». Но на самом деле они помогают держать стиль проекта под контролем. Пример 👇 :root { --main-color: #0ea5e9; --text-color: #1e293b; } body { background: var(--main-color); color: var(--text-color); } button { background: var(--main-color); } Теперь вы можете изменить цветовую схе...

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

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

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

🎨 CSS Tip: Как скрыть контент визуально, но оставить его доступным В погоне за минималистичным дизайном мы часто используем иконки без подписей. Но для пользователей скринридеров (и для SEO!) кнопка без текста - это проблема. ❌ Ошибка: Использовать display: none, visibility: hidden или opacity: 0. Эти свойства полностью убирают элемент из дерева доступности. Скринридер его просто проигнорирует. ✅ Решение: Паттерн .visually-hidden (или .sr-only). Этот класс заставляет элемент «исчезнуть» с экран...

🔥 Сегодня хочу поделиться простым, но мощным советом по 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, но без ошибк...

🔥 Сегодня разберём одну мелочь, которая часто делает код новичков неаккуратным — жёстко прописанные размеры. Часто вижу такое: .button { width: 200px; height: 50px; } ❌ Проблема в том, что такие кнопки «ломаются» при адаптиве — текст не влезает, ширина не подстраивается под экран. ✅ Лучше так: .button { padding: 12px 24px; display: inline-block; } Теперь размер зависит от контента, а не от фиксированных значений. А если хочешь добавить гибкости — используй min-width или max-width, чтобы задать ...

⚛️ Как я перестал бояться useEffect и упростил код Сегодня разберём проблему, которую я постоянно вижу в React-проектах - перегруженный useEffect. Типичная картина: useEffect(() => { fetchData(); logEvent(); updateTitle(); }, [user, token, locale, theme]); ❌ Что здесь не так: 🔘эффект делает слишком много 🔘зависимости растут как снежный ком 🔘любое изменение ломает логику 🔘сложно тестировать и дебажить ✅ Что я начал делать вместо этого 1. Один useEffect - одна причина useEffect(() => { fetchDa...