Обновить
61.51

HTML *

Стандартный язык разметки web-страниц

Сначала показывать
Порог рейтинга
Уровень сложности

Провал Tailwind, инструмента для невежд

Время на прочтение11 мин
Охват и читатели368
Привет, Хабр! Не так давно в нашем блоге вышел перевод статьи «Взлет и падение Bootstrap». Как указали в комментариях наши читатели, вскоре после публикации оригинального материала на Medium, на том же ресурсе появилось и опровержение. Чтобы вы могли оценить обе точки зрения, публикуем перевод этой статьи. Поскольку материал получился крайне объемным, мы решили разбить статью-опровержение на две части. По традиции, будем рады вашим комментариям и дополнениям! Позиция редакции может не совпадать с мнением автора =)

Томас Димнет написал статью под названием «Взлёт и падение Bootstrap», в которой он пытается впарить Failwind, как если бы он каким-то волшебным образом был лучше, чем bootcrap. Глупая и невежественная статья. И так вышло, что мой ответ на эту статью оказался настолько длинным, что я решил оформить его в отдельный материал.

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


Читать дальше →

Стили заголовков в CSS: картинки, тени, анимации

Время на прочтение6 мин
Охват и читатели28K

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

Читать далее

Добавление расчёта пути к схеме метро Москвы из Википедии

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели3.4K

В процессе создания своей схемы метро я использовал SVG-схему из Википедии как визуальный образец. После добавления возможности расчёта и вывода пути к своей схеме стал думать о том, как использовать алгоритм поиска по графу и для других подобных схем. И решил недавно попробовать адаптировать его для эталонной схемы из Википедии.

Для этого решил адаптировать не алгоритм к схеме, а схему к алгоритму. Поскольку алгоритм BFS использует перебор массивов станций, координат линий и пересадок, то нужно было распарсить схему из Википедии в массивы: для этого я написал различные варианты CSS-селекторов.

Читать далее

Игра Жизнь — клеточный автомат на HTML, JS

Уровень сложностиПростой
Время на прочтение11 мин
Охват и читатели899

Игра Жизнь - это клеточный автомат созданный в 1970 году Джоном Конвеем.

Это не совсем игра, а просто симуляция клеток по определенным правилам.От игрока лишь требуется размещать эти клетки.

В этом посте мы сделаем "Игру Жизнь" на HTML странице при помощи CSS & JS.

Читать далее

Как передавать макеты в разработку?

Время на прочтение5 мин
Охват и читатели17K

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

Читать далее

Генератор коротких CSS классов и id

Время на прочтение8 мин
Охват и читатели6.6K

Одним днем возникла необходимость добавить в проект генерацию коротких css классов и id элементов в html верстке. Основные причины были следующие:

* Усложнить жизнь парсерам и блокировщикам рекламы (они зачастую на имена классов опираются).

* Уменьшить размер html страниц

* И чтобы все было как у Google, шутка ?

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

Читать далее

Курс молодого бойца: ускоряем проекты на Битрикс, повышаем их отказоустойчивость

Время на прочтение7 мин
Охват и читатели7.7K

Привет! На связи Данила Соловьев, руководитель направления PHP в AGIMA. Для проджект-менеджеров и джуниор-разработчиков я подготовил небольшой гайд по тому, как ускорять работу крупных проектов на Битрикс и повышать их отказоустойчивость. Здесь вы не найдете сложных кейсов или сногсшибательных решений. Но зато найдете простые и применимые советы.

Читать далее

Accessibility: для кого и как внедрять?

Время на прочтение11 мин
Охват и читатели7.6K

У меня есть хороший знакомый, который в 25 лет полностью потерял зрение. Представляете, все то, что для нас привычно, для него изменилось? Компьютеры и телефоны превратились в кирпичи, и толку от них стало мало. Или нет?

Привет! Меня зовут Андрей Кузнецов. Я frontend lead в «Рунет Бизнес Системы». Мы разрабатываем сервис для интернет-эквайринга банков, и работаем по модели White label, поэтому мне нельзя называть клиентов. Но я хочу рассказать, как у нас в компании появилось accessibility. То есть, доступность — возможность использования интерфейса всеми, независимо от физических или технических ограничений. Это история о том, как мы это нашли, на какие грабли наступали и к чему пришли в данный момент. Я буду считать, что не зря всё это написал, если после моего рассказа, вы захотите сделать шаги в сторону того, чтобы accessibility появилось и в ваших продуктах.

Читать далее

Как достичь производительного рендеринга в браузере

Время на прочтение10 мин
Охват и читатели7.1K

Один великий китайский философ сказал: «каждый разработчик должен понимать, как исполняется его программа». Что ж, давайте разбираться. Говорить будем про рендеринг и его производительность.

Меня зовут Глеб Михеев, я CTO Skillbox Holding, а также руководитель программного комитета FrontendConf. Уже как 19 лет работаю в коммерческой разработке. Сегодня я расскажу, как устроен браузерный конвейер поставки кадров на экран и что нужно знать каждому разработчику, чтобы его интерфейсы были отзывчивыми, не лагали, а анимации были плавными и выдавали 60fps даже при высокой вычислительной нагрузке на main thread.

Читать далее

Добавление масштабирования страницы при ширине экрана меньше чем body min-width в браузерах Firefox и Safari

Время на прочтение5 мин
Охват и читатели15K

В этом туториале я расскажу вам о том, как решить проблему отсутствия масштабирование страницы при ширине экрана меньше чем значение body min-width, в браузерах Firefox и Safari.

Читать далее

HTML, CSS: важен ли порядок названий классов CSS в атрибуте «class» HTML-элементов

Время на прочтение5 мин
Охват и читатели10K

Если поменять порядок названий классов CSS в атрибуте «class» HTML-элемента, то поменяется ли отображение HTML-страницы в браузере? Точно не поменяется? Или точно поменяется? А, может быть, есть нюансы?

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

Читать далее

XSS с мутациями: как безопасный код становится зловредным и при чем здесь innerHTML

Время на прочтение11 мин
Охват и читатели11K

В статье сначала взглянем на примеры mXSS уязвимостей недалекого прошлого, а затем рассмотрим совсем свежие примеры, которые позволили обойти защиту популярных HTML-санитайзеров. Разберемся как им это удалось, и почему так сложно надежно защититься от уязвимостей, основанных на мутациях HTML-разметки.

Читать далее

Ближайшие события

Видео в вебе, Browser Policy и палки в колёсах

Время на прочтение5 мин
Охват и читатели6.2K

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

Это негативно сказывалось на пользовательском опыте, и в какой-то момент разработчики браузеров решили, что хватит это терпеть. Так родилась Autoplay Policy.

Рассмотрим её подробнее

PowerShell, HTML Agility Pack: разбор классов CSS на узле HTML-дерева

Время на прочтение7 мин
Охват и читатели1.8K

Я развиваю скрипт на языке PowerShell для обхода и визуализации HTML-дерева из файла на языке HTML для анализа кода HTML на ошибки. В частности, для поиска ошибок при именовании классов CSS. Для этого сначала нужно получить набор классов из атрибута class HTML-элементов, а затем перебрать эти названия классов в цикле. Для разбора HTML я использую библиотеку «HTML Agility Pack». Также я разбираю, как можно обработать ссылки на символы (их еще называют по-английски «HTML-entities») средствами указанной библиотеки.

Читать далее

HTML, CSS: какие символы можно использовать в названиях классов CSS

Время на прочтение8 мин
Охват и читатели11K

При разборе кода HTML-страницы возникает вопрос: какие символы можно использовать в названиях классов CSS? Например, можно ли названия классов писать по-русски? Или китайскими иероглифами? Или с помощью эмодзи? В этой статье я разбираю этот вопрос со ссылками на действующие стандарты HTML и CSS, даю ответы, привожу примеры с проверкой соответствующими валидаторами.

Читать далее

Django и PWA

Время на прочтение6 мин
Охват и читатели13K

Всем привет! Гуляя по Хабру, мне ни разу не доводилось обнаружить статью на тему Django + PWA. А ведь тема интересная (лично мне пришлось потратить 4 дня на то, чтобы с ней разобраться). И дабы сэкономить ваше время, в данной статье я попытался представить достаточно простой способ для создания прогрессивного веб приложения (PWA) вместе с Django без сторонних библиотек.

Читать далее

Мета-приложения и Symbiote.js

Время на прочтение11 мин
Охват и читатели3.8K

Определимся сразу, что мета-приложения и мета-компоненты - это еще не устоявшиеся в индустрии термины. Это скорее предложение, которое может быть принято или отвергнуто сообществом веб-разработчиков. Самое время объяснить, что конкретно мы имеем в виду.

Читать далее

PowerShell: обход и визуализация HTML-дерева из файла

Время на прочтение8 мин
Охват и читатели5.1K

Вывод HTML-дерева из локального файла в окно программы-оболочки «Windows PowerShell» версии 5.1 (или в окно программы-оболочки «PowerShell» версии 7) с помощью скрипта на языке PowerShell в операционной системе «Windows 10». Используется библиотека «HTML Agility Pack».

В качестве упражнения в алгоритмах и структурах данных рассмотрено несколько способов обхода и вывода HTML-дерева: NLR (прямой с приоритетом обхода потомков слева направо), NRL (прямой с приоритетом обхода потомков справа налево), LRN (обратный). Примеры практической реализации.

Читать далее

Заметка о направлении вывода HTML страницы на печать из 1С в дефолтный браузер на клиентском месте

Время на прочтение7 мин
Охват и читатели5.8K

Проблематика, решаемая в заметке

В платформе 1С для, в клиентской её части, реализована возможность работы с HTML страницами с помощью типа поля "Поле HTML документа". Обрабатывает эту функциональность интегрированный браузер WebKit (1). В 1С ранних версий использовался стандартный в Windows IE, в ограниченном пользовательскими настройками режиме.

В компании было принято решение сменить дизайн протокола приема, в котором предусматривается колонтитул с выводом QR-кода специалиста со ссылкой на некий сервис перенаправления на личный профиль специалиста. Размещение QR-кода фиксировано относительно нижней части страницы слева и ориентировано на размер печати на формат А4.

Как оказалось, с выводом колонтитулов на печать на формат А4 встроенный компонент не справился, наших скудных данных о HTML и более обширных данных наших коллег не хватило для реализации печати из 1С с превью и корректным размещением элементов верстки HTML на свои места.

Вашему вниманию привожу оптимизацию количества кликов для отправки на печать во внешний браузер 1С и реализацию вызова печати дефолтным браузером на АРМ любого пользователя.

Читать полную проблематику, детали решения