Как переносить «висячие» слова с помощью JavaScript

Тексты, в которых на новой строке одиноко торчит «в», «на» или «и», сразу теряют в читаемости. В этой статье — короткий, но полезный приём: как с помощью JavaScript автоматически заменять пробелы после коротких слов на неразрывные и избавляться от висячих слов. Работает и для HTML-содержимого, и для Markdown. Минимум кода — максимум пользы для интерфейса и редактурной чистоты.

#фронтенд #javascript #ux

Mobile‑first или Desktop‑first? Как выбрать с чего начать вёрстку

При запуске проекта важно определить: что приоритетнее — мобильный или десктопный интерфейс? Эта статья объясняет:

— Почему mobile‑first = UX для пальцев: удобство планшетов и смартфонов, индексирование Google.
— Когда desktop‑first выигрывает: дашборды, CRM, интерфейсы с насыщенным взаимодействием.
— Простые примеры медиазапросов (@media (min-width) vs max-width) и практические советы по написанию адаптивного CSS.

С чего обычно начинаете вы?

#фронтенд #css #адаптивность

#простымисловами: Что такое srcset и зачем он нужен

Обычный атрибут src в теге <img> указывает одну-единственную картинку. Но что делать, если пользователи заходят с телефонов, ретина-экранов и 4K мониторов? Показывать одну и ту же версию — значит терять в качестве или перегружать страницу.

Вот тут и приходит на помощь srcset. С его помощью можно указать несколько вариантов одного изображения, а браузер сам выберет нужное под конкретный экран.

<img 
  src="image-400.jpg"
  srcset="
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 400px,
         (max-width: 1000px) 800px,
         1200px"
  alt="Пример адаптивного изображения">

🔍 Что здесь происходит:

— src — запасной вариант на случай, если браузер не поддерживает srcset.
— srcset — список изображений с их шириной.
— sizes — помогает браузеру понять, сколько пикселей реально нужно на экране.

В результате:

📱 На телефоне загрузится лёгкое изображение.

💻 На ноутбуке — среднее.

🖥 А на 4K-мониторе — чёткое и большое.

❗️ Важно: src обязателен, так как в браузере пользователя может отсутствовать поддержка srcset.

#фронтенд #html

Сайт-портфолио нового уровня

Следите за мыслью. Что будет, если сделать интерактивный 3D-офис, в котором стоит с ЭЛТ-монитором, в который встроено нечто напоминающее Windows 95, в которой есть игры и браузер, в который встроен реальный сайт с портфолио? А получится проект Генри Хеффернана, созданный с использованием React, Three.js и WebGL.

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

Заценить и оценить можно тут: https://henryheffernan.com

#фронтенд #webgl #threejs #портфолио

Упрощаем работу с регулярками в JavaScript

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

#фронтенд #javascript #regexp

Зачем нужен BFF: архитектура, которая избавит фронтенд от боли

Когда у вас один API сразу для разных платформ, это усложняет логику, удлиняет ответы и вообще делает отладку и работу с кодом сложнее. Здесь на помощь приходит BFF — Backend For Frontend — прослойка между клиентскими приложениями и основным API.

В статье понятно объясняется, зачем она нужна, какие задачи она решает (сбор и трансформация данных, адаптация под устройства, кэширование), а также её плюсы и минусы.

🤔 А как у вас организован диалог фронта и бэка?

#бэкенд #фронтенд #bff

Адаптивные изображения и подписи на CSS: сила container-queries и :has()

Теперь не обязательно «гадать», подгоняя стили картинок и подписей под медиазапросы — CSS получил мощные инструменты. В статье показано, как с помощью container-queries и :has() адаптировать изображения к размеру блока и менять расположение и стили элементов в зависимости от размеров экрана или блока. Примеры кода и пояснения помогут освоить эти новые фишки CSS уже сегодня.

#фронтенд #css #адаптивность

Смена секций по скроллу

Вы наверняка видели сайты, где при скролле происходит не плавная прокрутка, а замена секций сайта. Они либо наплывают друг на друга, либо трансформируются и так далее.

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

#видео #фронтенд

6 технологий для хранения данных в браузере

Данные пользователя можно хранить не только на сервере. В статье разобраны 6 актуальных способов сохранить информацию прямо в браузере: от привычных cookies и localStorage до более продвинутых IndexedDB, OPFS и WASM SQLite.

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

#фронтенд #браузер

CSS Loaders: готовые анимации загрузки без JS

Когда нужно быстро добавить симпатичный индикатор загрузки — не обязательно писать его с нуля. На css-loaders.com собраны десятки готовых CSS‑анимаций: спиннеры, полоски, точки, волны и даже креативные 3D‑эффекты. Все варианты работают без JavaScript и легко кастомизируются под ваш дизайн. Просто копируйте код и вставляйте в проект.

#фронтенд #css #ui

От React веет безумием, но все об этом молчат

Многие привыкли считать React эталоном фронтенда. Но если приглядеться, он вызывает много вопросов: рекурсивные хуки, запутанные деревья состояний, неочевидное смешение UI и побочных эффектов в одном месте.

В статье автор делится наблюдениями о том, как популярный фреймворк за годы оброс странностями и компромиссами — и почему это ощущение хаоса не стоит замалчивать

Что вас больше всего раздражает в React-проектах? Расскажите в комментариях!

#фронтенд@tproger_web #react@tproger_web

Partial Keyframes: анимация в CSS без лишней работы

Иногда нужно анимировать только одно свойство, оставив остальные нетронутыми. В статье объясняется техника partial keyframes, которая позволяет писать ключевые кадры для одного свойства, оставляя, например, изначальное значение нетронутым. Это упрощает код и делает анимации более гибкими. С примерами кода и визуальными иллюстрациями — всё понятно даже тем, кто только начинает осваивать CSS‑анимации.

#фронтенд #css #анимация

Astro: как сделать сайт молниеносным и приятным

Думали, что фронтенд сегодня — это обязательно килобайты JS и бесконечные SPA? Необязательно. В видео автор показывает, как с помощью Astro и архитектуры островов собрать адаптивный, быстрый и красивый сайт: с Tailwind, React или Vue-компонентами там, где нужна интерактивность, и минимальным JavaScript или максимальным TypeScript в остальном.

Пошагово: от создания проекта до интеграции динамических роутов, работы с серверными данными и оптимизации загрузки. И всё это — за один вечер.

#фронтенд #astro #оптимизация

JSON в веб‑разработке: как работать правильно и не ломать данные

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

В статье собраны советы и примеры: как парсить и сериализовать данные без потерь, избегать ловушек с undefined и циклическими ссылками, и что учесть при работе с большими файлами.

Признавайтесь, косячили с JSON?

#фронтенд #бэкенд #json

Front-End Checklist: не забудьте про важные мелочи перед релизом

Этот инструмент спасёт ваши нервы перед запуском проекта. На frontendchecklist.io собран список обязательных пунктов для фронтенд-разработчика: SEO, доступность, производительность, лучшие практики, безопасность и так далее. Всё разбито по категориям и уровням приоритета, так что можно пройтись по чеклисту и убедиться, что ничего не упущено.

#фронтенд #инструменты

Почему push() может навредить вашему коду — и как писать лучше

На первый взгляд безобидный метод массива push() может испортить данные, запутать логику и вызвать баги. Особенно это заметно в React и других реактивных средах. В статье — наглядно и с примерами: чем опасна мутация массивов, как это приводит к скрытым ошибкам и какой подход используют опытные разработчики вместо push().

А вы отказались от push() или всё ещё используете?

#javascript #фронтенд

Hack Frontend: тренируйтесь для собеседования с огоньком

Если вы мечтаете прокачать фронтенд‑скиллы и спокойно заходить на тех‑интервью — обратите внимание на Hack Frontend. Это платформа, где вы сможете отточить навыки и подготовиться к успешному собеседованию.

Что внутри:

— Современный фронтенд‑стек и лучшие практики.
— Задания, которые реальнее всего встретить на интервью.
— Построено для реализации — вы сразу тренируетесь на реальных примерах, не просто читаете теорию.

#фронтенд #тренажер #javascript

Псевдоэлемент vs Псевдокласс: Практические советы для реальных проектов

Что такое псевдоэлемент?
Псевдоэлемент позволяет добавить виртуальный элемент внутрь выбранного, не изменяя HTML-разметку. Это похоже на добавление штампа к документу: элемент остаётся прежним, а его оформление дополняется декоративными деталями, например, первой буквой абзаца или декоративной линией.

Пример:

p::first-letter {
  font-size: 2em;
  color: red;
}

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

Псевдоэлементы бывают следующими:

— ::before — добавляет контент перед содержимым элемента.
— ::after — добавляет контент после содержимого.
— ::first-letter — стилизует первую букву элемента.
— ::first-line — оформляет первую строку текста.
— ::grammar-error — позволяет оформить часть документа, содержащую грамматическую ошибки, подсвеченную браузеров.
— ::marker — стилизует поле маркера пункта, как маркированного, так и нумерованного.
— ::selection — соответствует части документа, которая была выбрана.
— ::spelling-error — как и ::grammar-error выделяет ошибку, отмеченную браузером, но уже орфографическую

Что такое псевдокласс?
Псевдокласс меняет внешний вид элемента в зависимости от состояния, как будто элемент «перевоплощается» в зависимости от вашего взаимодействия с ним. Это работает, когда пользователь наводит курсор, активирует элемент или переводит его в фокус.

Пример:

a:hover {
  color: green;
}

Псевдоклассы применяются для управления активностью элемента — от наведения до фокуса — и помогают улучшить интерактивность пользовательского интерфейса.

Псевдоклассов очень много. Вот некоторые популярные виды псевдоклассов:
— :hover — применяется при наведении курсора.
— :active — активируется во время нажатия.
— :focus — используется, когда элемент находится в фокусе (например, форма ввода).
— :visited — для посещённых ссылок.
— :not() — позволяет исключить элементы из селектора.

Когда использовать каждый вариант?
Псевдоэлементы добавляют декоративные или вспомогательные элементы визуально, не нарушая структуру HTML. Если вам нужно, чтобы страница выглядела ярче или содержала дополнительные визуальные подсказки (например, стрелочки, рамки, иконки), выбирайте псевдоэлементы.

Псевдоклассы же изменяют внешний вид уже существующих элементов в зависимости от их состояния. Это удобно для создания интерактивного интерфейса: ссылки изменяют цвет при наведении, поля выделяются в фокусе и так далее.

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

Также будьте внимательны к вопросам доступности: добавляемый декоративный контент не должен нарушать читаемость страницы или мешать пользователям с ограниченными возможностями. Кроме того, чрезмерное использование может усложнить поддержку кода, поэтому старайтесь использовать именно те варианты, которые действительно улучшают интерфейс и не дублируют функционал HTML.

Как вы применяете псевдоэлементы и псевдоклассы в своих проектах? Поделитесь опытом в комментариях!

#простымисловами #фронтенд #css

Асинхронная итерация по-новому: как работает Array.fromAsync в JavaScript

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

В статье — нюансы работы метода, примеры из жизни и сценарии, где он может здорово сэкономить нервы и строчки кода.

#javascript #фронтенд