💡 Что нового в веб-разработке: полезные техники и фичи HTML и CSS

📍 7 продвинутых HTML-трюков для улучшения веб-разработки

Наглядные примеры полезных элементов (<figure>, <details>, <dialog> и др.), повышающих семантику и интерактивность.

📍 Коллекция HTML/CSS лайфхаков

Советы по типографике, кликабельности, виртуальным клавиатурам и адаптивности интерфейсов.

📍 HTML и CSS ошибки, влияющие на доступность

Краткий гид по исправлению типовых недочётов, влияющих на восприятие контента пользователями с особыми потребностями.

📍 Магия CSS на практике: советы по вёрстке от гика

Полезные трюки: inset, стилизация без +, улучшение медиа-запросов и кнопок.

📍 CSS в 2025: какие фишки теперь доступны

Актуальные нововведения: вложенность, :user-valid, balance, расширенные возможности форматирования.

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

#свежак

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

Разработчик Javascript — от 150 000 ₽, удаленно (Москва)

Frontend developer (React) — от 180 000 до 250 000 ₽, удаленно (Москва)

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

Senior Frontend Developer — 4 200 —‍ 6 000 $, удаленно/помощь с релокацией (Грузия)

Frontend-developer — 120 000 - 200 000 ₽, удаленно (Москва)

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

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

#свежак

🎮 Код из книги: Тестирование Angular-компонентов с использованием Jasmine и Karma

Проблема: при разработке Angular-приложений важно обеспечить высокое качество кода и стабильность функционала. Отсутствие автоматизированных тестов может привести к увеличению количества ошибок и снижению доверия к продукту.

Решение: в книге Mastering Angular Test-Driven Development автор предлагает внедрить практики тестирования с использованием Jasmine и Karma.

Пример теста для компонента PercentPipe, который форматирует числа в проценты:

import { PercentPipe } from './percent.pipe';

describe('PercentPipe', () => {
  it('should create an instance', () => {
    const pipe = new PercentPipe();
    expect(pipe).toBeTruthy();
  });
});

Преимущества:

— Обеспечивает высокое качество и стабильность кода.
— Упрощает выявление и исправление ошибок на ранних стадиях разработки.
— Снижает риски при внесении изменений в кодовую базу.
— Ускоряет процесс разработки за счет автоматизации тестирования.

➡️ Еще больше полезных книг — в нашем канале @progbook

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

#буст

🚀 Новые возможности в React: View Transitions и Activity API

Инструменты предназначены для улучшения взаимодействия с пользователем и оптимизации производительности веб-приложений.

🔄 View Transitions

Этот компонент упрощает добавление анимаций при изменении состояния UI. Он автоматически определяет, какие части интерфейса должны быть анимированы, и применяет соответствующие CSS-анимations.

Пример использования:

<ViewTransition>
  <div>Контент с анимацией</div>
</ViewTransition>

Триггеры анимации:

startTransition(() => setState(...))
useDeferredValue(value)
<Suspense fallback={<Fallback />}>...</Suspense> 

Настройка анимации:

::view-transition-old(*) {
  animation: 300ms ease-out fade-out;
}
::view-transition-new(*) {
  animation: 300ms ease-in fade-in;
}

Эти анимации используют новый API startViewTransition, доступный в большинстве современных браузеров.

🔎 Activity API

Этот компонент позволяет скрывать и показывать части интерфейса без потери их состояния. Это особенно полезно для оптимизации производительности при рендеринге больших списков или сложных компонентов.

Пример использования:
анимации:

startTransition(() => setState(...))
useDeferredValue

Это позволяет React эффективно управлять рендерингом и минимизировать ненужные обновления DOM.

⚠️ Функции находятся на стадии эксперимента, и финальный API может измениться.

🔗 Источник

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

#свежак

👓 Как ускорить сборку с Webpack

Когда проект растёт, время сборки может стать серьёзной проблемой. Рассмотрим несколько методов для ускорения процесса с помощью Webpack.

1️⃣ Persistent Caching

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

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

cache: {
  type: 'filesystem',
}
➡️ WebPack не пересобирает всё с нуля, а использует кэшированные данные, что сокращает время сборки.

2️⃣ Tree Shaking

Удаление неиспользуемого кода, чтобы уменьшить размер бандла.

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

optimization: {
  usedExports: true,
}

➡️ Webpack отслеживает, какие части кода не используются, и исключает их из финальной сборки.

3️⃣ Module Federation

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

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

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

cache: {
  type: 'filesystem',
}

➡️

 WebPack не 

➡️ Модульная загрузка помогает минимизировать размер бандлов и ускоряет загрузку.

4️⃣ Минификация с Terser

Минификация и сжатие JavaScript-кода для уменьшения его размера.

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

optimization: {
  minimize: true,
  minimizer: [new TerserPlugin()],
}

➡️ Сжатие кода уменьшает его объём и ускоряет загрузку.

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

#буст

Лайф 🤩

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

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

❓Как сгенерировать пользовательский путь из PRD

Один из эффективных подходов — использование ChatGPT для генерации пользовательских путей на основе документации продукта.

Промпт:

Generate a user flow based on this PRD. Describe the pages, features, and major states.

Почему это полезно:

➡️ Позволяет быстро перейти от концепции к визуальному представлению интерфейса.

➡️ Помогает организовать мысли и определить основные компоненты интерфейса.

➡️ Подходит для различных проектов и технологий.

🔗 Этот подход был подробно описан в обсуждении на Reddit, где участники делились своими методами использования AI для ускорения разработки.

Пример использования:

Представим, что у нас есть PRD для приложения по доставке еды:

Generate a user flow based on this PRD: An app that allows users to order food from local restaurants, track delivery in real-time, and provide feedback after receiving the order.

ChatGPT предоставит описание пользовательского пути, включая страницы, функции и основные состояния.

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

#буст

⭐️ Запускаем кастомные скрипты в WebStorm

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

1️⃣ Создаем External Tool

➡️ В меню: File > Settings > Tools > External Tools

➡️ Добавьте новый инструмент, указав путь к скрипту (например, npm run lint или bash-скрипт) и настройте рабочую директорию

2️⃣ Привяжем горячую клавишу

➡️ Перейдите в Settings > Keymap и в поиске введите название External Tool

➡️ Правый клик → Add Keyboard Shortcut → назначь удобную комбинацию

💡 Комбинируйте запуск скриптов с WebStorm Live Templates и макросами для ещё более мощного ускорения.

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

#буст

🤨 Как избежать ошибок при использовании useEffect в React

useEffect — один из самых мощных, но одновременно и самых коварных хуков в React. Даже опытные разработчики порой сталкиваются с неожиданным порядком выполнения эффектов.

О чем статья:

📍 Как работает useEffect и как избежать типичных ошибок

📍 Почему порядок вызова эффектов зависит от React Fiber

📍 Чем useLayoutEffect отличается от useEffect

📍 Как понимать жизненный цикл компонентов через призму архитектуры React

С примерами, визуализациями и разбором кода — всё, что нужно для глубокого понимания и уверенной работы с эффектами в React 🔗

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

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

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

🧠 Проверьте внимательность и интуицию

В тексте на картинке скрылись 5 названий популярных фронтенд-технологий. Некоторые замаскированы, другие — спрятаны внутри слов или фраз.

Получилось найти хотя бы три? Пишите ответ в комментариях ✏️

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

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

📌 Подборка инструментов и плагинов в Figma

🔵 Figma to Code — автоматическая генерация React/HTML/Flutter кода из макетов.

➤ Отлично подходит для быстрой верстки прототипов и MVP.

🔵 Design Lint — помогает находить несогласованные отступы, цвета, стили и т.д.

➤ Снижает количество дизайнерских багов до передачи в разработку.

🔵 Figma Tokens — управление дизайн-токенами (цвета, типографика, spacing) напрямую в Figma.

➤ Подходит для проектов с дизайн-системами.

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

#свежак

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

Frontend Developer — 150 000 - 250 000 ₽, удаленно (Москва)

Teamlead Frontend (Vue) — удаленно (Москва)

Middle Frontend-разработчик — от 80 000 до 150 000 ₽, удаленно/офис (Краснознаменск)

Fullstack разработчик JS/TS — 150 000 —‍ 250 000 ₽, удаленно (Санкт-Петербург)

Fullstack-разработчик — удаленно (Санкт-Петербург)

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

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

#свежак

💻 Как обновить страницу без перезагрузки с Vite + HMR

Когда вы вносите правку, а браузер не мигает, не сбрасывает форму, не роняет состояние — это магия, имя которой Hot Module Replacement (HMR).

1️⃣ Используем Vite

npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev

➡️ Из коробки вы получаете мгновенное обновление компонентов React (или Vue/Svelte), без перезагрузки всей страницы.

Что реально происходит:

⏺ Изменения в коде детектятся

⏺ Только изменённый модуль перезагружается

⏺ Состояние сохраняется (например, открытая вкладка или введённый текст)

Как можно кастомизировать:

// vite.config.js
export default defineConfig({
  server: {
    hmr: {
      overlay: true, // показывает ошибки прямо в браузере
    },
  },
})

➡️ Можно отключить overlay или переопределить WebSocket-порт, если используете Docker или WSL.

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

#буст