Архив рубрики: веб

Симметричный шестиугольный блок

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

<style>
    .out, .in {
        display: inline-block;
        overflow: hidden;
    }
</style>
<body>
    <div class="out" style="transform: skew(α)">
        <div class="in" style="transform: skew(β)">
            <img src="picture.png" alt="Board" style="transform: skew(γ)">
        </div>
    </div>

где α, β и γ — углы, на которые проводится скос элементов.

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

Для углов α = 20° (20deg в CSS), β = −30°, γ = 40° и картинки, состоящей из квадратов результат будет таким:

Можно заметить, что для возвращения картинки к нормальному положению углы α и γ должны совпадать. Угол β больше, чем α, но не в два раза — меньше. Для того, чтобы углы картинки обрезались симметрично, надо, чтобы тангенсы углов α и β относились как 1 к −2.

Можно CSS-правило трансформации записать в виде матрицы, где указывается тангенс: transform: matrix(1, 0, тангенс, 1, 0, 0) — тогда вместо вычисления углов путём взятия арктангенса, который есть, например, в дополнительных пакетах к Sass, но не в нём самом (и уж тем более не в CSS), можно будет пользоваться простым умножением:

$tan: .5;

.out, .in {
    display: inline-block;
    overflow: hidden;
}

.out, .in img {
    transform: matrix(1, 0, $tan, 1, 0, 0);
}

.in {
    transform: matrix(1, 0, -2*$tan, 1, 0, 0);
}

Результат — группа из стоя́щих друг на друге квадратов режется по диагонали:

Для $tan: .577350269 (tg 30°) углы будут кратны тридцати градусам:

Треугольники

В обоих случаях Google Chrome режет неидеально: углы правильные, но некоторые линии разреза параллельно перенесены на несколько точек. Firefox рисует аналогично. Хотя если не заниматься пиксельхантингом рассматривать придирчиво каждую точку, результат выходит вполне приемлемым.

Дополнение/: если наружному элементу .out задать нулевую высоту строки line-height: 0, то линии разреза переноситься не будут ни в Хроме, ни в Файрфоксе — станет как надо.

Подсчёт числа DOM-элементов при тестировании через Test::Mojo

Модуль Test::Mojo позволяет проверить, нашлось ли нужное количество DOM-элементов:

$t = $t-&gt;element_count_is('div.foo[x=y]', 5);
$t = $t-&gt;element_count_is('html body div', 30, 'thirty elements');

Но так можно проверить лишь равенство ожидаемого и полученного, в то время как иногда нужны другие операции.

$t-&gt;get_ok("$ROOT/some.xml");
my @items = $t-&gt;tx-&gt;res-&gt;dom-&gt;find('rss channel item')-&gt;each;
ok scalar @items &gt; 42, 'More than 42 items in some.xml';

Правильный тип для офисных файлов

Перловый микрофреймворк Mojolicious::Lite умеет сам выдавать существующие файлы, но при этом не все из них получают верный тип содержимого Content-type: некоторые файлы прикидываются обычными текстовыми (text/plain), другие же вообще не имеют никакого типа — браузер такие файлы может воспринимать как угодно. В состав фреймворка входит модуль Mojolicious::Types, в котором определены MIME-типы для наиболее популярных (most common) расширений файлов:

appcache -> text/cache-manifest
atom     -> application/atom+xml
bin      -> application/octet-stream
css      -> text/css
gif      -> image/gif
gz       -> application/x-gzip
htm      -> text/html
html     -> text/html;charset=UTF-8
ico      -> image/x-icon
jpeg     -> image/jpeg
jpg      -> image/jpeg
js       -> application/javascript
json     -> application/json;charset=UTF-8
mp3      -> audio/mpeg
mp4      -> video/mp4
ogg      -> audio/ogg
ogv      -> video/ogg
pdf      -> application/pdf
png      -> image/png
rss      -> application/rss+xml
svg      -> image/svg+xml
txt      -> text/plain;charset=UTF-8
webm     -> video/webm
woff     -> font/woff
woff2    -> font/woff2
xml      -> application/xml,text/xml
zip      -> application/zip

странно, но среди них нет ни одного, относящегося к офисным пакетам. На сайте Microsoft | Developer можно найти список типов — Office 2007 File Format MIME Types for HTTP Content Streaming. Чтобы не задумываться, какие же из этих типов брать, можно сохранить все — если есть какой-нибудь конфигурационный файл, он вполне подойдёт для хранения такого списка. В моём случае конфигурационные файлы обычно в формате YAML — это удобно.

---
# ... ещё какие-нибудь параметры

# MS Office types
types:
    rtf:    application/rtf
    doc:    application/msword
    dot:    application/msword
    docx:   application/vnd.openxmlformats-officedocument.wordprocessingml.document

Где-нибудь перед запуском приложения надо добавить типы (допустим, конфигурация приложения доступна через $config)

while ( my ( $ext, $type ) = each %{ $config-&gt;{'types'} } ) {
    app-&gt;types-&gt;type($ext =&gt; $type);
}

Правда, при выдаче файла тип его содержимого придётся всё-таки указать явно, иначе Mojolicious вернёт тип только для знакомых файлов, а для офисных будет undef

my $type = $self-&gt;app-&gt;types-&gt;mapping-&gt;{$ext}-&gt;[0];
if (my $asset = $self-&gt;app-&gt;static-&gt;file("/$path/$id.$ext")) {
    $self-&gt;res-&gt;headers-&gt;content_type($type);
    return $self-&gt;reply-&gt;asset($asset);
}
else {
    return $self-&gt;reply-&gt;not_found;
}

Теперь и офисные файлы возвращаются нормально.

Надо ругаться в боевом режиме

В состав перлового микрофреймворка Mojolicious::Lite входит класс Mojo::Log, который не просто пишет сообщения в лог, а ещё и учитывает важность сообщений — в отладочном режиме пишет много, а боевом — мало. Обнаружилось, что сообщения об ошибках имеют тот же класс debug, что и остальные сообщения

[Tue Nov 13 12:25:51 2018] [debug] Format html
[Tue Nov 13 12:25:51 2018] [debug] 200 OK (0.076118s, 13.137/s)
[Tue Nov 13 12:25:53 2018] [debug] GET "/some/url"
[Tue Nov 13 12:25:53 2018] [debug] Template "not_found.development.html.ep" not found
[Tue Nov 13 12:25:53 2018] [debug] Rendering template "not_found.html.ep"
[Tue Nov 13 12:25:53 2018] [debug] Rendering template "layouts/error.html.ep"
[Tue Nov 13 12:25:53 2018] [debug] Rendering cached template "layouts/admin.html.ep"
[Tue Nov 13 12:25:53 2018] [debug] Rendering cached template "search_form_navbar.html.ep"
[Tue Nov 13 12:25:53 2018] [debug] Format html
[Tue Nov 13 12:25:53 2018] [debug] 404 Not Found (0.004841s, 206.569/s)

из-за чего при запуске в продакшне под реальной нагрузкой в лог не попадает почти ничего — например, там нет сообщения об ошибках 404 Not Found.

Возможно, где-нибудь во внутренностях Mojo можно исправить такую ситуацию, но мы пойдём другим путём — применим хук after_dispatch:


hook after_dispatch =&gt; sub {
    my $self = shift;
    my $req  = $self-&gt;req;
    my $res  = $self-&gt;res;

    if ( $res-&gt;code &gt;= 400 ) {
        $self-&gt;app-&gt;log-&gt;error(join ' ',
            '"' . $req-&gt;method . ' ' . $req-&gt;url . '"',
            $res-&gt;code,
            $req-&gt;headers-&gt;referrer || '-',
            '"' . $req-&gt;headers-&gt;user_agent . '"',
        );
    }
};

after_dispatch

Результат — в логе появились сообщения об ошибках:

Sending children hup signal
[Tue Nov 13 12:30:46 2018] [error] "GET /none" 404 - "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36"
[Tue Nov 13 12:44:50 2018] [error] "GET /SW/Rplayer.html" 404 - "Mozilla/5.0 (compatible; Linux x86_64; Mail.RU_Bot/2.0; +http://go.mail.ru/help/robots)"

Инструменты разные — методы похожие

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

  • Вместо  перла — PHP,
  • Модули тоже лежат рядом со своим кодом, но управляются не картоном, а через composer,
  • Композер и тесты может запустить (composer test), и отладочный сервер (composer start). Но можно для однообразия для обоих языков сделать Makefile и выполнять нужные действия командой make. Например, у меня запуск тестов — всегда make test, чтобы не путаться.
  • Вместо Mojolicious::Lite — микрофреймворк Slim. Для быстрого старта — Slim-Skeleton.
  • В шаблонах вместо Embedded Perl — Twig.
  • Если сайт работает через PHP-FPM, то нет нужды пинать демона каждый раз, как обновится код — он сам обрабатывает подобную ситуацию. Развёртывание свежей версии простого веб-приложения сводится к трём действиям: обновление рабочей копии (svn up либо git pull), разрешение зависимостей (composer install) и на всякий случай запуск тестов.

Слон и код

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

Почти что Перл с Апачем

Новости географии: в одном люксембургском углу находится никому не известная деревня Шенген, ближайшая к ней железнодорожная платформа, буквально на другом берегу реки — Perl (по-русски всё-таки Перль), это же имя носит и муниципалитет (в других переводах — коммуна), и крупнейший его населённый пункт. А рядом с ними — Apach, но по-русски это не Апач, а, если верить википедии, Апаш, хотя, думаю, немцы могут прочесть и как Апах. При этом все три эти деревни — в разных странах.

Карта

Не скайп

Скайп на моём компьютере теперь выглядит так:

Скайп не работает

и, понятно, не работает. А телеграммы в соседней вкладке вполне успешно ходят. Значит, теперь и скайпом придётся пользоваться через прокси.

Как задать ширину блоков, когда есть LESS и Bootstrap 3

Чтоб не замусоривать код веб-страниц классами, которые предлагает фреймворк Bootstrap, лучше добавить свойства из этих классов к своим классам либо id, которые и так уже присутствуют в коде — для этого в CSS-препроцессоре LESS есть функция extend. Однако оно не всегда работает: код


.logo {
  &amp;:extend(.col-xs-6);
  &amp;:extend(.col-sm-4);
  &amp;:extend(.col-md-6);
}

в лучшем случае LESS молча проигнорирует, а может ещё и выругаться, прекратив обработку.

Работает другое:


.logo {
  .make-xs-column(6);
  .make-sm-column(4);
  .make-md-column(6);
}

Результат —


.logo {
  float: left;
  width: 50%;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 480px) {
  .logo {
    float: left;
    width: 33.33333333333333%;
  }
}
@media (min-width: 960px) {
  .logo {
    float: left;
    width: 50%;
  }
}

Рецепт найден на https://www.sitepoint.com/less-beyond-basics-bootstrap-mixins-library/

На ильменском сайте — как в википедии

На сайте Ильменского фестиваля к длинным страницам, в тексте которых попадаются заголовки, автоматически добавляется содержание — можно быстро перейти куда-нибудь вниз. Подобная штуковина есть в CMS MediaWiki (на ней сделана Википедия) и в багтрекере Redmine. А теперь — и на ильменском сайте.

Содержание страницы сайта Ильменского фестиваля

Увидеть такое содержание можно на странице с программой фестиваля — http://ilmeny.org/doc/2017/program