Веб-разработка и интернет-реклама без воды.

Позднее Ctrl + ↑

JS: Одна всплывающая форма и разные заголовки

Каждый раз, создавая или оптимизируя сайты, всегда сталкиваюсь с задачами, которые можно и нужно оптимизировать, сокращать, минимизировать и так далее. Например, вы хотите сделать на лендинге 5 форм, у которых по сути отличается только заголовок. Неужели вы будете лепить все 5 форм? Не надо! Можно обойтись несколькими строчками кода.

  1. Дадим заголовку вашей формы идентификатор
<h2 id="windowHeader">Ваш заголовок формы</h2>
  1. Повесим на ваши кнопки названия заголовка каждой из них. Например, для обратного звонка — «Обратный звонок», для бесплатной консультации — «Бесплатная консультация»:
<a onClick="windowHeader('Бесплатная консультация');">Заказать бесплатную консультацию</a>
<a onClick="windowHeader('Обратный звонок');">Заказать звонок</a>
  1. Создадим JS функцию, которая при нажатии той или иной кнопки будет подменять нам название формы:
function windowHeader(name) {
          document.getElementById('windowHeader').innerHTML = name;
}
  1. Жамкаем по кнопкам, смотрим на форму.
 3   1 год   js

JS: Плавный скролл по якорям на jQuery

  1. Создаем блок с идентификатором, в котором есть ссылка на якорь.
  2. Добавим скрипт, например, для блока с идентификатором menu:
$(document).ready(function(){
	$("#menu").on("click","a", function (event) {
		event.preventDefault(); //опустошим стандартную обработку
		var id  = $(this).attr('href'), //заберем айдишник блока с параметром URL
			top = $(id).offset().top; //определим высоту от начала страницы до якоря
	$('body,html').animate({scrollTop: top}, 1000); //сделаем прокрутку за 1 с
	});
});
  1. Ф5, жмём кнопочки, любуемся.

Альтернативный вариант без использования идентификатора menu:

$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},1000),!1}})});

Ещё один вариант без использования jQuery:

var linkNav = document.querySelectorAll('[href^="#"]'), //выбираем все ссылки к якорю на странице
    V = 1;  // скорость, может иметь дробное значение через точку (чем меньше значение - тем больше скорость)
for (var i = 0; i < linkNav.length; i++) {
    linkNav[i].addEventListener('click', function(e) { //по клику на ссылку
        e.preventDefault(); //отменяем стандартное поведение
        var w = window.pageYOffset,  // производим прокрутка прокрутка
            hash = this.href.replace(/[^#]*(.*)/, '$1');  // к id элемента, к которому нужно перейти
        t = document.querySelector(hash).getBoundingClientRect().top,  // отступ от окна браузера до id
            start = null;
        requestAnimationFrame(step);  // подробнее про функцию анимации [developer.mozilla.org]
        function step(time) {
            if (start === null) start = time;
            var progress = time - start,
                r = (t < 0 ? Math.max(w - progress/V, w + t) : Math.min(w + progress/V, w + t));
            window.scrollTo(0,r);
            if (r != w + t) {
                requestAnimationFrame(step)
            } else {
                location.hash = hash  // URL с хэшем
            }
        }
    }, false);
}
 16   1 год   jquery

Хостинг: ускоритель сайтов от Timeweb

Пришёл человек ко мне с сайтом на Joomla и на хостинге Timeweb. Задача — довести Google Page Speed до зелёной зоны. Доступ дали, пошёл смотреть, что там есть и мой взгляд упал на некий «Ускоритель сайтов». Ну, думаю то что нужно! Щас попробуем. Открываю:

Оно. Тыкаю нужные галочки, чищу кеш, загоняю в Google Page Speed — 83%. Клёво, но за 25 рублей в месяц можно было бы и 100% сделать. Отключил и решил сделать своими руками:

  1. Выкачал все картинки, ужал их и загрузил обратно.
  2. Сжал JS/CSS/HTML
  3. Оптимизировал загрузку внешних ресурсов
  4. Включил сжатие и кеширование

Снова чищу кеш, загоняю в Google Page Speed и горжусь собой:

Экономия на сервисе 300 рублей в год. Мелочь, а приятно.

 4   1 год   хостинг

SSH: копируем сайт с хостинга на хостинг

За 5 лет активной работы с сайтами, я пользовался только FTP. То есть чтобы перенести сайт с демки на боевой сервер, мне требовалось скопировать всё на локальный компьютер, затем загрузить на боевой и развернуть.
Понятно, что можно было использовать SVN и другие технологии контроля версий, но мне не довелось работать с подобными проектами, которые готовы были на это выделить бюджет. А тратить энергию на то, что никто не оценит, не хочется.
Сейчас на обычных виртуальных хостингах, существует возможность включить консоль SSH и выполнить произвольную команду. Сначала это натолкнуло меня на мысль по быстрому выполнению php-скриптов и как следствие я стал быстрее искать вирусы на зараженных сайтах.
А сегодня я выкачал за 7 минут с одного хостинга на другой 4.5 гигабайта. Прикиньте, сколько я по времени бы это делал через старенький FTP.

Итак, реализация:


  1. Делаем архив текущего сайта на старом хостинге.
zip -r ARCHIVENAME.zip /PATH_TO_DIR #Укажите имя архива и путь к директории, которую будем архивировать
  1. Кладём его в корень сайта, с которого будем производить скачивание.
  2. Заходим на новый хостинг и открываем консоль:
wget -nc http://site.com/ARCHIVENAME.zip #Укажите адрес и имя архива, который будем качать.
  1. Если всё правильно сделали, то увидите как бежит погрессбар.




Умнее, быстрее, эффективнее!

 1   1 год   ssh
 1   1 год   ssh

SSH: вывод top User-agent

Работает только при включенном access.log. Поэтому важно для начала включить запись логов в панели вашего хостинга.

cd YOUR_ACCESSLOG_DIR
cat YOUR_WEBSITE_NAME.access.log | awk '{print $(NF-2)}' | sort | uniq -c | sort -nr
1 год   ssh

Apache: Боты Ahrefs озверели!

Есть замечательный для SEO-оптимизаторов сервис, который называется Ahrefs. Позволяет собирать информацию по различным сайтам, сравнивать её с другими сайтами и как следствие создавать правильную картинку о конкурентах.

А вот сегодня я был обескуражен количеством обращений к простому интернет-магазину от этих товарищей:

351    13.30%  Mozilla/5.0 (compatible; AhrefsBot/5.2; +http://ahrefs.com/robot/)

Техподдержка хостинга мне маякнула, что они тоже обескуражены и решила ограничить доступ к сайту, от чего я был ещё более обескуражен данным действием. И пришлось решать вопрос ребром и заблокировать эти чёртовы парсеры интернета:

<ifModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} ^.*(AhrefsBot|SemrushBot).*$ [NC]
RewriteRule .* - [F,L]
</ifModule>

Отловим Ahrefs (и Semrush туда же) по user-agent через htaccess и покажем им 403 ошибку.
Нагрузки нет, хостинг доволен, ограничения сняты, клиент в восторге. Работаем дальше.

 3   1 год   htaccess

Битрикс 24: Внедрение

Раньше все внедряли поголовно 1С и зарабатывали хорошие деньги. Сейчас пошла мода на Битрикс 24. Дело наверное даже не в моде, а в том, что предприятия и руководители компаний задумываются об эффективности инвестиций. А инвестицией может быть не только деньги, но и энергия.

Чтобы не быть аутсайдером, я покрутил Битрикс 24, изучил его тонкости и успел его внедрить на двух предприятиях. И чем больше я с ним знакомлюсь, тем более мне интересно.

Сейчас, например, разрабатываю интеграцию 1С, Битрикс 24 и 1С Битрикс. Чтобы вся система была централизованной и была полная автоматизация обработки лидов, формированию коммерческих предложений, выставления счетов и еженедельной отчетности «на стол руководителю».

Рекомендую.

 1   1 год   Битрикс24

JivoSite: отключить звук появления окна

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

Что ж, будем решать через DOM:

Открываем существующий код JivoSite и добавим в него пару строчек:

<script type='text/javascript'>
(function() { var widget_id = 'YOUR_ID'; var d = document; var w = window;
    function l() { var s = document.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = '//code.jivosite.com/script/widget/' + widget_id; var ss = document.getElementsByTagName('script')[0];
        ss.parentNode.insertBefore(s, ss); } if (d.readyState == 'complete') { l(); } else { if (w.attachEvent) { w.attachEvent('onload', l); } else { w.addEventListener('load', l, false); } } })();

// Ниже код, который нужно добавить после вашего скрипта
function jivo_onLoadCallback() {
document.jivo_container.HTMLAudioElement.prototype.play = function () {};
}
</script>

После этого никакие звуки не будут раздражать вас и вашего пользователя.

 5   2018   jivosite   js

JS: Настройки Fancybox 3

Чтобы не писать каждый раз, запишу здесь:

$("[data-fancybox]").fancybox({
    loop: true,
    gutter: 30,
    buttons: [
        "zoom",
        "share",
        "slideShow",
        "fullScreen",
        "thumbs",
        "close"
    ],
    protect: true,
    transitionEffect: "circular",
    slideShow: {
        autoStart: true,
        speed: 5000
    },
    lang: "ru",
    i18n: {
        ru: {
            CLOSE: "Закрыть",
            NEXT: "Вперед",
            PREV: "Назад",
            ERROR: "Ошибка загрузки. <br/> Повторите запрос позднее.",
            PLAY_START: "Начать демонстрацию",
            PLAY_STOP: "Приостановить демонстрацию",
            FULL_SCREEN: "На полный экран",
            THUMBS: "Миниатюры",
            DOWNLOAD: "Скачать",
            SHARE: "Поделиться",
            ZOOM: "Увеличить"
        },
    }
};
 5   2018   fancybox   js
Ранее Ctrl + ↓