Компьютерное

У начинающих верстальщиков часто возникает вопрос, как отцентрировать текст в блоке по горизонтали и вертикали. С горизонталью всё достаточно просто: используем свойство text-align. А вот для вертикали раньше приходилось прибегать ко всяческим ухищрениям. Но с появлением flex-верстки всё стало намного проще. Зададим в CSS класс, для которого пропишем выравнивание по центру по главной и вспомогательной оси:
.centered { display: flex; justify-content: center;  align-items: center; text-align: center }
И просто применим его к нужному блоку:
<div class="centered">Немного текста <br /> и дополнительного <br />содержимого</div>

Посмотреть пример

В одном из прежних сообщений я уже описывал, как добавить на сайт ReCAPTCHA для защиты от спама. Но скрипт ReCAPTCHA имеет увеличивает время загрузки сайта и ухудшает показатели в Google Page Insights. Если она нужна на одной странице (скажем, только регистрации пользователя), то это не страшно. Но вот если нужно защитить форму, которая есть на каждой странице сайта (например, форма обратной связи или записи на какое-нибудь мероприятие), загрузку приходится делать всё время.
Читать далее…

Каждый, кто когда либо сталкивался с версткой, знает, сколько времени уходит на постоянное обновление страницы, чтобы увидеть результаты изменений. Но, как выяснилось, существует несколько решений для этой проблемы: LiveReloadX для Node.js и дополнение LiveReload для Visual Studio Code. Также есть LiveReload для Python. Все они работают так: отслеживают изменения в файловой системе и запускают на localhost Websocket-сервер, через который отправляют уведомления, что нужно перезагрузить страницу. А в редактируемый HTML нужно добавить простой скрипт, который и будет получать эти уведомления и перезагружать страницу.
"Перейти к описанию установки и использования"

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

Недавно потребовалось сверстать страницу, на которой у элемента checkbox был бы увеличен размер. Варианты с рисованным checkbox, который переключался бы с помощью JavaScript для меня изначально были неприемлемы Сначала пытался воздействовать на него с помощью font-size, line-height, padding и border, но ничего из перечисленного не помогло. Потом обнаружил, что свойства height и width, выставленные одновременно, позволяют добиться желаемого. Но увы, оказалось, что только в Google Chrome. В результате пришлось воспользоваться воспользоваться свойством transform из CSS 3: <input type="checkbox" style="transform: scale(2)" />, но при этом сам checkbox становится размытым. Поэтому тем, кому валидность CSS не критична, посоветовал бы делать несколько иначе: Такой подход позволит отрисовывать checkbox в Google Chrome нужного размера, а в остальных броузерах — масштабировать с размытием.
Читать далее…