HitBox — это чаще всего невидимая область или группа областей, которая помогает обнаруживать коснулся ли объект другого объекта, у которого тоже есть свой хитбокс.
В HTML страницах изначально нет понятие хитбокса у блоков, поэтому в этом посте мы сами получим и обработаем их с помощью JS.
Задача заголовка — привлекать внимание, и для этого многие эффекты хороши. В прошлый раз мы перевели статью о градиентах, теперь предлагаем рассмотреть ещё несколько фишек.
В процессе создания своей схемы метро я использовал SVG-схему из Википедии как визуальный образец. После добавления возможности расчёта и вывода пути к своей схеме стал думать о том, как использовать алгоритм поиска по графу и для других подобных схем. И решил недавно попробовать адаптировать его для эталонной схемы из Википедии.
Для этого решил адаптировать не алгоритм к схеме, а схему к алгоритму. Поскольку алгоритм BFS использует перебор массивов станций, координат линий и пересадок, то нужно было распарсить схему из Википедии в массивы: для этого я написал различные варианты CSS-селекторов.
Игра Жизнь - это клеточный автомат созданный в 1970 году Джоном Конвеем.
Это не совсем игра, а просто симуляция клеток по определенным правилам.От игрока лишь требуется размещать эти клетки.
В этом посте мы сделаем "Игру Жизнь" на HTML странице при помощи CSS & JS.
Время от времени некоторые мои коллеги-дизайнеры интересуются каким образом необходимо подготавливать макеты для передачи разработчикам. Я подготовил гайд, которы поможет им разобраться в этом вопросе.
Одним днем возникла необходимость добавить в проект генерацию коротких css классов и id элементов в html верстке. Основные причины были следующие:
* Усложнить жизнь парсерам и блокировщикам рекламы (они зачастую на имена классов опираются).
* Уменьшить размер html страниц
* И чтобы все было как у Google, шутка 😄
Очевидно, что минификация классов и id полностью не защитит от парсеров, как говорится, лучшая защита от парсинга – удалить страницу из интернета. Но данный подход может отбить охоту у вчерашних студентов с фриланс биржи зарабатывать на парсинге, или защитить от универсальных ботов-парсеров.
Привет! На связи Данила Соловьев, руководитель направления PHP в AGIMA. Для проджект-менеджеров и джуниор-разработчиков я подготовил небольшой гайд по тому, как ускорять работу крупных проектов на Битрикс и повышать их отказоустойчивость. Здесь вы не найдете сложных кейсов или сногсшибательных решений. Но зато найдете простые и применимые советы.
У меня есть хороший знакомый, который в 25 лет полностью потерял зрение. Представляете, все то, что для нас привычно, для него изменилось? Компьютеры и телефоны превратились в кирпичи, и толку от них стало мало. Или нет?
Привет! Меня зовут Андрей Кузнецов. Я frontend lead в «Рунет Бизнес Системы». Мы разрабатываем сервис для интернет-эквайринга банков, и работаем по модели White label, поэтому мне нельзя называть клиентов. Но я хочу рассказать, как у нас в компании появилось accessibility. То есть, доступность — возможность использования интерфейса всеми, независимо от физических или технических ограничений. Это история о том, как мы это нашли, на какие грабли наступали и к чему пришли в данный момент. Я буду считать, что не зря всё это написал, если после моего рассказа, вы захотите сделать шаги в сторону того, чтобы accessibility появилось и в ваших продуктах.
Один великий китайский философ сказал: «каждый разработчик должен понимать, как исполняется его программа». Что ж, давайте разбираться. Говорить будем про рендеринг и его производительность.
Меня зовут Глеб Михеев, я CTO Skillbox Holding, а также руководитель программного комитета FrontendConf. Уже как 19 лет работаю в коммерческой разработке. Сегодня я расскажу, как устроен браузерный конвейер поставки кадров на экран и что нужно знать каждому разработчику, чтобы его интерфейсы были отзывчивыми, не лагали, а анимации были плавными и выдавали 60fps даже при высокой вычислительной нагрузке на main thread.
В этом туториале я расскажу вам о том, как решить проблему отсутствия масштабирование страницы при ширине экрана меньше чем значение body min-width, в браузерах Firefox и Safari.
Если поменять порядок названий классов CSS в атрибуте «class» HTML-элемента, то поменяется ли отображение HTML-страницы в браузере? Точно не поменяется? Или точно поменяется? А, может быть, есть нюансы?
Давайте попробуем разобраться. Для этого я загляну в действующий стандарт языка HTML, буду на основании определений из этого стандарта делать выводы и проверять их на практических примерах.
В статье сначала взглянем на примеры mXSS уязвимостей недалекого прошлого, а затем рассмотрим совсем свежие примеры, которые позволили обойти защиту популярных HTML-санитайзеров. Разберемся как им это удалось, и почему так сложно надежно защититься от уязвимостей, основанных на мутациях HTML-разметки.
Раньше, когда деревья были большими, а веб был с градиентными кнопочками, на сайтах любили впилить рекламные видео, которые автоматически запускались с громким звуком. И вместо того чтобы приятно провести время или найти нужную информацию, приходилось судорожно искать источник этого звука.
Это негативно сказывалось на пользовательском опыте, и в какой-то момент разработчики браузеров решили, что хватит это терпеть. Так родилась Autoplay Policy.
Я развиваю скрипт на языке PowerShell для обхода и визуализации HTML-дерева из файла на языке HTML для анализа кода HTML на ошибки. В частности, для поиска ошибок при именовании классов CSS. Для этого сначала нужно получить набор классов из атрибута class HTML-элементов, а затем перебрать эти названия классов в цикле. Для разбора HTML я использую библиотеку «HTML Agility Pack». Также я разбираю, как можно обработать ссылки на символы (их еще называют по-английски «HTML-entities») средствами указанной библиотеки.
При разборе кода HTML-страницы возникает вопрос: какие символы можно использовать в названиях классов CSS? Например, можно ли названия классов писать по-русски? Или китайскими иероглифами? Или с помощью эмодзи? В этой статье я разбираю этот вопрос со ссылками на действующие стандарты HTML и CSS, даю ответы, привожу примеры с проверкой соответствующими валидаторами.
Всем привет! Гуляя по Хабру, мне ни разу не доводилось обнаружить статью на тему Django + PWA. А ведь тема интересная (лично мне пришлось потратить 4 дня на то, чтобы с ней разобраться). И дабы сэкономить ваше время, в данной статье я попытался представить достаточно простой способ для создания прогрессивного веб приложения (PWA) вместе с Django без сторонних библиотек.
Определимся сразу, что мета-приложения и мета-компоненты - это еще не устоявшиеся в индустрии термины. Это скорее предложение, которое может быть принято или отвергнуто сообществом веб-разработчиков. Самое время объяснить, что конкретно мы имеем в виду.
Вывод HTML-дерева из локального файла в окно программы-оболочки «Windows PowerShell» версии 5.1 (или в окно программы-оболочки «PowerShell» версии 7) с помощью скрипта на языке PowerShell в операционной системе «Windows 10». Используется библиотека «HTML Agility Pack».
В качестве упражнения в алгоритмах и структурах данных рассмотрено несколько способов обхода и вывода HTML-дерева: NLR (прямой с приоритетом обхода потомков слева направо), NRL (прямой с приоритетом обхода потомков справа налево), LRN (обратный). Примеры практической реализации.
