shoorick: (Рыжий)
Что-то стало модно всё подряд писать на яваскрипте. Куда ни глянь — всюду JavaScript, даже за пределами веба. Генератор карт TileMill — на яваскрипте. Текстовые редаторы и IDE теперь тоже на нём же пишут. Потому-то современные редакторы, наверное и тормозят — у них ведь помимо редактора ещё целый браузер внутри! У Komodo Edit и Komodo IDE — Mozilla Firefox, у Атома и Visual Studio Code — Chromium.

ls ~/bin/komodo/lib/mozilla

http://shoorick.ru/2016/09/02/js-everywhere/
shoorick: (Рыжий)
Задача — сделать на веб-странице косой левый край у текстового блока, то есть, нужна лесенка из строк. Ширина страницы произвольная, текст должен переноситься автоматически.

Решение — накидать слева плавающих элементов с одинаковой шириной, но разной высотой, отличающейся у соседних элементов на расстояние между базовыми линиями соседних строк. Пусть текст и обтекает эту лесенку:

Косой край

Готовый пример — http://codepen.io/shoorick/pen/MaEdPN

http://shoorick.ru/2015/10/16/incline-left-edge/
shoorick: (Рыжий)
На сайте Ильменского фестиваля теперь используется правильная карта — её можно двигать и масштабировать, включать отображение нужных маркеров и кликать по ним, чтоб получить подсказку.

Карта

Карта — OpenStreetMap, стиль отображения — свой собственный на основе OSM Bright, отрисованный с помощью TileMill, иконки — The Map Icons Collection. Библиотека для отображения — Leaflet c плагинами Leaflet-hash и Leaflet.fullscreen.

Схема с ёлками, если кому-то всё-таки нужна, спрятана под ссылкой, чуть ниже карты. Кроме того, при клике на кнопку с ромбами можно включить наложение этой схемы на карту.

http://shoorick.ru/2015/07/04/interactive-map/
shoorick: (Рыжий)
Улучшенный Ильменский сайт вчера наконец-то переехал на ilmeny.org — там теперь и шустрый FastCGI-бэкенд, и HTML5/CSS3/SVG, и нормальный внешний вид на мобильных устройствах. Точнее, не сайт переехал, а адрес стал указывать на новый сайт вместо старого. Так что процесс разработки и тестирования можно считать завершённым — пора начинать собираться на фестиваль.

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

test.ilmeny.org

http://shoorick.ru/2015/06/09/ilmeny-org-release/
shoorick: (Рыжий)
Давно хотел улучшить ильменский сайт, да всё руки не доходили. Уж подумывал и переписать совсем. Что только не пробовал — и тяжёлый перловый фреймворк Catalyst, и написанные на PHP системы управления сайтами — Друпал да ВордПресс. И всё никак не получалось дойти за какого-то осмысленного результата. В итоге всё свелось к переписыванию на Mojolicious::Lite — это всяко веселее, чем набор древних CGI-скриптов.

Начал в мае 2011 года — бросил. Подобрал в мае тринадцатого — снова бросил. Пришёл май пятнадцатого — снова взялся и как-то всё-таки дошёл до завершения первого этапа: воссоздал на моджо всю функциональность прошлого сайта, который был запущен ещё в 2003 году. Ну и перекрасил попутно. Свежий сайт да ещё и на новом железе с другими ОС и веб-сервером работает гораздо шустрее старого: отдаёт 50 страниц в секунду, а не две. Кстати, Друпал с ВордПрессом (правда, без нормального кэширования) работают ещё медленнее, чем старый сайт.

Новый сайт лежит на test.ilmeny.org, в выходные потестирую, в понедельник, наверное, запущу его вместо старого.

test.ilmeny.org

Если увидите на свежем сайте что-то неправильное — сообщите, пожалуйста.

P. S. Попутно выяснил: боевой режим в Mojolicious называется не production, как я почему-то думал, а deployment.

upd/14:40: мне тут товарищ подсказывает, что в Mojolicious всё-таки production, а deployment — это значение переменной окружения PLACK_ENV, которую выставляет Starman.

http://shoorick.ru/2015/06/06/test-ilmeny-org/
shoorick: (Рыжий)
Чисто перловые HTTP-клиенты, включая широко известный модуль LWP — не самые быстрые, что вполне логично. Гораздо быстрее работают, например, те модули, что используют cURL. В одном из рабочих проектов понадобилось ускорить чтение из сети — это оказалось узким местом. Я проверил — действительно, cURL работает шустрее, чем LWP, при этом к cURL в перле есть несколько интерфейсов. Результаты моего замера вышли такими:
                    Rate     LWP WWW::Curl::Simple   Net::Curl::Easy
LWP                474/s      --              -38%              -88%
WWW::Curl::Simple  760/s     60%                --              -82%
Net::Curl::Easy   4115/s    768%              441%                --

(под LWP здесь понимается LWP::UserAgent).

Шустрый LWP::Curl выбыл из соревнования, потому что я не нашёл, как в нём добавить нужный заголовок к HTTP-запросу. Был проверен ещё и WWW::Curl::Easy — он показал ту же скорость, что и Net::Curl::Easy, вывалив при этом кучу предупреждений — так что он тоже выбыл из забега.

Однако при проведении замера я столкнулся со странным поведением Net::Curl::Easy — при выполнении метода perform на экран (точнее, в STDOUT) иногда выводились полученные данные. Выяснилось, что правильный способ запуска описан в руководстве не на Net::Curl::Easy, а на WWW::Curl — надо не только выполнить запрос, но и указать до выполнения запроса, куда писать полученное содержимое:
# A filehandle, reference to a scalar or reference to a typeglob can be used here.
my $response_body;
$curl->setopt(CURLOPT_WRITEDATA,\$response_body);

В Net::Curl::Easy это тоже сработало.
http://shoorick.ru/2014/11/27/clean-net-curl-easy/
shoorick: (Default)
В 2013 году в CMS WordPress появилась новая тема — Twenty Thirteen, которая достаточно хороша: написана с использованием HTML5, корректно ведёт себя на разных размерах экрана и не страдает обилием ненужных финтифлюшек. Но не обошлось и без ложки дёгтя: в теме используются взятые с Google Fonts шрифты Bitter и Source Sans Pro — они весьма хороши, но в них нет кириллицы. Понятно, что можно, создав дочернюю тему, поправить используемые в ней стилевые правила, указав нужные шрифты, однако хочется сделать всё правильно: и загрузить нужный шрифт, и избежать загрузки ненужного.

Поиск не дал готового решения (что, вообще-то, странно) — пришлось изобретать самому, руководствуясь тем, что нашлось. Итак, для замены шрифтов надо:

  1. Создать дочернюю тему;

  2. В стилевом файле style.css дочерней темы указать нужные шрифты;

  3. Отключить загрузку ненужных и добавить загрузку нужных шрифтов, добавив в файл functions.php дочерней темы такой код:


if ( ! function_exists('child_fonts_url')) {
    function child_fonts_url() {

        $fonts_url = '';

        $open_sans = _x( 'on', 'Open Sans font: on or off', 'child' );
        $open_sans_condensed
           = _x( 'on', 'Open Sans Condensed font: on or off', 'child' );

        if ( 'off' !== $open_sans || 'off' !== $open_sans_condensed ) {
            $font_families = array();

            if ( 'off' !== $open_sans )
                $font_families[] = 'Open Sans:400italic,400,700';

            if ( 'off' !== $open_sans_condensed )
                $font_families[] = 'Open Sans Condensed:300';

            $query_args = array(
                'family' => urlencode( implode( '|', $font_families ) ),
                'subset' => urlencode( 'latin,cyrillic' ),
            );
            $fonts_url = add_query_arg(
                $query_args,
                '//fonts.googleapis.com/css'
            );
        }

        return $fonts_url;
    } // function child_fonts_url
}

function disable_twentythirteen_fonts() {
    wp_deregister_style('twentythirteen-fonts');
}

add_action( 'wp_enqueue_scripts', 'disable_twentythirteen_fonts', 11 );
wp_enqueue_style( 'child-fonts', child_fonts_url() );

Здесь child — имя дочерней темы. Функция child_fonts_url списана с twentythirteen_fonts_url из темы Twenty Thirteen — изменены лишь используемые шрифты (имена шрифтов и переменных, список начертаний и наборов символов) да название функции.
shoorick: (Рыжий)
Совершенно случайно нашёл способ быстрого создания пустого HTML-файла — достаточно написать команду:
echo | tidy > empty.html
Получается такой файл:
<!DOCTYPE html>
<html>
<head>
<meta name="generator" content=
"HTML Tidy for HTML5 (experimental) for Linux/x86 https://github.com/w3c/tidy-html5/tree/c63cc39">
<title></title>
</head>
<body>
</body>
</html>
Проверено на tidy-html5 — я его поставил вместо обычного, не понимающего HTML5. Обычный, который можно поставить обычным путём (sudo apt-get install tidy — в Ubuntu), выдаёт:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org">
<title></title>
</head>
<body>
</body>
</html>
shoorick: (Рыжий)
Голый WordPress работает. Jetpack — почти что нет: не взлетает при попытке привязки его к wordpress.com. Первым делом заподозрил, что не хватает каких-нибудь модулей PHP, но документация вордпресса говорит, что ничего не надо — достаточно веб-сервера (рекомендуются Apache или nginx), PHP ≥ 5.2.4 и MySQL ≥ 5.0, а на jetpack.me тоже ничего нужного нет.

За бубном тянуться лень, поэтому пойдём правильным путём: будем читать логи. Однако, там нифига нет. Оказывается, надо включить режим отладки — написать в wp.config.php:
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);
Такие настройки включат запись сообщений об ошибках, но не позволят сыпаться им на страницу.

Чтение логов с последующими экспериментами показало, что для работы вордпресса с джетпаком нужны хотя бы модули xml и ctype — без них джетпак не хочет общаться с wordpress.com. По умолчанию эти модули в PHP включены, однако некоторые экономные хостинг-провайдеры их отключают.
shoorick: (Рыжий)
Заметил, что шрифты Droid Sans и Open Sans сильно похожи. Стал сравнивать — почти что близнецы:

Шрифты Droid Sans и Open Sans

Droid Sans чуть у́же и темнее, а в остальном они похожи. Из статьи в английской википедии узнал, что разница у этих шрифтов не только в ширине — в наличии курсива. В Open Sans курсив настоящий, а в Droid Sans — жалкая китайская подделка нет — всего лишь наклонное начертание. Ну и выбор начертаний у Open Sans побогаче: помимо Normal и Bold есть ещё и Light, Semi-Bold, Ultra-Bold.

Open Sans можно использовать на сайтах — он размещён в Google WebFonts. При указании шрифта в CSS лучше сначала указать Open Sans (потому что он с настоящим курсивом), а уж потом Droid Sans (на случай, когда Open Sans недоступен):
.some {
  fond-family: "Open Sans","Droid Sans",sans-serif;
}
shoorick: (Рыжий)
Наконец-то удалось запустить карту велошатаний — http://shoorick.ru/lj/map/bike.html
Масштаб выбирается автоматически, в зависимости от натянутого на карту трека.

Карта

На карту, отображаемую библиотекой Leaflet, можно накладывать разные слои. Среди таких слоёв может быть и слой с треками в формате GPX или KML — его можно наложить с помощью соответствующего плагина, входящего в leaflet-plugins.

В процессе подготовки к UWDC-2012 я подготовил трек, попытался натянуть его на карту — не заработало. Чтение логов и гугление показало, что Google Chrome не даёт яваскрипту читать локальные файлы, если веб-страница получена с локального ресурса (то есть, её URL начинается на file://), а не по HTTP. Выходов несколько: либо заливать карту на сервер и отлаживать там (что, в общем, не представляет сложности, когда есть sshfs), либо поднимать простенький сервер прямо на рабочем месте. Подобных серверов — вагон и маленькая тележка. Думаю, одних только перловых серверов на моём ноутбуке явно больше одного. Увидел на stackoverflow способ запуска простого HTTP-сервера на питоне:
python -m SimpleHTTPServer 8000
Проверил — работает.
shoorick: (Рыжий)
Как я только не запускал перловые скрипты на веб-серверах — и как CGI, и как mod_perl (на обоих апачах), и как FastCGI через nginx.

А какой способ принято сейчас использовать?

Мы завели отдельную железяку под перловый хостинг, чтоб выселить туда всё перловое: несколько сайтов на Mojolicious, Catalyst и Movable Type плюс древний самописный кошмар, который давно переписать на чём-нибудь современном.

Хочется сделать это хорошо и правильно. Как быть? Что читать?
shoorick: (Рыжий)
Посчитал ширину экранов посетителей сайтов, использующих счётчик openstat.ru (бывший SpyLog) — получил график



Чтоб не забыть, как считал, написал заметку на хабрахабр — пусть там лежит.

Получатеся, самая распространённая ширина монитора в сентябре — 1280 точек, а экраны с шириной от 1024 до 1600 точек встречаются примерно на 80 процентах устройств, с которых смотрят сайты.
shoorick: (Default)
Два дня гугления, помноженные на эксперименты с бубном, показали: если в своей теме многоязычного сайта на Drupal 7 надо вывести меню, то надо писать не так, как советует подавляющее большинство источников:
<?php print render( menu_tree('menu-info-about') ); ?>
а по-другому:
<?php print render( i18n_menu_translated_tree('menu-info-about') ); ?>
Если же пойти первым путём, то в выводимое меню попадут пункты на ненужных языках.
shoorick: (Default)
Обновлял сегодня php и его модули на сервере с FreeBSD — получил сообщение:
Your apache does not support DSO modules
Обновил апач — после этого и php5-* нормально обновились.
shoorick: (Default)
Продолжаю ковырять transition — повернул баян на 90°.

Код с действующим примером выложен на http://jsfiddle.net/shoorick/bp7QM/ (там сразу видно всё: и код с подсветкой синтаксиса, и результат), кроме того, как и в прошлый раз, пример — на http://shoorick.ru/lj/net/accordion-horizontal.html, код — на гитхабе и под катом )
shoorick: (Default)
Разбираюсь с модными HTML5 и CSS3, а точнее, с бесскриптовой анимацией, с помощью transition. Попробовал сделать вертикальный (обычный) аккордеон — почти получилось. Ни один яваскрипт не пострадал. Работает под линуксом в Firefox 10, Opera 11.60 и Chromium 14. Под виндой в IE 8 — не работает. В остальных браузерах и ОС пока не тестировал. Modernizr пока тоже не прикручивал.

Действующий пример лежит на http://shoorick.ru/lj/net/accordion-vertical.html, код — на гитхабе и под катом )
Следующая задача — повернуть получившийся баян на 90° — с ней я почти придумал, как справиться. Дальшейшие — смена картинок и прокрутка содержимого блока без участия яваскрипта и посетителя сайта — пока туманны. Но всё равно придумаю. Или нагуглю. Хотя в девизе моей альма-матери другой порядок действий: Нагуглю или придумаю. Aut viam inveniam, aut faciam.
shoorick: (Default)
perl -nle 'print $1 while m!(http://example.com/[^" >]+)!g'
Для входящих данных
<a href="http://example.com/one">one</a> and <a href="http://example.com/two">two</a>
http://example.com/first and http://example.com/second
none

возвращает
http://example.com/one
http://example.com/two
http://example.com/first
http://example.com/second


В виде обычного перлового скрипта — на гитхабе.
shoorick: (Default)
В этом вашем друпале, как показал метод научного тыка, вывести нужное меню можно командой
<?php print render( menu_tree('menu-info-for-root') ); ?>
Но найти информацию об этом на drupal.org с его миллионом страниц или, что ещё хуже, на drupal.ru, который представляет из себя форум, где одни чайники спрашивают совета у других — нереально.

Тот, кто ругает Mojolicious за корявую документацию — не видел, наверное, тот ужас, который творится в друпале.

Я негодую.
shoorick: (Default)
Понадобилось перенести сайт с малоизвестной CMS на Drupal. Две недели гуглил и читал крохи найденной документации. Понял, что общедрупальный бардак с документацией в полной мере относится и к модулям: например, в рекомендуемом для переездов модуле Migrate я так и не смог за эти две недели разобраться: вместо внятного руководства — какие-то блоги да презентации, целевой аудиторией имеющие телепатов. Человеку, даже знающему PHP и умеющему слегка настраивать Drupal, но не писавшему под него модулей, что-либо понять в таком мануале, а тем более, сделать работающий пример — нереально.

Плюс к тому меня вот уже который год удивляет адресация на друпальных сайтах: их авторы вместо того, чтобы сделать правильные адреса, оставляют всё как есть. Даже на drupal.org полно страниц с адресами типа /node/шестизначный_номер.

Дело кончилось тем, что за день я написал перловый скрипт, который и перегнал мне данные (хотя как-то не совсем правильно), выдав в итоге кучу SQL-запросов. Сами данные также были предварительно обработаны перлоскриптами.

Profile

shoorick: (Default)
shoorick

December 2016

S M T W T F S
    1 23
45678910
11121314151617
18 19 2021222324
25262728293031

Syndicate

RSS Atom

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Sep. 26th, 2017 04:16 pm
Powered by Dreamwidth Studios