создание сайта

Скрыть элемент от скринридера

Бывают ситуации когда элементы не несут никакой смысловой нагрузки и для скринридеров абсолютно не нужны. Как убрать элемент из дерева доступности? Если не брать в расчёт display:hide и атрибут hiden, которые выпиливают элементы из DOM, есть два варианта. Оба связаны с ARIA.

Как правильно прятать(ся)

Началось всё с того, что валидатор разметки, не то чтобы сильно был против, но всё же настойчиво намекал, что у каждого раздела должен быть заголовок. Ему же не объяснишь что дизайн такой. Поискав возможные варианты решения пришёл к выводу — валидатор был прав. Заголовки нужны независимо от дизайна. Даже если их никто не увидит. Вернее не увидит кому не надо. Обо всём по порядку.

Шрифтовые иконки - достойная альтернатива растру

Ты знаеш что такое иконочный шрифт? Нет? Зря. Иконочный шрифт это как обычный шрифт, только вместо букв иконки. Это даёт ряд преимуществ перед обычными jpg/png картинками.

SVG путь <path>

<path> - самый универсальный элемент. С его помощью можно нарисовать любую простую фигуру svg. По своей универсальности он обходит <polyline> за счёт того что может рисовать кривые. Для определения пути нужен один атрибут d в котором указываются координаты точек и команды определяющие как рисовать.

Анимация SVG с помощью CSS и SMIL

SVG графику можно анимировать, УРА, с помощью известного и горячо любимого CSS. Плюс к этому есть возможности самого svg описанные в спецификации SMIL Animation. Не забываем что возможности анимации зависят от способа, которым встроен svg на страницу. Наиболее полная поддержка идёт если встраиваете код непосредственно в html страницу или используя тег <object>

Поля в Drupal8. Зачем нужны и как применять.

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

SVG формат — как растр только лучше.

SVG это графический формат как jpg. Но только этот Graphic ещё и Scalabel, да к тому же Vector. SVG файл - это не картинка в том виде, как мы к ним привыкли. Он содержит XML разметку, которая определяет все линии, цвета, слои и прочее. Такой файл мы можем менять вручную в текстовом редакторе или с помощью JavaScript и CSS кода.

Как заменить ссылки в комментариях на JS.

На WebOnLife, как и на многих других сайтах, в форме комментариев есть поле сайт. Редко кто оставляет это поле не заполненным и внешних ссылок накопилось достаточно много. Ссылки были закрыты в nofollow, но есть мнение что это не спасает от потери веса. Ещё меня не устраивало то что ссылки открывались в этом же окне, а не в новом.

Обе проблемы решаются одной строчкой кода на Javascript. Вместо старого доброго тега <a> нужно вставить

Вставляем блок рекламы в статью.

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

Вертикальное выпадающее меню меню на HTML и CSS.

Выпадающее меню раскрывающееся по клику не такая уж и редкость. Javascript позволяет делать более сложные вещи, а уж подобные фишки с меню делаются на раз. А что если сделать такое же меню но без применения JS. Зачем нам лишние скрипты если подобное можно сделать через CSS и HTML? Однозначно ответить на этот вопрос не получиться и вот почему. На WebOnLife есть статья как сделать выпадающее меню на CSS и HTML. Там описан способ как сделать меню раскрывающееся при наведении.