HTML *

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.

Сегодня мы рассмотрим следующие аспекты:

• где полезно использовать элемент search;

• существующие проблемы при использовании единиц измерения от размеров вьюпорта для установки размера текста;

• как элемент hr влияет на опыт пользователей скринридера;

• нужны ли заголовки модальным окнам.

Давайте начнём!

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

Все разработчики знают о теге <input>, это рабочая лошадка веба.

Но что такое <output>? Большинство его никогда не касались. Кто-то даже не подозревает о его существовании.

И очень жаль, ведь этот тег решает проблему, которую мы годами пытались решить связкой <div> и ARIA: динамические результаты, по умолчанию объявляемые программам для чтения экрана.

Этот тег уже много лет находится в спецификации, но почему-то скрывается у всех на виду.

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

В этой статье я расскажу, как организовать SCSS-файлы, подключать глобальные переменные и сделать их доступными во всех компонентах Angular. Такой подход не только экономит время, но и делает проект более понятным для команды. А для больших проектов на NX вы узнаете, как делиться стилями между разными приложениями и библиотеками.

Всем привет, с вами Артем Леванов, Front Lead в WebRise. Когда тебе, как члену жюри, приходится выбирать лучшую работу среди сильных участников, на первый план выходят не только pixel-perfect, но и детали, которые создают ощущение качественного продукта. В чем была наша задача на чемпионате по верстке от HTML Academy, с какими работами мы столкнулись и какие решения заслуживают отдельного внимания — разбираю на реальных примерах финалистов.

Привет, Хабр!

Давно я ничего не писал для джунов. А ведь HTML и CSS не стали проще для них. Всё так же есть сложности, и мне надо как-то помочь людям.

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

Давайте посмотрим, что я вам подготовил.

CSS давно подвергается критике за отсутствие условной логики. Хотя мы разработали хитроумные обходные пути с использованием медиазапросов, переключаемых настраиваемых свойств и контейнерных запросов, эти решения часто кажутся слишком громоздкими и непрямыми. Рабочая группа CSS одобрила эту функцию для разработки, которая обещает внедрить настоящую условную стилизацию непосредственно в наши таблицы стилей.if()

Привет, Хабр! Представьте у вас есть идея для небольшого приложения.  Вы начинаете продумывать его структуру и реализацию. Перед вами предстает ворох проблем; прописать разметку, стили, логику, отладить баги. Эти задачи могут вызвать затруднения у начинающих программистов и предпринимателей.  А что если бы у вас был персональный ассистент, который не просто подсказывает код, а сам пишет его по вашим инструкциям на естественном языке?

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

Существует знаменитый ответ на Stack Overflow о том, почему этого ни в коем случае не следует делать. На самом деле, этот ответ стал настолько популярным, что в определённых кругах используется, как копипаста. Каждый раз, когда я натыкаюсь на него, то думаю что он во многом справедлив... но в то же время, не могу согласиться с ним полностью...

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

Как найти и удалить неиспользуемый JavaScript код даже на крупном сайте. Объёмный, но простой в использовании способ.

При интеграции CSS-фреймворков или UI-библиотек часто подключают готовые сборки, но такой подход ограничивает возможности кастомизации и увеличивает размер проекта.

В этой статье я покажу, как использовать исходный код Bootstrap (SCSS), настроить модульную структуру и подключить только те компоненты, которые действительно нужны. Результат — чистая архитектура стилей, меньший размер сборки и удобный фундамент для будущей дизайн-системы.

Пробуем собрать свой минималистичный starter-kit.

Комедия в трех действиях. Туториал из трех частей.

Создадим причудливый конфиг на webpack + собственный роутинг в первой части. Реализуем реактивные хранилища во второй и уменьшим сложность с помощью веб-компонентов в третьей.

Все вокруг стараются сделать мир лучше, пишут редакторы, используют нейросети. Скука! Я решил пойти другим путём и создал "Лабораторию Абсурда" — которая намеренно и с особым цинизмом превращает любой осмысленный текст в лингвистический бред.

Не спорю, существуют и другие генераторы бреда, но я дарю вам 50 (или что-то около того) разных способов издевательства над текстом и здравым смыслом! Никаких рекламных баннеров, только ванильный JS и словари на тысячи слов, только хардкор!

Привет, Хабр!

А вы интересуетесь современными возможностями CSS и HTML? Может, некоторые из вас думают, что нового там ничего не появится или что свежие фишки не поддерживаются браузерами? Это мнение давно устарело. Современные HTML и CSS позволяют реализовывать интерактивные элементы, которые раньше были доступны только с помощью JavaScript. Можно сказать, что границы между разметкой, стилями и программированием постепенно стираются.

На написание этой статьи меня подтолкнуло большое количество новых возможностей в современных HTML и CSS, да и не только современных: некоторые приёмы, о которых знают немногие, поддерживались ещё со времён IE. Многие по привычке используют готовые UI-библиотеки или CSS-фреймворки, опасаясь изучать что-то новое.

Я собрал компиляцию полезных практик и оформил их в сокращённом текстовом виде.

Иконочные шрифты — лучшие!

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

Браузеры — это очень странный мир. Хотя WebAssembly добился успеха, в том числе и на серверах, клиент по-прежнему ощущается примерно таким же, как и десять лет назад.

Энтузиасты будут говорить вам, что доступ к нативным веб-API через WASM — это решённая задача, достаточно лишь минимального клея JS.

Но никто не задаёт вопрос, зачем нам вообще нужно получать доступ к DOM. Это лишь один из вариантов. В этой статье мне бы хотелось объяснить, почему уже настало время отправить DOM и всевозможные API на радугу, а также поделиться некоторыми идеями о том, как это сделать.

Не буду притворяться, что знаю о браузерах всё. Сегодня уже никто не знает всего, в этом-то и проблема.

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

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

Один из вариантов — генерация локальных мини-сайтов с перекрёстными гиперссылками. В таком виде информация воспринимается очень комфортно.

Вы добавили в настройки интерфейса строчку ru‑RU и решили, что локализация завершена, пользователи довольны. Поздравляем: вы официально вступили в ряды тех, кто ещё не видел, как выглядит языковой тег «во всей своей красе».

Когда пользователь открывает страницу в браузере, тот отправляет на сервер данные о языковых предпочтениях посетителя, и это далеко не всегда что‑то простое. Здесь мы рассмотрим, как именно указывается конкретный язык. Стандарт, в соответствии которым это происходит (RFC 5646), — ворота в языковой мультивселенную, где sl‑rozaj‑biske-1994 звучит как заклинание, а x‑private‑foo может означать что угодно — от диалекта вашей бабушки до внутреннего сленга команды маркетологов.

Привет, Хабр!

Я люблю помогать фронтендерам больше узнать о HTML и CSS. Общаясь, я составил список HTML и CSS фич, которые полезные, но почему-то о них мало кто знает. В этой статье я пришёл поделиться ими.

Давайте посмотрим, что я вам подготовил.