static_rocket_468x60.jpg

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

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

Чем иконочный шрифт лучше иконок jpg/png

Масштабируемость без потери качества. Никто не ищет буквы побольше для заголовков и буквы поменьше для текста. Ты просто подключаешь шрифт и в css указываешь размер букв. Тоже самое с иконочным шрифтом. Иконку можно сделать любого размера и она всегда будет чёткой.

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. Там описан способ как сделать меню раскрывающееся при наведении.

11 способов не испортить картинку в Drupal.

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

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

Drupal 301 редирект

Редирект 301 говорит о том что запрашиваемая страница навсегда переехала на новый адрес. При помощи 301 редиректа можно указать основное зеркало сайта с WWW или без. Также его используют при переводе сайта на https. Для этого достаточно дописать пару строк в файле .htaccess. Ситуации, когда может понадобиться 301 редирект, бывают разные. Можно их условно разделить на две группы.

Страницы