Портрет 4X_Pro
Онлайн
Мультиблог
4X_Pro
Записки лишнего человека

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

Как проверить, загружен ли сайт с мобильного устройства

4X_Pro
Иногда бывает нужно проверить, с какого устройства загружена страница: с мобильного или обычного компьютера. К сожалению, полностью надежных способов нет, поэтому приходится ограничиваться проверкой User Agent на наличие характерных для мобильных устройств строк с помощью регулярного выражения. В JavaScript это делается так: Читать далее…

Бегущая строка с помощью CSS Animations

4X_Pro
Иногда возникает задача сделать на сайте бегущую строку. В свое время для этого существовал специальный тег marquee, однако официально он не был включен ни в одну из спецификаций HTML, поэтому пользоваться им нежелательно. Второй вариант — это сделать прокрутку средствами JavaScript, задав бегущей строке padding-left (или просто left, если контейнеру с ней выставлено свойство absolute) и регулярно уменьшая его с помощью setInterval. Главный недостаток этого варианта — большая нагрузка на процессор, кроме того, прокрутка получается не плавной, а рывками.
Но для современных броузеров есть еще один вариант, основанный на CSS animations. В отличие от варианта с JavaScript, он позволяет сделать прокрутку достаточно плавной и при этом дает больше возможностей. Самый простой вариант его реализации выглядит так. Читать далее…

Как добавить ReCAPTCHA на свой сайт

4X_Pro
Недавно  столкнулся с тем, что боты поумнели настолько, что начали обходить обычную CAPTCHA на одном из сайтов, поддержкой которых я занимаюсь. Пришлось искать альтернативные решения, и выбор пал на reCAPTCHA от Google. Как выяснилось, подключить ее достаточно просто. Нужно зарегистрировать свой сайт на странице ReCAPTCHA (нужно иметь учетную запись в Google) и получить пару ключей: публичный (он будет размещаться на сайте) и секретный, который будет храниться только на сервере.
Дальше в форму, для которой нужна проверка CAPTCHA вставляем код такого вида:
<script src='https://www.google.com/recaptcha/api.js'></script>
<div class="g-recaptcha" data-sitekey="ваш-публичный-ключ"></div>
Google рекомендует вставлять тег script после head, однако на самом деле это не обязательно, и можно вставить его и прямо в форму или вообще в конец страницы перед </body>. Последний вариант, пожалуй, даже предпочтительнее, так как в этом случае код будет загружаться в самом конце загрузки страницы и не будет ее замедлять.
Если вы все сделаете правильно, то в том месте сайта, куда вы вставили код, появится такой блок:

В нем же будет скрытое поле g-recaptcha-response, которое будет отправлено на сервер вместе с данными формы. Для проверки корректности прохождения CAPTCHA нам нужно сделать POST-запрос на сервер Google. Читать далее…

Оптимизация быстродействия Windows 10

4X_Pro
Недавно озаботился оптимизацией Windows 10 на старом стационарном компьютере и решил собрать в эту тему советы по этой теме.
Итак, начнем.
  1. Отключаем ненужную анимацию (то, с чего начиналась оптимизация со времен Windows 95). Идем в "Панель управления"/"Система"/"Дополнительные параметры системы", там выбираем вкладку "Быстродействие", и в появившемся списке отключаем все, что считаем ненужным (я обычно оставляю только сглаживание шрифтов, тень под курсором мыши, отображение окна при перетаскивании и прозрачный прямоугольник для выделения).
  2. Отключаем Lock Screen (экран блокировки). На мой взгляд, это одно из самых ненужных нововведений Win 10, только замедляющее загрузку и требующее лишнего щелчка мышью перед вводом пароля. Для этого запускаем regedit (редактор реестра), находим путь HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows\Personalization и там создаем параметр типа DWORD (32 бита) с названием NoLockScreen и прописываем туда значение 1.
  3. Отключаем обои на экране входа в систему (чтобы ускорить загрузку): заходим в реестр и по адресу HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows\System создаем параметр DisableLogonBackgroundImage типа DWORD (32 бита) со значением 1.
  4. Там же отключаем Activity Feed: в параметр EnableActivityFeed прописываем 0. Параметр имеет тип DWORD (32 бита)
  5. Из меню "Пуск" нужно удалить все неиспользуемые приложения-плитки, так как каждое из них тратит ресурсы на свою отрисовку. Кроме того, если вы вообще не пользуетесь такими приложениями, в реестре можно отключить их обновление полностью. Это снова реестр, раздел HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\PushNotifications, там создаем параметр NoTileApplicationNotification (DWORD 32 бита) и прописываем значение 1
  6. Отключаем прозрачность меню Пуск и Панели задач (пользы от нее мало, а дополнительная нагрузка при отрисовке имеется). Снова идем в реестр, в раздел HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Themes\Personalize. Там есть параметр EnableTransparency, для которого прописываем значение 0. (Если параметра нет, создаем его с типом DWORD 32 бита).
  7. На большинстве домашних компьютеров можно включить асинхронное применение групповой политики в целях ускорения загрузки. Для этого нужно зайти в реестр HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\System и там переключить там параметр SynchronousUserGroupPolicy в 0.
Тем, кому не нравятся изменения в меню "Пуск", появившиеся в Windows 10, можно предложить использовать программу Classic Shell. Она позволяет сделать вид этого меню таким же, как во времена любой из предыдущих версий Windows: 2000/XP/7. А кроме того, это меню отрисовывается гораздо быстрее, чем обычное.

Советник Сократ

4X_Pro
Сегодня опубликовал первый навык для Яндекс.Алисы — «Советник Сократ». Чтобы запустить навык, скажите Алисе «запусти чат с советником Сократом» и начните отвечать на вопросы. Навык реализует метод майевтики — задает вопросы, которые побуждают к размышлению и помогают самостоятельно найти решение той или иной стоящей перед вами проблемы. Этот метод был придуман почти две с половиной тысячи лет назад философом Сократом, но остается актуальным до сих пор.
Немного о том, как он был создан

Как перенести контакты с старого телефона на смартфон

4X_Pro
Недавно потребовалось перенести все контакты с обычного кнопочного мобильника (Philips Xenium) на смартфон с Android. Сначала казалось, что задача предельно простая: и в том, и в другом устройстве есть Bluetooth, и можно переслать по нему. Вскоре выяснилось, что возможности отправить адресную книгу целиком в Xenium нет, можно только слать контакты поштучно. Контактов было около 500, поэтому такой вариант не подходил. Однако из настроек Xenium выяснилось, что к контактам можно обращаться по Bluetooth извне. Возникла мысль поискать приложение для Android, которое сможет подключиться и забрать необходимую информацию.
Как выяснилось, такие приложения действительно есть. Одно из них называется Bluetooth Contact Transfer, второе — Transfer Contacts. Я воспользовался первым. Оно без проблем подключилось, показало список контактов на Xenium с возможностью выбрать, какие переносить, и через пятнадцать секунд вся информация была уже на новом смартфоне. Единственный недостаток приложения — прогресс выполнения операции показывается как N/100, из-за чего можно ошибочно подумать, что перенесены только первые 100 контактов. Это не так, корректно импортируется все.
Для телефонов, у которых нет Bluetooth, придется использовать другие способы. Если контактов немного, то самый простой способ — перенести их на SIM-карту, и просто переставить ее в новый смартфон. Если этот вариант не подходит, то остаются еще два. Первый — поискать, нет ли способа сохранить всю адресную книгу в файл формата vcf или отправить ее по EMail в этом же формате. А затем полученный файл загрузить на смартфон и открыть там в файл-менеджере. Второй — это скачать с сайта производителя телефона программу для синхронизации с компьютером и выгрузить контакты туда (некоторые из таких программ также умеют делать экспорт в vcf, некоторые — только в адресную книгу Windows), а затем произвести синхронизацию с компьютера на смартфон.

Как вставить элемент после тега script из самого скрипта

4X_Pro
Недавно столкнулся с такой задачей: требовалось в Javascript сформировать определенный HTML-код и вставить его сразу после тега script, из которого этот код вызывается. Возник вопрос: а как вообще узнать, какой скрипт сейчас выполняется?
Сделать это можно несколькими способами.
  • воспользоваться свойством document.currentScript, которое содержит ссылку на тег. Но оно не работает в старых броузерах, в частности во всех версиях MSIE (но работает в Edge). Кроме того, не следует обращаться к этому свойству из callbacks, это может приводить к некорректным результатам.
  • прописать id для тега и обращаться по нему: document.getElementById('идентификатор'). Это самый универсальный вариант, но с ним могут быть сложности, если скрипт подключается через механизмы, предусмотренные в CMS (там обычно не предусмотрено возможности указать id или иные атрибуты)
  • если точно известен URL скрипта и он не будет менятся, то можно воспользоваться document.querySelector('script[src="путь"]'). Полезно для различных встраиваемых сервисов (типа онлайн-помощников), которые берут скрипт с одного и того же URL.
  • наконец, самый надежный в плане обратной совместимости вариант — смотреть последний тег script:

    var s =  document.getElementsByTagName("script"); var attr = s[s.length-1].getAttribute("attr1");
    Однако работает он только в том случае, если скрипт подключается без async или defer.
Читать далее…

Как писать тег description для статей на информационных сайтах

4X_Pro
На SEO-форумах часто ругают Яндекс за то, что он игнорирует meta-тег description и вместо него выводит в сниппете произвольный кусок текста из страницы. Однако зачастую это результат того, что описание страницы составлено неправильно. Многие ошибочно воспринимают desciption как подзаголовок, своего рода дополнение, уточняющее тег TITLE, и пишут его в таком же стиле, составляя, в основном из существительных и прилагательных.
Каким же должно быть хорошее описание? Оно содержит одно или два полноценных предложения, в которых обязательно должны быть глаголы. В идеальном случае в них сосредоточена суть статьи, некий итог, который пользователь вынесет для себя после ее прочтения. Кроме того, следует помнить об ограничениях на длину: она не должна быть больше 160 символов. Кроме того, слишком короткие description (порядка 70—75 символов) также могут быть проигнорированы поисковыми системами. Читать далее…

Оптимизация сайта для печати

4X_Pro
Очень часто при разработке сайта забывают о его оптимизации для печати. В чем же она заключается? По сути, в ней две составляющих: сделать так, чтобы лист использовался рационально, и убрать все то, что на бумаге бесполезно:
  • навигационное меню
  • формы для поиска по сайту и комментариев
  • рекламные блоки, виджеты соцсетей и кнопки «поделиться»
  • различные всплывающие и накладывающиеся поверх основного контента элементы (например, на этом сайте это ссылка «Задать вопрос» справа)
  • облако тегов
  • «подвал» сайта
Но не переусердствуйте! Обязательно оставьте видимыми «хлебные крошки», название и логотип сайта, а также контактные телефоны и Email, если они есть на сайте.
Кроме того, следите, чтобы при печати использовалась вся ширина листа, то есть не было бы жестко заданной ширины в пикселях для сайта в целом или для основного блока с контентом.
Как это сделать технически? Некоторые CMS позволяют создавать отдельные страницы для печати. Но это плохое решение: с точки зрения поисковых систем получаются дубли страниц, причем иногда версия для печати индексируется лучше, чем основная, и пользователи из поисковых систем, попадая на нее, не могут понять, как перейти на основной сайт. Поэтому лучше использовать средства CSS — media-запрос print, переопределив с его помощью CSS-свойства элементов на основной странице. Читать далее…

ИКС от Яндекса: анализ моих сайтов

4X_Pro

Возможно, еще не всем известно, что на этой неделе Яндекс окончательно отменил ТИц и вместо него ввел новый показатель — индекс качества сайта (ИКС), который учитывает не только ссылочную массу, но и еще ряд факторов. Я собрал информацию по своим сайтам и получил следующие данные: Читать далее…

Страницы:
Задать вопрос

Здесь можно задать мне вопрос или спросить совета по любой теме, затронутой в блогах или на форуме. После того, как я отвечу, вопрос и ответ появятся в соответствующем разделе. Но не забываем, что я — сторонник slow life, поэтому каких-либо сроков ответов не обещаю. Самые интересные вопросы станут основой для новых тем на форуме или записей в блоге.
Сразу предупреждаю: глупости, провокации, троллинг и тому подобное летит прямо в /dev/null.