- Перово, Москва, Россия
- me@4xpro.ru
- XXXXPro
Новости сайта в Telegram
t.me/4x_proКомпьютерное
Как перенести контакты с старого телефона на смартфон
Читать далее…
Как вставить элемент после тега script из самого скрипта
Недавно столкнулся с такой задачей: требовалось в 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 для статей на информационных сайтах
На SEO-форумах часто ругают Яндекс за то, что он игнорирует meta-тег description и вместо него выводит в сниппете произвольный кусок текста из страницы. Однако зачастую это результат того, что описание страницы составлено неправильно. Многие ошибочно воспринимают desciption как подзаголовок, своего рода дополнение, уточняющее тег TITLE, и пишут его в таком же стиле, составляя, в основном из существительных и прилагательных.
Каким же должно быть хорошее описание? Оно содержит одно или два полноценных предложения, в которых обязательно должны быть глаголы. В идеальном случае в них сосредоточена суть статьи, некий итог, который пользователь вынесет для себя после ее прочтения. Кроме того, следует помнить об ограничениях на длину: она не должна быть больше 160 символов. Кроме того, слишком короткие description (порядка 70—75 символов) также могут быть проигнорированы поисковыми системами.
Читать далее…
Оптимизация сайта для печати
Очень часто при разработке сайта забывают о его оптимизации для печати. В чем же она заключается? По сути, в ней две составляющих: сделать так, чтобы лист использовался рационально, и убрать все то, что на бумаге бесполезно:
- навигационное меню
- формы для поиска по сайту и комментариев
- рекламные блоки, виджеты соцсетей и кнопки «поделиться»
- различные всплывающие и накладывающиеся поверх основного контента элементы (например, на этом сайте это ссылка «Задать вопрос» справа)
- облако тегов
- «подвал» сайта
Кроме того, следите, чтобы при печати использовалась вся ширина листа, то есть не было бы жестко заданной ширины в пикселях для сайта в целом или для основного блока с контентом.
Как это сделать технически? Некоторые CMS позволяют создавать отдельные страницы для печати. Но это плохое решение: с точки зрения поисковых систем получаются дубли страниц, причем иногда версия для печати индексируется лучше, чем основная, и пользователи из поисковых систем, попадая на нее, не могут понять, как перейти на основной сайт. Поэтому лучше использовать средства CSS — media-запрос print, переопределив с его помощью CSS-свойства элементов на основной странице.
Читать далее…
ИКС от Яндекса: анализ моих сайтов
.sites_table td { border: #ccc 1px solid; text-align: center } .sites_table { border-collapse: collapse }
Возможно, еще не всем известно, что на этой неделе Яндекс окончательно отменил ТИц и вместо него ввел новый показатель — индекс качества сайта (ИКС), который учитывает не только ссылочную массу, но и еще ряд факторов. Я собрал информацию по своим сайтам и получил следующие данные:
Читать далее…
Делаем Интернет снова быстрым или JavaScript по белому списку
Но увы, каждый раз лезть в настройки Opera и явно включать JavaScript для каждого сайта штатными средствами Opera очень неудобно. Стал задумываться об установке стороннего дополнения. Хотел было использовать NoScript, которым когда-то пользовался под Firefox, но под Opera его нет. Есть одноименное расширение от других разработчиков, но с ужасным интерфейсом и весьма неудобное.
Читать далее…
Время выполнения кода в PHP и Python
Она выдаст что-то вроде
Здесь нас интересует первое значение: real. Оно показывает, сколько реального времени заняло выполнение скрипта. User и sys показывают потраченное процессорное время в режиме пользователя и режиме ядра, которое, даже суммарно, может быть меньше реального из-за простоя и ожидания.
Но утилита time замеряет полное время выполнения, с учетом затрат на запуск интерпретатора, загрузку скрипта и т.п., что не всегда желательно.
Поэтому иногда бывает целесообразнее использовать средства самого языка программирования. В PHP для этого используется функция microtime:
В Python все аналогично, только необходимо подключить модуль time:
В JavaScript это выглядит чуть иначе — необходимо использовать объекты Date:
Читать далее…
Асинхронная загрузка CSS
Однако следует помнить, что если вы асинхронно загружаете основной CSS без выноса его критической части в тег style непосредственно в HTML, то получается довольно неприятный эффект — сначала страница отображается без стилей вообще, потом тут же перерисовывается заново. Поэтому такую асинхронную загрузку лучше применять только к вспомогательным CSS.
Читать далее…
CondiLoader — условная асинхронная загрузка скриптов и CSS
Я уже не раз писал в этом блоге о приемах для ускорения отображения сайтов. Это и отложенная асинхронная загрузка, и условная загрузка по имени класса, и запуск inline JavaScript-кода после загрузки внешнего файла по событию.
Теперь же я сделал библиотеку-загрузчик, которая упрощает и автоматизирует их применение, а также позволяет собрать список всех используемых на сайте библиотек в одном месте. Называется она CondiLoader, скачать ее можно на GitHub или же установить через npm:
npm install condiloader
Работает CondiLoader следующим образом: вы передаете скрипту список объектов для загрузки, он дожидается события DOMContentLoaded. После этого для каждого объекта проверяет, необходимо ли загружать его для данной страницы. Если да, приступает к загрузке, после чего вызывает функцию инициализации, либо пользовательское событие с указанным именем. Все объекты загружаются параллельно, и ошибка при загрузке одного из них на остальные не влияет.
Читать далее…
Почему могут пропадать сессии в PHP при большой нагрузке
Читать далее…