7 хаков HTML: нестандартные решения в истории гипертекстовой разметки

#почитать

Сегодня мы решили вспомнить, как раньше веб-мастера обходили ограничения разметки. История веб-разработки полна креативных находок — технологии не всегда успевали за фантазией пользователей. На заре девяностых, чтобы выделиться на фоне конкурентов, веб-разработчики искали творческие решения. Собрали подборку из 7 популярных приемов и подходов, которые использовали веб-мастера, чтобы выйти за пределы ограничений HTML.
Раньше возможности для создания первых сайтов были предельно ограничены: стандартные шрифты, минимум графики и полотна текста. Недостаток инструментов компенсировали изобретательностью. Она позволяла решать, казалось бы, невозможные задачи. Вспоминаем самые популярные из них.

⏱Читать статью

Использование currentColor

#почитать

Нужен ли currentColor? Не совсем, лучше использовать CSS переменные. Однако он всё равно имеет свою ценность, и об этом стоит поговорить.

⏱Читать статью

Библиотеки JavaScript для работы с таблицами: обзор лучших решений

#почитать

Таблицы в веб-разработке — вещь незаменимая. Они помогают удобно структурировать данные, будь то финансовые отчёты, списки товаров или статистика пользователей. Но просто сверстать таблицу — половина дела, ведь часто нужно добавить сортировку, фильтрацию, редактирование и другие функции. Именно для этого существуют специализированные JavaScript-библиотеки.

⏱Читать статью

Спокойное подчёркивание текста

#почитать

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

⏱Читать статью

Автоматический подбор браузером контрастного цвета в CSS

#почитать

Вам когда-нибудь хотелось, чтобы можно было написать простой CSS для объявления цвета, после чего браузер сам бы определял, чёрный или белый должен сочетаться с этим цветом? Теперь это возможно благодаря contrast-color(). В статье мы объясним, как это работает.
Представьте, что вы разрабатываете веб-сайт или веб-приложение, и в дизайне требуется куча кнопок с разными цветами фона. Для обработки цвета фона можно создать переменную --button-color, а затем присваивать ей разные значения.
Иногда фон кнопки будет тёмным цветом, а текст кнопки должен быть белым для создания контрастности. В других случаях фон светлее, поэтому текст должен быть чёрным.

⏱Читать статью

🪐 Новые вакансии фронтендеров


🚀 Frontend-разработчик в ДТ-Софт, 230 000 - 310 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-dt-soft-f382489d

🚀 Frontend-разработчик в Алабуга.Политех, oт 150 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-alabugapoliteh-6b3633d0

🚀 Frontend-разработчик в OQTACORE, oт 80 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-oqtacore-e80afb43

🚀 Frontend Developer в Vital Partners, 600 000 - 800 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-developer-vital-partners-a2f24c92

🚀 Frontend-разработчик в Placebo/25, 110 000 - 150 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-placebo25-2e5b0ca6

🚀 Junior frontend-разработчик (Vue.js), 60 000 - 155 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/junior-frontend-razrabotchik-vuejs-nda-9c5ebd30

🚀 Фронтенд-разработчик в Гуддело, oт 35 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-guddelo-cd81dfd9

🚀 Фронтенд-разработчик в Data World, до 200 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-data-world-ad1d66b9

🚀 Фронтенд-разработчик в Продуктовая лаборатория Mish, 160 000 - 250 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-produktovaya-laboratoriya-mish-e457265f

🚀 Fullstack Developer (React/Java) в Транслогика, 200 000 - 230 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/fullstack-developer-reactjava-translogika-0cf0dc4f


Больше вакансий здесь ⤵️
https://jobrocket.ru/?categories=frontend

Красим посещённые ссылки: псевдоклассы :link, :visited и :any-link

#почитать

Когда вы создаёте веб-страницу, ссылки — один из ключевых элементов интерфейса. Они помогают пользователям перемещаться по сайту или переходить на внешние ресурсы. Но как сделать так, чтобы пользователь сразу понял, какие ссылки он уже посещал, а какие — нет? На помощь приходят псевдоклассы CSS :link, :visited и :any-link. Эти инструменты позволяют стилизовать ссылки в зависимости от их состояния, улучшая навигацию и пользовательский опыт. В этой статье мы разберём, как они работают, их историю, особенности и как безопасно использовать их в 2025 году.

Псевдоклассы :link и :visited существуют с самого зарождения CSS, появившись в спецификации CSS1 в 1996 году. Тогда веб был преимущественно текстовым, и ссылки играли центральную роль в навигации. Разработчики хотели, чтобы пользователи могли визуально отличать непосещённые ссылки от тех, на которые они уже кликали. :link отвечал за стилизацию непосещённых ссылок, а :visited — посещённых, основываясь на истории браузера.

Псевдокласс :any-link появился значительно позже, в спецификации CSS Selectors Level 4, чтобы упростить стилизацию ссылок независимо от их состояния (посещённые или нет). Он стал частью стандарта в 2022 году и быстро получил поддержку в браузерах. Эти псевдоклассы остаются важной частью веб-разработки, помогая создавать интуитивно понятные интерфейсы.

⏱Читать статью

Изменение стиля по умолчанию вложенного заголовка h1

#почитать

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

⏱Читать статью

События keydown и keyup в JavaScript: управление клавиатурой

#почитать

Когда вы создаёте интерактивные веб-приложения, взаимодействие с клавиатурой пользователя становится важной частью. Хотите, чтобы ваш сайт реагировал на нажатие клавиши Enter для отправки формы? Или, может, мечтаете сделать простую браузерную игру, где персонаж движется при нажатии стрелок? Для этого в JavaScript есть события keydown и keyup. Они позволяют отслеживать, когда пользователь нажимает или отпускает клавишу. В этой статье мы разберём, как работают эти события, их историю, особенности и как безопасно использовать их в 2025 году.

⏱Читать статью

Как красиво признаться в любви не покупая цветы и конфетки с плюшевым мишкой на память, используя чистый HTML и CSS с JS

#почитать

Хочу поделиться идеей, как сделать признание в любви особенным, запоминающимся и искренним, не прибегая к классическим цветам или банальным текстам в телеграме/вацапе на миллиард строк. Я расскажу про интерактивный веб-сайтик, который можно создать своими руками, чтобы передать свои чувства. Это не просто слова, а целая история, которая разворачивается на экране, погружая человека в атмосферу тепла и эмоций. Код, который я приложил, пример такого проекта, и сейчас я объясню, как он работает и почему это может стать идеальным способом признаться в любви.

⏱Читать статью

Инкапсуляция UI на примере чат-виджета

#почитать

В рамках платформенного стрима мы занимаемся разработкой и развитием платформы для создания своих чат‑ботов. Cделать хорошего и полезного бота временами бывает сложно, поэтому для помощи разработчикам мы создаем инструменты, которые помогают ускорить разработку и упростить работу с ботами. В этой статье я расскажу, как реализовать изолированный UI, грамотно организовать код на примере виджета чата, и какие проблемы могут возникнуть в процессе разработки.
В мире разработки, как и в жизни, мы постоянно балансируем между сотрудничеством и самостоятельностью: каждый компонент системы, как человек в обществе, хочет быть особенным и уникальным, но при этом быть готовым к сотрудничеству с другими. Мы исследуем технический подход, который помогает применить эту философию на практике: как создать программный элемент, который будет самостоятелен, но в то же время будет хорошо взаимодействовать с остальной системой.

⏱Читать статью

CSS Scroll-Driven Animations: что это, зачем нужно и как начать пользоваться

#почитать

Раньше, чтобы анимировать что-то при прокрутке, приходилось писать JavaScript. Слушать события scroll, вычислять позиции элементов, руками задавать стили. Это было сложно и работало неэффективно. Но в 2025 в CSS появилась нормальная нативная поддержка скролл-анимаций.
Частичная поддержка есть в Chrome 115+, Edge 115+ и Opera 117+, с флагами — в Firefox 110+. Ждём ещё Safari.

⏱Читать статью

Всё, что вы хотели знать, но стеснялись спросить о кастомных курсорах в CSS

#почитать

Курсоры могут сделать сайт как гораздо удобнее, так и намного хуже. В этой статье обсудим встроенные курсоры CSS и посмотрим, как с помощью CSS (и немножко — с JavaScript) создавать кастомные курсоры, чтобы ваш сайт лучше запоминался пользователям.
Также сравним плюсы и минусы применения CSS и JavaScript для создания кастомных курсоров. Обсудим, когда стоит отказаться от курсоров по умолчанию и как учитывать потребности пользователей с ограниченными возможностями. Чтобы во всё это вникнуть, вам понадобятся базовые представления об HTML, CSS и JavaScript.

⏱Читать статью

Правило @import в CSS: модульность и организация стилей

#почитать

Если вы только начинаете свой путь в веб-разработке, то наверняка уже столкнулись с необходимостью писать CSS-код так, чтобы он был понятным, организованным и легко поддерживаемым. Представьте, что у вас есть проект с десятками компонентов, и все стили свалены в один огромный файл. Кошмар, правда? Вот тут на сцену выходит правило @import в CSS, которое позволяет загружать стили из других файлов, делая ваш код модульным и структурированным. В этой статье мы разберём, как работает @import, его историю, особенности использования и почему оно до сих пор актуально в 2025 году.

⏱Читать статью

Декодирование CSS селекторов: :has(:not) и :not(:has)

#почитать

При комбинировании CSS функций вложенность функций имеет значение. В статье мы рассмотрим разницу между :has(:not) и :not(:has), а также то, как подходить к декодированию CSS селекторов, использующих эти вложенные CSS функции.

⏱Читать статью

10 свойств в CSS о которых вы, вероятно, не знали

#почитать

Если вы только начинаете разбираться в CSS, скорее всего, вам кажется, что мир стилей ограничивается свойствами вроде <font-size>. Но CSS — это не просто про то, чтобы задать цвет кнопке и отступ между блоками. За простыми примерами скрывается целый мир возможностей, о которых многие не догадываются. В этой статье рассказываем о десяти свойствах, которые встречаются редко, но способны заметно упростить вам жизнь или добавить в проект изюминку.

⏱Читать статью

Библиотеки JavaScript для всплывающих окон: обзор лучших решений

#почитать

Всплывающие окна (popups, модальные окна) — важный инструмент в веб-разработке. Они помогают отображать уведомления, формы, изображения и другие элементы без перезагрузки страницы. JavaScript-библиотеки делают этот процесс удобным и гибким. Давайте рассмотрим популярные решения и их особенности.

⏱Читать статью

Что если использовать контейнерные единицы измерения для... всего?

#почитать

Как-то подумалось, а что, если использовать контейнерные единицы измерения для каждого элемента в дизайне? Наверное, тогда, всё будет хорошо масштабироваться. Контейнерные единицы измерения, если вы о них не слышали, это такие же единицы измерения (вроде, px или rem, но более тесно связанные с единицами измерения области просмотра, например, vw или vi), размер которых зависит от контейнера, в котором они находятся.
Оказалось, сюрприз-сюрприз, все не так просто. Есть множество вещей, с которыми контейнерные запросы работают плохо, или для которых они просто не подходят.
В качестве эксперимента мы взяли довольно простой макет из сетки с карточками разного размера. Не считайте этот демонстрационный пример хорошим, это просто то, что первым пришло в голову.

⏱Читать статью

Три подхода к селектору & (амперсанд) в CSS

#почитать

& — мощное дополнение к CSS, позволяющее создавать селекторы без повторений и способствующее улучшению организованности и понимания кода.

⏱Читать статью