shoorick | Entries tagged with css

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

Могу:

Программировать на Перле — как древние 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 — медленно, но красиво.

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

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

http://shoorick.ru/2016/10/18/statt-zu-schlafen/

Current Music: Григорий Данской - О сущности денег

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

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

Косой край

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

http://shoorick.ru/2015/10/16/incline-left-edge/

Current Mood: работаю

Заметил, что шрифты 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;
}

Current Music: Ирина Богушевская - Тридцать девятый трамвай | Powered by Last.fm

В популярной социальной сети «ВКонтакте» пользователи могут иметь, помимо имени с фамилией, отчество либо ~~ник~~ прозвище — его можно видеть, зайдя на страницу пользователя. Но вот если отмечать пользователей на фотографиях, отображается только имя и фамилия — если среди френдов есть однофамильцы-тёзки, становится невозможно понять, как выбрать именно того, кто нужен. Ещё месяц назад можно было, подведя мышь к имени пользователя, увидеть ссылку на его страницу и хотя бы таким образом различить тёзок — теперь же отображается лишь vk.com/null

Придумал способ решить проблему. Проверил для Chromium 20 под Linux Ubuntu 12.04. Вероятно, будет работать в современных версиях Google Chrome и Chromium и в других операционных системах.

Узнайте номер (id) одного из тёзок — он может быть виден сразу, если адрес страницы такого пользователя имеет вид vk.com/id1234567:

если же у пользователя адрес страницы не содержит номер — id можно узнать наведя мышь на кнопку отправки сообщения — отобразится подсказка с адресом вроде vk.com/write1234567
Установите расширение Stylebot (если у вас его до сих пор нет) — оно позволяет не только менять внешний вид страницы, меняя её CSS-стиль, как это делает встроенный в хром отладчик — оно сохраняет изменённый стиль и применяет его при повторном посещении сайтов.
Вызовите Stylebot — это можно сделать, щёлкнув по аббревиатуре CSS, которая появится в правой части адресной строки после установки расширения.
Перейдите в режим редактирования исходного кода стилевых правил — для этого предназначена кнопка «Edit CSS», расположенная в нижнем левом углу окна Stylebot
В открывшемся поле ввода напишите:
```
a[mid="1234567"]:after {
    content: "Суффикс";
}
```
заменив 1234567 на нужный вам номер, а Суффикс — на произвольную строку, которая будет добавлена к фамилии.
Сохраните результат, нажав кнопку «Save» — вы вернётесь к обычному виду Stylebot. Закройте Stylebot — крестик находится в правом верхнем углу.

После этих действий к фамилии пользователя добавится нужный суффикс:
Список

Продолжаю ковырять transition — повернул баян на 90°.

Код с действующим примером выложен на http://jsfiddle.net/shoorick/bp7QM/ (там сразу видно всё: и код с подсветкой синтаксиса, и результат), кроме того, как и в прошлый раз, пример — на http://shoorick.ru/lj/net/accordion-horizontal.html, код — на гитхабе и ( под катом )

Current Mood: попёрло
Current Location: дома

Разбираюсь с модными 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.

Current Mood: спать пора
Current Location: Челябинск

Файрфокс игнорирует все стилевые свойства у тэга <col> кроме background-color (ну, может, и не все, но ни выравнивание текста, ни цвет букв он брать не хочет).

~~...а ещё боремся за почётное звание дома высокой культуры быта~~ Даже вражеский браузер давным-давно (как минимум, с шестой версии) показывает столбцы как надо, а файрфокс — до сих пор не хочет. Абыдна!

Current Music: Несчастный Случай - Что ты имела

Сдох опенофис и новый не ставится? Пофиг! Запускаю самодельную вики-системку, вставляю текст туда (попутно слегка форматируя), распечатываю прямо из браузера.

Mojowka теперь понимает указанный в переменной окружения MOJOWKA_DATAFILE путь к файлу с базой данных. Если не указан — работает, как и раньше, с файлом data.sqlite.

Немножко изменён дизайн страниц: убрана ненужная голубая рамка вокруг страницы (когда-то использовалась при отладке), служебные блоки не печатаются.

Ближайшие планы:

добавить управление пользователями и паролями;
нарисовать дизайн поприличнее;
~~добавить поиск и карту сайта~~; ✔
выложить куда-нибудь демонстрационную версию, чтобы можно было поглядеть систему в действии без её установки.

Current Mood: ужин дома стынет

Подглядел у Алексея Капранова (

quappa), выступавшего на перлбурге, интересный метод подготовки презентаций, который хорош для блиц-докладов. Точнее, я видел сделанные по этому методу презентации и раньше, но только сейчас покопался и понял, что к чему. Называется — takahashi. Такахаси ориентирован в первую очередь на вставку текста (доступен ряд команд разметки: выделение текста, моноширинный текст, можно вставлять растровые картинки).

Суть: вся презентация хранится в четырёх файлах: один из них — это исходный код презентации (очень мал), остальное — XUL-файл с интерфейсом (туда же можно засунуть и текст презентации либо заглушку, сообщающую о необходимости выбора исходного файла), обрабатывающий действия пользователя скрипт на JavaScript и стилевой CSS-файл. Суммарный вес — около 70 кБ. Для работы требует Gecko-based браузер, например, Mozilla Firefox.

Естественно, что весь механизм, в силу текстовой природы исходных файлов, легко дотачивается напильником в нужную сторону, если возникнет потребность. У меня возникла — обнаруженный пример не желал листать страницы по пробелу. Внешний вид презентации можно менять редактированием CSS-файла.

Исходный текст презентаций достаточно прост:

TITLE::Презентации Упрощение процесса подготовки презентаций FOOTER::shoorick.ru ---- HEADER::Нафига? 0. Презентации [[EM:не нужны:EM]] ---- 0. Презентации не нужны 1. Иногда всё-таки [[EM:нужны:EM]]

Посмотреть в действии (мозиллой!) можно на http://shoorick.ru/lj/slide/takahashi.xul?data=presentation.txt

Листать — кликом по любому месту экрана либо клавишами: пробелом, стрелками, PgUp, PgDn, Home, End, Enter, Backspace. Любители елозить мышью могут найти меню в верхней части слайда. Можно в процессе показа слайдов менять их содержимое прямо в браузере, а также рисовать поверх текста что угодно. Удобно!

Смотрел вчера запись доклада, где

pepelsbey рассказывает про CSS-фреймворки (делая в конце концов неожиданный вывод, что они не нужны) — задумался о методиках создания иллюстраций к докладам. Я иногда преподаю — мне это тоже пригодилось бы.

Хотел на домашней машине запустить опенофис — посмотреть, как там дело обстоит — не получилось: опенофис под убунтой молча помирал. Да и неправильно это — мышкой елозить.

Сегодня посмотрел в другую сторону — на LaTeX — как и предполагал, можно делать презентации и в нём: для этого есть, например, пакет Beamer (под FreeBSD есть порт latex-beamer).

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

Current Mood: кашель

Написал в CSS-файле правило с псевдоклассом :last-child — работает везде кроме IE. Удивился, полез гуглить, нашёл, что Internet Explorer до сих пор не понимает ни одного псевдокласса, появившегося в CSS 3 — да и те, что есть в CSS 2, полностью начали поддерживаться лишь в последней, восьмой версии.

Сегодня 09.09.2009, стандарт CSS 2 принят ещё в прошлом тысячелетии, в 1998.

Current Mood: svn ci

Проблема:
при апгрейде trac с 0.10 на 0.11 пропала собственная раскраска: все проекты выглядят одинаково.

Причина:
в 0.11 сменился шаблонизатор.

Решение:
для каждого проекта надо:

перенести файл templates/site_css.cs в htdocs/style.css, попутно выкинув из него первые четыре строки:
<?cs ################################################################## # Site CSS - Place custom CSS, including overriding styles here. ?>

создать файл templates/site.html:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      py:strip="">

  <!--! Add site-specific style sheet -->
  <head py:match="head" py:attrs="select('@*')">
    ${select('*')}
    <link rel="stylesheet" type="text/css"
          href="${href.chrome('site/style.css')}" />
  </head>

  <body py:match="body" py:attrs="select('@*')">
    ${select('*|text()')}
  </body>
</html>

Этого вполне достаточно. См. также TracInterfaceCustomization.

Current Mood: пора домой

Если к веб-странице прицепить несколько стилей и указать у тэга <link> атрибут title, то есть, написать так:

<link rel="stylesheet" type="text/css" href="/css/first.css" title="Основной стиль" /> <link rel="stylesheet" type="text/css" href="/css/second.css" title="Дополнительный стиль" />

то MSIE при показе страницы использует оба стилевых файла, а вот Mozilla Firefox, Opera и Konqueror используют лишь первый (в мозилле пользователь может выбрать, какой именно из стилей следует использовать). Почему — непонятно, вроде бы rel="stylesheet", а не "alternate stylesheet".

Если убрать title хотя бы из второго тэга (или из обоих) — страница отображается с учётом обоих файлов во всех перечисленных браузерах.

Current Mood: пятница!
Current Location: выхожу с работы
Current Music: Аквариум - Что нам делать с пьяным матросом

Подсмотрел простенький пример, демонстрирующий раскраску чётных и нечётных строк таблицы средствами Template::Toolkit.
Его можно чуть-чуть упростить:

[% FOR subject = subjects %] <tr[% IF loop.index % 2 %] class="even"[% END %]>

Current Mood: [%# TT

На http://perlsurvey.org/ считают перловых программистов. Результаты опубликуют 30 сентября.
Подглядел на http://perlsurvey.org/ интересный приём вёрстки: засовывание кучи картинок в один большой (300×2000 пикс.) файл. Картинки — фоны и маркеры списков. Выгод от подобной идеи может быть как минимум две:
- большая картинка может весить меньше суммы маленьких (что достигается, например, экономией на палитре: она хранится всего один раз, плюс метаданные передаются всего один раз)
- снижение нагрузки на сервер и канал: сервер отдаёт клиенту всего один файл, а дальнейшие телодвижения по отрисовке осуществляются клиентом

Оказывается, Web Developer (примочка такая к мозилле/файрфоксу) позволяет к любой веб-странице подключить собственное стилевое оформление, чем свести на нет дизайнерские изыски.
Любителям академического стиля — http://shoorick.ru/css/simple.css

P. S. Ездили в ночь на субботу по ночному городу под current music — незабываемо!

Current Music: Антонио Вивальди - Зима / Allegro non molto

Profile

shoorick

December 2016

S	M	T	W	T	F	S
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Syndicate

Page Summary

Statt zu schlafen
Косой левый край
Droid Sans и Open Sans — почти близнецы
Как отличать тёзок при отмечании их на фотографиях ВКонтакте
Re: Яваскрипт не нужен. Почти
Яваскрипт не нужен. Почти
Firefox неправ
Мы не ищем лёгких путей
Слайды! Слайды!
Без паверпойнта и опенофиса
Кто последний?
Перекрашивание trac 0.11
Может, и знал, да забыл
Полосатые таблицы в Template::Toolkit
В одном флаконе
Антидизайнерское

Style Credit

Style: Neutral Good for Practicality by timeasmymeasure

Expand Cut Tags

No cut tags

Page generated Sep. 19th, 2017 03:19 pm