😺 Как создавать адаптивные страницы: от медиазапросов до гибких сеток

Давайте посмотрим, что необходимо делать, чтобы адаптировать верстку и обеспечить стабильную работу сайта на разных устройствах.

1️⃣ Используем медиазапросы (@media), чтобы адаптировать стили под разные экраны

Применяем медиазапросы для того, чтобы настроить стили в зависимости от ширины экрана. Так мы получаем возможность уменьшать шрифт на мобильных устройствах или добавлять дополнительные отступы, чтобы контент не «слипался».

Пример кода:

/* Для мобильных устройств */
body {
font-size: 14px;
}

/* Для экранов шириной от 768px */
@media (min-width: 768px) {
body {
font-size: 16px;
}
}

2️⃣ Применяем гибкие сетки с помощью Flexbox и CSS Grid

Flexbox и CSS Grid дают нам возможность создавать макеты, которые «тянутся» или сжимаются в зависимости от размера экрана.

Пример с Flexbox:

.container {
display: flex;
flex-wrap: wrap;
}

.item {
flex: 1 1 30%;
margin: 10px;
}

Пример с CSS Grid:

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}

.item {
background-color: #f0f0f0;
padding: 20px;
}

3️⃣ Используем относительные единицы измерения для гибкости

Вместо фиксированных значений мы выбираем такие единицы измерения, как em, rem, %, чтобы размеры и отступы изменялись в зависимости от размера экрана.

Пример кода:

.container {
width: 80%;
padding: 2rem;
}

4️⃣ Придерживаемся подхода mobile-first

Такой подход позволяет оптимизировать скорость загрузки и повысить производительность для мобильных пользователей.

Пример кода:

Для мобильных устройств

body {
font-size: 14px;
}

Для экранов шириной от 768px
@media (min-width: 768px) {
body {
font-size: 16px;
}
}

5️⃣ Тестируем сайт на разных устройствах

Используем инструменты вроде BrowserStack или проверяем в режиме мобильных устройств в браузерах. Это помогает найти и устранить все проблемы до релиза.

🚀 Советы:

• Используйте max-width для медиазапросов, чтобы стили применялись на экранах с шириной меньше указанного значения.

• Применяйте min-width для добавления стилей на более крупных экранах.

• Активно используйте clamp() для динамической настройки размеров в зависимости от размера экрана.

• Всегда применяйте object-fit: cover; для изображений, чтобы они корректно масштабировались в контейнерах.

🐸 Библиотека фронтендера

#буст

😰 Мошенники получается….

🐸 Библиотека фронтендера

#развлекалово

💬Промпт для создания формы обратной связи с помощью Tailwind CSS

Если вам нужно быстро и эффективно разработать форму обратной связи с минимальными усилиями — не пренебрегайте Tailwind CSS.

Для удобства можно использовать данный запрос, но обязательно проверяйте на точность (нам выдал без метатега кодировки UTF-8).

PROMPT:

Generate a semantic HTML and Tailwind CSS "Contact Support" form consisting of the user's name, email, issue type, and message. The form elements should be stacked vertically and placed inside a card.

Также вы можете использовать универсальный промпт для других задач:

Generate a semantic and accessible HTML and (framework) CSS [UI component] consisting of [component parts]. The [component parts] should be [layout].

🐸 Библиотека фронтендера

#буст

🚀 Как ускорить React на 300%: реальный кейс

Виртуальный DOM — вещь полезная, но не всемогущая. Если каждый клик запускает цепочку ререндеров, он не спасёт. Со временем даже шустрое React-приложение превращается в тормозящего гиганта.

Что в статье:

📍 Разбор реального кейса: как e-commerce приложение превратилось из быстрого в тормозное, и что помогло это исправить

📍 Причины медленной работы: ненужные ререндеры, монолитные компоненты, неоптимальный context

📍 Использование инструментов: React DevTools, why-did-you-render, профилирование

📍 Практические примеры кода «до» и «после»

📍 Хаки и техники: React.memo, useCallback, useMemo, react-window, динамическая загрузка компонентов

🔗 Читать статью

🐸 Библиотека фронтендера

🙂 Как не утонуть в дедлайнах и при этом успевать жить

Иногда кажется, что жизнь — это просто список задач в Jira. Только без кнопки “Complete” и с багами в расписании. Когда работаешь фронтендером, особенно в стартапе или на жестком проекте, легко потеряться между фичами, срочными хотфиксами и «вот это надо было ещё вчера».

Моя история:

Был у меня период, когда я всерьёз думал, что «выйти в оффлайн» — это привилегия. Дни сливались в один длинный поток: созвон — коммит — правка — деплой — баг — снова правка.
Я ел на бегу, спал плохо, даже выходные проваливались в режим «да я тут чуть-чуть подфикшу, это на 5 минут» (никогда не 5 минут).

Однажды просто поймал себя на мысли:
«А я вообще живу, или просто существую между спринтами?»

С тех пор стал менять подход:

• Планировать не только работу, но и отдых. Прям в телефоне ставил напоминание «погулять» или «позвонить другу».

• Старался заканчивать день в нормальное время, даже если не всё сделал. Потому что «успеть всё» — это миф.

• Начал говорить честно команде, если не вывозил. Без героизма. Просто по-человечески.

• И главное — напоминал себе, что я не машина. Я не создан быть продуктивным 24/7.

💡 Что понял:

Работа — важна. Но если ты сам выпадаешь из жизни, то и смысла в этих дедлайнах немного. А фронтенд — он никуда не денется. Зато твоё здоровье и счастье — может.

А вы как справляетесь, когда накрывает волной задач? Что помогает не терять себя?

Делитесь в комментариях ⬇️

🐸 Библиотека фронтендера

#междусобойчик

😎 Zustand и DevTools: лайфхаки для управления состоянием в React

Интеграция библиотеки Zustand с React DevTools превращает её в мощный инструмент для быстрого отслеживания и отладки состояния в реальном времени.

1️⃣ Сначала установим Zustand

npm install zustand

Или с использованием yarn:

yarn add zustand

Также убедитесь, что у вас установлены React DevTools в браузере.

2️⃣ Теперь добавим поддержку DevTools в ваше хранилище Zustand. Для этого оборачиваем хранилище в devtools middleware:

import create from 'zustand';
import { devtools } from 'zustand/middleware';

const useStore = create(devtools((set) => ({
bears: 0,
increase: () => set((state) => ({ bears: state.bears + 1 })),
decrease: () => set((state) => ({ bears: state.bears - 1 }))
})));

Использование Redux DevTools для дополнительных функций

Если вы хотите использовать расширенные возможности, такие как time travel (перемещение по истории состояния), вы можете настроить Redux DevTools с Zustand.

3️⃣ Установим Redux DevTools:

npm install simple-zustand-devtools --dev

Или:

yarn add simple-zustand-devtools --dev

4️⃣ Подключим Redux DevTools:

import create from 'zustand';
import { mountStoreDevtool } from 'simple-zustand-devtools';

const useStore = create((set) => ({
bears: 0,
increase: () => set((state) => ({ bears: state.bears + 1 })),
decrease: () => set((state) => ({ bears: state.bears - 1 }))
}));

if (process.env.NODE_ENV === 'development') {
mountStoreDevtool('Store', useStore);
}

Какие плюсы это использовать:

➡️ Вы легко увидите, как меняется ваше состояние при каждом действии, что помогает быстро находить ошибки.

➡️ Перемещайтесь по истории состояний, чтобы понять, что именно изменилось, и как это повлияло на приложение.

➡️ React DevTools предоставляет удобный интерфейс, который позволяет отслеживать состояние и взаимодействовать с ним без необходимости писать дополнительный код.

➡️ Если в вашем проекте используется несколько хранилищ Zustand, вы сможете отслеживать их изменения одновременно, что особенно полезно в крупных приложениях.

🐸 Библиотека фронтендера

#буст

💧📈 Как сделать гидратацию в React 19 по настоящему эффективной

До выхода React 19 процесс гидратации оставлял желать лучшего: проблемы с производительностью, избыточное выполнение JavaScript и задержки в интерактивности тормозили создание быстрых и отзывчивых приложений.

В статье рассказывается про то, как:

1️⃣ Новые подходы в React 19 изменяют процесс гидратации

2️⃣ Выборочная и прогрессивная гидратация позволяют ускорить взаимодействие с пользователем

3️⃣ Потоковый серверный рендеринг с Suspense снижает нагрузку на клиент

4️⃣Серверные компоненты устраняют необходимость в гидратации для статических частей интерфейса.

Как новые возможности React 19 помогут вам создавать быстрее загружающиеся и более отзывчивые приложения, читаем по ссылке ⬇️

Статья 🔗

� Библиотека фронтендера

💭 Документация у него в голове

🐸Библиотека фронтенда

#развлекалово

🚬 TypeScript вне учебников: продвинутая подборка для тех, кто уже в теме

1️⃣ 15 Advanced TypeScript Tips and Tricks You Might Not Know

Автор делится продвинутыми приёмами TypeScript, включая использование infer, шаблонных литералов и других мощных фич.

2️⃣ Thoughts on State Management Libraries in the React Compiler Era

Обзор изменений в управлении состоянием с приходом React Compiler и как это влияет на необходимость использования сторонних библиотек.

3️⃣ Zod: TypeScript-first Schema Validation

Zod предлагает декларативный подход к валидации схем с автоматическим выводом типов, упрощая разработку и повышая надёжность кода.

🐸 Библиотека фронтенда

#свежак

🌸 Вопросы с собеседований: что такое замыкания (closures)

Замыкание — это функция, которая «запоминает» свою лексическую среду, даже когда она выполняется за пределами этой среды. Замыкания позволяют функции доступ к переменным, которые были объявлены в её внешнем контексте.

На фото функция inner сохраняет ссылку на переменную count из функции outer, создавая замыкание.

🐸 Библиотека фронтенда

#междусобойчик

😳 Топ-вакансий для фронтендеров за неделю

Frontend Developer — удаленка/Офис (Москва/Санкт-Петербург)

Frontend Developer (Vue.js) — от 250 000 ₽, удаленно (Москва)

Разработчик JS (Middle) — от 150 000 ₽ до 300 000 ₽, удаленно (Казань)

Frontend-разработчик — офис (Санкт-Петербург)

Frontend-разработчик — 180 000 - 190 000 ₽, удаленно (Москва)

➡️ Еще больше топовых вакансий — в нашем канале Javascript jobs

🐸 Библиотека фронтендера

#свежак

🔧 Как устранить FOUC

FOUC (Flash of Unstyled Content) — это кратковременное отображение неоформленного HTML перед применением CSS, что может негативно сказаться на пользовательском опыте.

Почему возникает:

📍 Асинхронная загрузка стилей.

📍 Динамические изменения DOM через JavaScript до полной загрузки стилей.

📍 Использование async или defer при подключении скриптов, что может привести к несогласованности в порядке загрузки ресурсов.

Как устранить:

1️⃣ Предзагружаем критичные стили

<link rel="preload" href="/styles/main.css" as="style">

2️⃣ Встраиваем Critical CSS прямо в HTML

<style>
body { margin: 0; font-family: system-ui; }
</style>

Таким образом, мы обеспечиваем мгновенное появление базового оформления без скачков.

3️⃣ Минимизируем блокировки рендера

• Добавляем defer к скриптам
• Переносим второстепенные стили вниз
• Избавляемся от лишних <link> в <head>

4️⃣ Оптимизируем изображения

Пересобираем графику в WebP или AVIF, уменьшаем вес — и пользователь видит контент быстрее.

5️⃣ Переходим на SSR

Используем серверный рендеринг (Next.js, Astro и др.), чтобы отправлять уже отрендеренную страницу, а не заставлять браузер гадать, как это должно выглядеть.

💡Следуя приведённым рекомендациям, вы сможете обеспечить плавное и профессиональное отображение вашего веб-приложения с самого начала.

🐸 Библиотека фронтендера

#буст