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

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

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


.logo {
  &:extend(.col-xs-6);
  &:extend(.col-sm-4);
  &: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

Подсветка синтаксиса LESS- и SCSS-файлов в geany

Пробую на работе писать код в geany — он в отличие от Комодо, Атома и Вижл Студио Кода сделан сам по себе, а не из браузера и поэтому гораздо шустрее. Имеющаяся у меня версия 1.24.1, вышедшая почти три года назад (да, я знаю, что есть и более свежие, но у меня дебиан) не подсвечивает синтаксис в LESS- и SCSS-файлах, а при ручном указании типа (Document → Set Filetype → Markup Languages → Cascading Stylesheet) подсветка хоть и включается, но ругается на особенности синтаксиса, выходящие за рамки обычного CSS.

Решение нашлось на http://superuser.com/questions/344441/less-syntax-highlighting-in-geany:

1. В файле ~/.config/geany/filetype_extensions.conf меняем

CSS=*.css

на

CSS=*.css;*.less;*.scss;

Если такого файла нет, его можно взять из /usr/share/geany (в дебиане — так).

2. В файл ~/.config/geany/filedefs/filetypes.css (который тоже можно взять из /usr/share/geany) добавляем

[lexer_properties]
lexer.css.less.language=1

3. Если geany уже запущен — перечитываем конфигурацию: Tools → Reload Configuration

Подсветка синтаксиса LESS-файлов в geany

Результат — подсветка включается автоматически при открытии LESS- и SCSS-файлов и всякие специфические штуки отображаются нормально: geany теперь не ругается на вложенность правил, на селекторы с амперсандом, на комментарии в стиле C++ (две косые черты), на LESS-переменные с @собакой и на SCSS-переменные с $долларом.

Statt zu schlafen

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

Могу:

  • Программировать на Перле — как древние CGI-приложения, так и современные, с использованием фреймворков Mojolicious, Dancer, Catalyst.
  • Программировать на PHP: в основном допиливать существующие приложения, а не писать с нуля что-то большое.
  • Настраивать CMS Drupal и WordPress, а также дорабатывать их темы оформления.
  • Настраивать и дорабатывать Open Journal Systems, включая реализацию многоязычности имён — делал это в OJS 2.4.2, 2.4.7.1, 2.4.8.1, думаю, и в Open Conference Systems смогу реализовать.
  • Кроссбраузерно верстать веб-страницы.
  • Немножко программировать на Руби (в том числе, с использованием Ruby on Rails) — наверное, на юниорском уровне.
  • Немножко программировать на ЯваСкрипте — как голый JavaScript, так и с jQuery.
  • Постоянно внушать коллегам необходимость использования багтрекера и системы контроля версий.
  • (хоть и не считаю это основными профессиональными навыками) фотографировать, петь, аккомпанировать на шестиструнной гитаре, водить легковой автомобиль, быть Дедом Морозом, набирать ноты в MuseScore и LilyPond — медленно, но красиво.

1000 рублей

Хочу от 15 USD / 1 kRUB в час.


Statt zu schlafen (нем.) — вместо того, чтобы спать

Точка конф

Apache 2.2 у маленьких конфигурационных файлов, вызываемых из основного, не использует расширение (хотя и не запрещает его применячть, конечно же). Старый Апач 1.3 — использовал. Как выяснилось методом тыка и чтения stackoverflow, новый Апач 2.4 — снова использует, во всяком случае команды a2ensite something и a2dissite something пытаются найти файл sites-available/something.conf. Да и в остальных каталогах /etc/apache2/*-available — куча conf-файлов.

Кусок конфигурационного файла

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

Всюду яваскрипт

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

ls ~/bin/komodo/lib/mozilla

Из одной бочки разливали

Как и ожидалось, Open Conference Systems, якобы не имеющая русской локализации, при должном применении напильника вполне способна использовать великий и могучий. В каталоге lib/pkp даже можно найти русские локализационные XML-файлы. Вообще весь этот каталог lib/pkp — общий и для OCS, и для OJS, что видно по гитхабу. Правда, в свежей версии Open Journal Systems переводов всё-таки побольше. Похоже, OCS, как не особо активно развиваемый продукт, содержит в себе копию lib/php трёхлетней давности, во всяком случае файлы lib/php/locale/ru_RU/*.xml — как раз 2012 года. Надо провести эксперимент — подсунуть в древнюю OCS 2.3 переводы из свежей OJS 2.4.7-1 — скорее всего, хуже не будет. Я пока заметил только один недостаток, мешающий тупо скопировать локализационные файлы: “User Home” переведено как «Мои журналы» — как-то неправильно показывать такое на сайте конференции.

Кстати, коллеги, кто-нибудь пробовал использовать Open Conference Systems для создания сайтов конференций? WordPress и mojowka для этого плохо подходят (хотя можно и с ними — я так делал) — хочется всё-таки использовать специализированное решение, избежав при этом танцев по граблям.

Косой левый край

Задача — сделать на веб-странице косой левый край у текстового блока, то есть, нужна лесенка из строк. Ширина страницы произвольная, текст должен переноситься автоматически.

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

Косой край

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

Внедрение лилипондовых нот в википедию

Случайно обнаружил, что в википедию можно вставлять ноты в виде лилипондового исходного текста и оно само преобразуется в картинку и, если надо, плеер. Для этого достаточно обернуть исходный текст в тэг <score>. Пример — ноты в статье про Атикву.

Ноты

Преимущество такого подхода — простота вставки и отсутствие необходимости держать лилипонд у себя.

Недостатки — неаккуратный внешний вид (это настраивается?) и, видимо, невозможность использовать свои шрифты (кириллица в лилипонде по умолчанию ужасна).

Re: в третий раз ходил за ёлкой

Улучшенный Ильменский сайт вчера наконец-то переехал на ilmeny.org — там теперь и шустрый FastCGI-бэкенд, и HTML5/CSS3/SVG, и нормальный внешний вид на мобильных устройствах. Точнее, не сайт переехал, а адрес стал указывать на новый сайт вместо старого. Так что процесс разработки и тестирования можно считать завершённым — пора начинать собираться на фестиваль.

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

test.ilmeny.org