Поиск по блогу

вторник, 9 декабря 2014 г.

После обновления Ipython Notebook нужно было править таблицы стилей CSS для экспорта в Blogger

Дело это неблагодарное, но деваться было некуда, HTML шаблон Notebook был изменен так, что все мои "новые" посты выглядели ужасно. После того, как их набралось больше сотни, я понял, что надо совершать подвиг... Здесь я пытаюсь понять, зачем мне три файла CSS - около 250 строк, которые я выбрал из 2500 строк, генерируемых после импорта nbconvert --to html --template full...
Ну, и конечно, я пытаюсь провести работу над ошибками, почему я угрохал на эту задачку 4 дня...

Может быть для некоторых подвиг - дело обычное, но я решил сначала подумать.
1. Обновление шаблона Notebook застало меня врасплох. Предыдущие хаки для Blogger я делал "на коленке" после того, как не захотел использовать шаблон для импорта в Blogger с Гитхаба (см. ссылки в предыдущем посте на эту тему).
Я тогда кажется решил, что шаблон устарел. И вот теперь мои хаки состарились. Все развивается лишком быстро.
Нужно какое-то кардинальное решение. Если эти шустрые ребята (разработчики Notebook) каждые полгода будут менять html-разметку, в которой 2500 селекторов, то, наверное, стоит поикать более простые варианты (чем напичканый скриптами и стилями Blogger)...
Альтернатива - автоматизировать процесс удаления неиспользуемых стилей...
А они будут менять разметку - это слабое место проекта..., впрочем, это следствие красивой идеи - цветного текучего блока кода. Так что от такой красоты никто не откажется, и оптимизировать шаблон будут и дальше.
Кардинальное решение для моих временных блогов - новый шаблон (движок) на новый домен. Все же бесплатно.
Если бы этого не было, то я бы не смог обеспечить "обратную совместимость"...
Еще более простой вариант - внешние css файлы. Срочно надо найти хостинг для кастомных CSS и JS заодно...
Ну и раз я буду искать бесплатный хостиг, то почему бы мне не начать пробовать идею с плоскими HTML, все равно Sphinx надо осваивать...
Почему бы мне не завести платный хостин с каким-нибудь Друпалом?
Потому, что я еще не знаю, какой формат постов мне нужен... и с тематикой не могу опредлиться..., тематикой для SEO... зачем же себя ограничивать раньше времени...
Пока надо продолжать этот блог... и думать дальше...

Dust-Me Selectors has three basic functions

In []:
    Scanning a single page
    Spidering a sitemap
    Scanning pages automatically

Это расширение (только) для FireFox. Оно сначала показалось мне наиболее продвинутым, но я не прочитал толком инструкцию к нему, не попробовал включить опцию для анализа "встроенных CSS", а предпочел тратить время на поиск хостинга для CSS файлов ... т.к., он нужен был для blogpost... Таким образом, я до сегодняшнего дня (ошибочно) считал, что этот скрипт не работает со встроенными стилями.

Кроме того, я не знаю "третьих" CSS3 (и знать не хочу), потому, что догадываюсь, что такие дубли, как

In []:
-moz-box-flex: 1;
-webkit-box-flex: 1;
-ms-box-flex: 1;

это неспроста, тем более, что в Мозилле и Хроме, мои блог отражается по-разному. А про IE я даже и думать боялся. А между тем, статистика посещений показывала, что половина читателей моих черновиков "ездят на Ишаках".

In [2]:
from IPython.display import Image
In [3]:
Image('C:\\Users\\kiss\\Pictures\\pythonR\\dust.png')
Out[3]:

Здесь для каждого файла или встроенного тега style можно получить и сохранить "очищеный" файл. Оказалось, что этот вариант в моем случае сработал лучше, чем нижеперечисленные плагины для Chrom Browzer

Расширения для Гугл Хром

Я как-то завелся и установил с десяток плагинов. Почти все их пришлось отключить после знакомства. Здесь отмечу, что они почти не мешали друг другу. Но браузер пришлось перегружать довольно часто. Помимо всего прочего, он особенно любил подвисать на анализе sitemap и удалении "лишних стилей". Далее я покажу только три лучших (с моей точки зрения) плагина.

Removes unused selectors from all stylesheets on a page and combines the result into a single stylesheet that can be downloaded.
Этот плагин я попробовал первым, он выдал один файл. Проблема оказалась в том, что для "плоского" html файла все работало, а при вставке в Blogger выскакивали непонятные баги. Вместо того, чтобы ломать голову над "доводкой" таблицы стилей я просто решил попробовать "Dust-Me Selectors", там все сразу "срослось" (не считая мелочей с заголовками). Этот плагин работал пости без сбоев, так что не стоит забывать про него.

In [4]:
Image('C:\\Users\\kiss\\Pictures\\pythonR\\css_remove.PNG')
Out[4]:

Find and Remove unused CSS selector on your web application unusedcss

WebApp are creating DOM elements using JavaScript. By doing so, new CSS rules can be used, rules that are detected as unused by regular tools.

In [5]:
Image('C:\\Users\\kiss\\Pictures\\pythonR\\unus_css.PNG')
Out[5]:

До этого плагина очередь так и не дошла, но при прогонах он показал себя лучше, чем его тезка "Unused CSS Tools"

Посты чуть ниже также могут вас заинтересовать

3 комментария:

  1. Снова понадобилось работать с таблицами стилей...
    Any programs to generate css classes from your html?
    http://stackoverflow.com/questions/4920353/any-programs-to-generate-css-classes-from-your-html

    http://lab.xms.pl/css-generator/
    http://beecss.theextremewebdesigns.com/css_clean_css_minify/
    http://www.cssportal.com/css-optimize/
    https://github.com/css/csso
    http://www.cssportal.com/css-validator/
    http://www.csstidyonline.com/

    ОтветитьУдалить
  2. Чтобы установить плагины, скачал хром для разработчиков
    https://www.google.com/chrome/browser/canary.html
    Не нашел особых различий...

    ОтветитьУдалить
  3. Онлайн редактор с автоматическими и полезными подсказками

    http://css.editey.com/

    ОтветитьУдалить