Англоязычный блог

Сделал англозычный блог на сабдомене blog.karpolan.com, буду перенесить туда только самое полезное или очень популярное.

Можете подписываться 🙂

Нашел не доделаный веб-сайт

Продлевал домены, обнаружил что у меня на DeepTown.com не доделаная поделка на WordPress. Я там когда-то тестировал всякие снипеты, кастомные типы постов, связи между ними…

В общем надо бы доделать, сейчас проверим как это все индексирутеся:

P.S. Какой только фигни у меня в загажниках не валяется…

Тот редкий случай когда Гавно-Код™ лучше универсального.

Опять занесло меня в PHP программирование, надо было сделать подержку настроек из глобального config.json для уже существующих сайтов на WordPress.

И вот столкнулся с тем редким случаем когда Гавно-Код™ aka Как-Индусы® лучшее решение:

$props = explode('.', $configPropertyName);
switch (count($props)) {
// TODO: Add more deep cases if the Config become too nested.
    case 3:
        $value = $config->{$props[0]}->{$props[1]}->{$props[2]};
        break;
    case 2:
        $value = $config->{$props[0]}->{$props[1]};
        break;
    default:
        $value = $config->{$props[0]};
}    

Можно было бы написать итератор на любую глубину вложености свойств, или загрузить JSON в виде именованого массива. Но все эти способы менее читаемы, да и не дают никакого выиграша ни в скорости, ни в отладке.

P.S. Не забывайте писать TODO: для таких вот «хаков», через год сами не поймете почему так написано и вместо добавить пару копи-пастов начнете рефакторить с криками: «Да кто так пишет?!»

WordPress on Staging + Static HTML on Production

Железобетонно-рабочего решения для «WordPress on Staging + Static HTML on Production» на данный момент нет 😦

Появился целый набор платных сервисов которые пытаются колдовать с таким решением, но делают пока это с переменным успехом…

Почти у всех не работают скрипты шаринга в соцсети, контактные формы, файлы и документы за пределами CMS WordPress, слетают кастомные CSS, не работает мобильная версия темы, ну и остальное по мелочи.

Самым надежным на данный момент выглядит следующий подход:

  1. Устанавливаем WP в папку на отдельном секретном саб-домене.
  2. Настраиваем WP чтобы работал от корня (иначе относительные ссылки будут глючить)
  3. В корне сайта, в под-папках, раскладываем материалы которые не имеют отношения к WordPress (статические страницы, PDF, ZIP и прочие файлы).
  4. В WordPress делаем страничку с агрегацией ссылок на все НЕ WordPress ресурсы вашего сайта (ссылку на такую страничку надо хотя бы одну).
  5. Создаем все страницы и посты сайта прямо в админке WordPress.
  6. Экспортируем контент в ZIP архив. Можно с помощью плагина Simply Static, можно внешней утилитой типа Website Downloader . Желательно перед экспортом отключить всякие кеш-плагины, минифаеры файлов, и прочие «улучшатели» контента.
  7. Заливаем ZIP с архивом сайта на хостинг основного домена и распаковываем его прямо в корень. Можно использовать S3 bucket или GitHub pages чтобы «сэкономить».
  8. «Отключаем» WordPress на секретном субдомене. Можно временно заменять Database криденшелы в wp-config.php, переводить сайт в доступ по паролю, остановить MySQL сервис и т.д. Я просто выключаю виртуалку с инстансом WordPress.

Все! С этого момента счастливо живем без спама, попыток взлома и прочего WordPress дурдома.

Если надо будет что-то добавить или изменить на сайте: «включаем» WordPress и повторяем все действия с пункта №5 и до конца.

P.S. Если у вас сильно отличается мобильная и десктопная версии сайта, лучше делать 2 разных экспорта статического контента. Один для мобильной темы, второй раз для полноразмерной. Редиректить пользователя на подходящий веб-сайт придется уже на основном хостинге.

Книга про Создание Продуктов

С полгода назад написал онлайн книгу о том как делать продукты.

Там всего 9 «страничек» про то что важно в бизнесе, а что можно отложить до лучших времен.

Разворачивание веб сайтов, современный вариант

В эпоху клаудов и сайто-конструкторов напридумывали много всякого… Для изучения всего этого зоопарка провел ряд экспериментов с разными подходами и на разных серверных системах.

Пожалуй остановлюсь на вот таком подходе для разворачивания веб-сайтов:

  1. Делаем репозиторий .git, например на Bitbucket.
  2. Заливаем в него скелетон сайта, скрипты, CMS если надо.
  3. Делаем виртуальный хостинг или создаем сайт на Microsoft Azure.
  4. Клонируем .git к себе на хостинг.
  5. Через браузер (на крайний случай удаленный доступ) до-настраиваем скрипты, базы и CMS.

В случае автоматического апдейта CMS или изменения контента пользователями, переодически делаем git push с сервера, через консоль. Для этого лучше сделать отдельный аккаунт на Bitbucket и прописать в него SSH ключ от пользовтаеля на сервере.

Вроде и просто, и секьюрно, и даже есть бекап, да еще с контролем версий и изменений

CSS @font-face без указания имени файла

Если вы купили web тему со кастомным шрифтом в виде CSS @font-face, но этот фонт не поддерживает Cyrilic или как-то криво отображается на разных устройствах, то вместо покупки похожего шрифта, проще всего заменить левый font на что-то стандартное: Arial, Times New Roman, Impact и т.д.

Я около часа гуглил и читал спецификации стандартов CSS/HTML чтобы разобраться как же можно задать @font-face без загрузки файла. Оказывается есть возможность задавать параметр @font-face.src: не только как url() но и через директиву local() !

Вот реальный пример из WordPress темы Tank которую я купил для сайта Привет Танкистам, а потом оказалось что фонт geometric_slabserif_703 для русского языка тупо не существует 😦

@font-face {
    font-family: 'webfontregular';
    src: url('geometric_slabserif_703_bold_condensed_bt-webfont.eot');
    src: url('geometric_slabserif_703_bold_condensed_bt-webfont.eot?#iefix') format('embedded-opentype'),
         url('geometric_slabserif_703_bold_condensed_bt-webfont.woff') format('woff'),
         url('geometric_slabserif_703_bold_condensed_bt-webfont.ttf') format('truetype'),
         url('geometric_slabserif_703_bold_condensed_bt-webfont.svg#webfontregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

А вот так я переопределил @font-face темы под виртуальным названием webfontregular на стандартный шрифт Arial:

@font-face {
    font-family: 'webfontregular';
    src: local('Arial');
    font-weight: normal;
    font-style: normal;
}

В общем @font-face src: local(‘Font Name’) рулит! А в стандартах описано слабо…