Bdyssh! // Бдыщщь!

hakkabah hakkabah we hate the usa hakkabah marrakesh hakkabah, %username%.

Доработка сайта Ebay / How to fix Ebay website

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

Назначение

 Purpose

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

  1. Применение инвертирующего экранного фильтра;
  2. Использование настроек браузера для переопределения цвета шрифта и фона.

Каждое решение имеет достоинства и недостатки.

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

Переопределение цветов средствами браузера несколько сложнее, и может не всегда работать. В последнее время даже пытаются вынести это за официальный функционал браузера, предоставив эту работу неофициальным плагинам. При данном способе, фотографии сохраняются, но появляется одна непреодолимая проблема. Когда изображения выполнены как фон, они перестают отображаться. Что в большинстве случаев благо, тем не менее есть места, где это приводит к неудобствам.

Одним из примеров такого поведения является сайт ebay, принципиально необходимый отечественному разработчику, изобретателю и рационализатору с момента возникновения возможности оплаты через интернет для нашего региона, и являющийся с тех пор незаменимым ресурсом.

В кадре “My ebay -> Purchase history”, для обозначения статуса посылки, применяются иконки, выполненные фоном (рис. 1, слева). Я дважды обращался к Ebay с просьбой выполнить вёрстку как положено (фоном делать только фон, т.е. необязательный элемент), тем не менее неисправность до сих пор не исправили. Это приводит к тому, что при пользовании вторым способом фильтрации, данные иконки исчезают (справа). Специфика сайта требует обязательного просмотра полноцветных фото, поэтому первый способ фильтрации неприемлем. 

 As we already seen in this article, nowadays there are two ways exist to force web documents and pages become safe for your eyes, that is, push browser to transform information so informational elements become lighter (brighter) than background. These are:-

  1. Inversion screen filter;
  2. Browser display settings to redefine (force) using personal user preferred colors for text, background, links, etc. 

Each of these two solutions have its own pros and cons.

Using screen inversion filter, there is no problem with text and flat (iconic) graphics, especially if we take into account than my screen filter modification preserves colors (as it was described in mentioned article, and can be seen here at fig. 1 below, which contains filtered and original photos). But true color (photo) images are unacceptably destroyed. But still this eye saving way is fastest, and works on any browser (as long as other software) today and in any future, independently from programmers behavior.

At the other hand, redefine colors using browser functionality is harder and can not work every time. Today times, there is, unfortunately, trend to remove this option from browser mainstream code to 3rd parties unofficial plugins. Using this way, photos are preserved. But we fall into new bad problem. Sometimes images are coded as background. So they are disappear at all. While in most cases this is good, but still there are places when this is bad.

One example of that website is ebay. It is most important website at all, for developer, scientific, hardware tester, and many other technical, DIY, and hobby people.

At  “My ebay -> Purchase history” place, there are icons for shipping state for each item (fig. 1, left part). They are disappear when 2nd filtering mode used (as shown at right part). I twice write to ebay support reporting incorrect coding, but still this is not fixed.

The ebay website almost can’t be used with 1st method of filtration, due to true color photos are essentially important to see.

 

Рис. 1. Отображение страницы покупок с режимами фильтрации по первому и второму типу.

Fig. 1. How ebay website displayed using each of two filtering modes.

Обратите внимание, что по второму типу фильтрации, фон не чёрный, каким должен быть. Фон чуть светлее чёрного, с одной стороны, всё ещё достаточно безвреден для глаз, а с другой стороны, полезен для отладки, когда на странице ещё остаются совершенно чёрные элементы, которые в противном случае были бы не видны.  You may note that at 2nd way of filtering, background is not pure black. It is a bit lighter. While this is still quite good for eye, it is let to see absolute black elements, which is very useful for debugging.

 Решение

 Solution

 В поисках решения проблемы была мысль найти какие-либо плагины к браузеру, модифицирующие html-код. Однако, изучение исходного кода страницы показало, что с одной стороны он достаточно сложен, а с другой стороны надо ещё и править css-файл. Поэтому я обратился к профессиональному разработчику современного интерактивного обеспечения (рис. 2).  Firstly i think to try some html modifiers (if any is exist). But diving into source code show me that it is quite complex, and there is may need to modify also css style file. So i ask professional web developer, shown at fig. 2.
 

Рис. 2. Brian Alig.

Fig. 2. Brian Alig.

Изучение специалистом показало, что в данном случае, возможно вообще обойтись только модифицированием css, не затрагивая вовсе html, но мало того – эти изменения могут быть статическими! Что и представляет подтверждение того, что Brian Alig является специалистом высшего класса. И значит, найденное решение будет соответствовать правилу KISS.Статические локальные изменения (переопределения) стилей (css) находятся для браузера firefox в файле  Brian Alig check the code and say me that in this particular case, there is not only not need to modify html code and need to change only css,but, mostly wonderful, these changes can be static!This is amazing, and show me again that he is quite powerful developer. Proposed solution is fully compliant with KISS rule. To try it, we should try to edit local static overriding css file:
/home/xxxxx/.mozilla/firefox/xxxxxxxx.default/chrome/userContent.css
(где xxx – переменные данные).Базовый необходимый набор директив css, который следует разместить в указанном файле, мне был посоветован следующий (для браузера Firefox):  where xxx is locally dependent.Basic set of css text to put at that file, was suggested approximately as below (for firefox browser):
@-moz-document domain(ebay.com){

	tr.my_itl-itR td.my_itl-alT div b{
		background-image:none !important;
	}

	tr.my_itl-itR td.my_itl-alT div b b{
		background-image:none !important;

		display:block !important;
		height:32px !important;
		width:180px !important;
/*		overflow:hidden !important; */
/*		position:relative !important;*/
		z-index:1 !important;

		transform-origin:90px 92px !important;
		-moz-transform: rotate(-90.0deg);

		font-weight:normal !important;
/*		color:#000 !important;*/
/*		line-height:24px !important;*/
		text-align:left !important;

/*		vertical-align:top  !important;*/ /* not work */

		word-wrap:break-word !important;
		word-break:break-all !important;

		font-size:small !important;
		line-height:75% !important;
	}

}
Файл нужно сохранить, и обязательно перезапустить браузер, закрыв все его копии. В результате, зайдя на соотсетствующую страницу, можно увидеть примерно следующее:  Save the file and restart firefox fully, closing all of the instances. Then one may see at correspond page, something like this:

Рис. 3. Отображение страницы покупок с режимом фильтрации по второму типу после правки локального css.

Fig. 3. How ebay website displayed using  2nd filtering mode after fixing it via local css rules file for Firefox.

Как видно, ещё есть что поправить. Тем не менее, основная задача выполнена, информация отображается правильно, поиск по ней (ctrl+F) осуществляется корректно, следовательно, данный сайт теперь можно использовать на профессиональной основе.Спасибо Brian Alig.  We may see that is still not absolutely cute. But most importantly, task is solved, website now informational, searching (ctrl+F) works well. So, this website can now be treated as professional and useful.Thanks to Brian Alig.

Hope it helps.

Keywords:

background, black, css, dark, ebay, eye safe, filter, fix, html, inversion, invert, light, screen filter, text, white, белый, изменить, инверсия, светлый, тёмный, фон, цвета, чёрный, чёрный фон, экранный фильтр,