Альтернатива для пользователе без javascript - FIDO.

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

Еще раз подчеркиваю, что люди которые отрубают скрипты скорее всего делают это намеренно. Сейчас не осталось браузеров которы не поддерживают javascript, даже на телефонах. Люди же которые используют Lynx (текстовые браузеры) знают на что идут и зачем это делают.

Тоже самое с флешом. Заказчик орет чтобы ролик был скомпилин под версию 8, чтобы вся страница вместе с роликом не занимала больше мегобайта при этом вешает на сайт огромный баннер. Я сегодня качал фильм размером 8 гигов и мне посрать весит ли сайт 1 метр или 10, главное чтобы там была инфа за которой я пришел.

Как-то использовал google cdn для подключения jquery. Вы знаете что эти мудаки сделали?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Ensure that jQuery is installed even if the Google CDN is down.
if (typeof jQuery === "undefined") {
var script = document.createElement('script');
var attr = document.createAttribute('type');
attr.nodeValue = 'text/javascript';
script.setAttributeNode(attr);
attr = document.createAttribute('src');
attr.nodeValue = '/tbmb/_assets/scripts/jquery-1.3.2.js';
script.setAttributeNode(attr);
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>

Пруфлинк

Заказчик негодует по поводу валидности по W3C. На сайте использовался

<link disabled="disabled"/>

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

<!--[if IE]/><link disabled="disabled"/><![endif]--/>

Данунах! И добавили еще один js файл для того чтобы это заработало в нормальных браузерах.

История вопроса началась тут, когда свеже-написанный скрипт вдруг почему-то не заработал у читателей. Я потратил 2 часа пока перебрал скрипт на локальной машине. Честно говоря первых пол часа я потерял из-за своей собственной тупости, я забыл что flowplayer работает тока с сервера, сука. Все это время я отлаживал в фаербаге, в том числе и на сайте где скрипт и так работал, это была роковая ошибка. Потом я как-то начал дебажить в Opera через Dragonfly и о чудо, заметил строку которая меня повергла в полный ахуй.

Uncaught exception: TypeError: 'jQuery("#videoDialog").dialog' is not a function

Error thrown at line 3, column 1 in ($) in http://mabp.kiev.ua/content/examples/flowplayer.js:
    var player = $f("player", 
called from line 19, column 41125 in () in http://mabp.kiev.ua/wp-includes/js/jquery/jquery.js?ver=1.3.2:
    this.call(document,o)
called via Function.prototype.call() from line 12, column 15654 in (G, K, F) in http://mabp.kiev.ua/wp-includes/js/jquery/jquery.js?ver=1.3.2:
    for(var J=G[0];H() in http://mabp.kiev.ua/wp-includes/js/jquery/jquery.js?ver=1.3.2:
    o.each(o.readyList,function(){this.call(document,o)});
called from line 19, column 41621 in () in http://mabp.kiev.ua/wp-includes/js/jquery/jquery.js?ver=1.3.2:
    o.ready()

Сначала я воспользовался Бритвой Хэнлона и подумал что у меня не загрузился jQuery IU. Попробовал загрузить руками - не вышло. Перебрал все скрипты на сайте по очереди отключая все. Хуй!

Перечитал ошибку еще раз и понял что меня наебали: какой-то наглый, говнокодистый, плагин подключает на сайт jquery.js?ver=1.3.2 из админки. Я просто брызнул лучами поноса во все стороны от такой наглости. Еще буквально пол часа и гадкий, богомерзкий плагин Google Analytics for WordPress был вычислен.

Код был закомментирован а плагин публично обосран в блоге и наступило счастье.

//line 67
wp_enqueue_script('jquery');

// line 1280+
function track_comment_form_head() {
    if (is_singular()) {
        global $post;
        $yoast_ga_options = get_option('Yoast_Google_Analytics');
        if ( yoast_ga_do_tracking() && $yoast_ga_options["trackcommentform"] && ('open' == $post->comment_status) )
            wp_enqueue_script('jquery');    
    }
}
add_action('wp_print_scripts','track_comment_form_head');

Для тех кто не понял почему у меня работало в FF - я был залогинен под админом, а админу подключать этот скрипт не надо.

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

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

С другой стороны люди которые пишут про то что они посрали или описывают какой вес штанги взяли собирают больше комментариев от посетителей чем люди которые задают курс будущему развитию технологии или пишут о глубокой эзотерике. И если Тёма просто великий маркетроллог (я же правильно сократил тролль-маркетолог?) то Болк скорее подтверждение, того что людям больше нравиться читать о личной жизни. Особенно если своя не удалась. А пока код работает, его никто и не прокомментирует, а просто будут открывать и пользоваться.

А вот и сказочке конец и перелинковочке тоже :)

В двух словах - редкостная хуета! Дальше кодом... А забыл описать задачу. Нужен плеер в попапе, плейлист на странице в виде html (но если надо пара секунд переделать под ajax), у плеера есть две кнопки (вперед, назад) с превьюшками видео. Погнали.

Пример разметки одного элемента списка

<div style="float:left; text-align:center; margin:5px;">
	<a class="progress" href="${video_link}.flv" title="${title}">
		<img src="${thrumbnail_link}" alt="${title}">
	</a>
	<a class="progress" href="${video_link}.png" title="${title}">
		${title}
	</a>
</div>

Конфигурация плеера с комментариями

$(document).ready(function(){

	// конфигурация плеера
	var player = $f("player", 
	{
		// сам плеер 
		src : "/content/source/flowplayer/flowplayer-3.2.4.swf", 
		// и дополнительные параметры
		wmode: 'transparent'
	}, 
	{
		//debug : true,
		
		// стандартный клип
		clip : {
			// можно не указывать если полный путь прописан в html
			baseUrl: 'http://blip.tv/file/get/',
			// сразу при запуске не играем
			autoPlay: false,
			// но закачиваем
			autoBuffering: true,
			// растягиваем видео
			scaling : 'scale',
			// перед проигрыванием
			onBeforeBegin : function(clip){
				// если вместо видео картинка контролы не показываем
				if  (clip.type == "image"){
					this.getControls().hide();
				}
				
				// вычисляем позицию в списке воспроизведения
				var clip = this.getClip(),
					list = this.getPlaylist(),
					current = $.inArray(clip, list),
					left = current - 1  >= 0 ? current - 1 : list.length - 1,
					right = current + 1 <= list.length - 1 ? current + 1 : 0;
				
				// обновляем кнопки вперед-назад
				this.getPlugin("leftButton")
					.setHtml("<p>"+list[left].title+"</p>")
					.css({
						background : "transparent url("+list[left].thumbnail+") no-repeat 20 20",
					});
					
				this.getPlugin("rightButton")
					.setHtml("<p>"+list[right].title+"</p>")
					.css({
						background : "transparent url("+list[right].thumbnail+") no-repeat 20 20",
					});
			}
		},
		
		// список у нас береться из html
		// поэтому тут пусто
		playlist: [	],
		
		// рисуем кнопки
		// поскольку плеер очень убогий, для рисования кнопки
		// которая сначала видна чуть-чуть а при наведении мышьки 
		// расширяется и становиться видно превьюшку следующего видео
		// надо рисовать две кнопки одна маленькая, видна всегда и не меняется,
		// а вторая находиться поверх нее и собственно все события висят на ней
		plugins:  {
			
			// левая маленькая кнопка
			leftFake : {
				url: '/content/source/flowplayer/flowplayer.content-3.2.0.swf',
				top: 130,
				right : 0,
				width : 20,
				height : 100,
				zIndex : 1,
				opacity : 1,
				borderRadius : 0,
				background : "url(/content/source/flowplayer/mp_leftArrow.png) no-repeat 0 0"
			},
			
			// правая маленькая кнопка
			rightFake : {
				url: '/content/source/flowplayer/flowplayer.content-3.2.0.swf',
				top: 130,
				left : 0,
				width : 20,
				height : 100,
				zIndex : 1,
				opacity : 1,
				borderRadius : 0,
				background : "url(/content/source/flowplayer/mp_rightArrow.png) no-repeat 0 0"
			},
			
			controls: {
				//playlist: true,
		
				// ссылка на плагин
				url: '/content/source/flowplayer/flowplayer.controls-3.2.2.swf', 
				// показывать все элементы управления
				all: false,
				// играть
				play: false,
				// ползунок
				scrubber: true,
				// громкость
				volume: true,   
				// тонкая настройка ползунка и громкости
				scrubberHeightRatio: 0.3,
				scrubberBarHeightRatio: 0.2,
				volumeSliderHeightRatio: 0.2,
				// убирать с экрана при бездействии
				autoHide: 'always',
				// еще раз прячем контролы если смотрим на картинку,
				// потому что он (контрол) тупой и с первого раза не понял
				onBeforeShowed : function(){
					if (this.getPlayer().getClip().type == "image"){
						return false;
					}
				},
				onBeforeHidden : function(){
					if (this.getPlayer().getClip().type == "image"){
						return false;
					}
				}
			},

			// рисуем настоящую большую кнопку
			leftButton : {
				// ссылка на плагин
				url:'/content/source/flowplayer/flowplayer.content-3.2.0.swf',
				// какойто CSS
				top: 130,
				left:0,
				width: 20,
				height: 100,
				zIndex : 5,
				opacity: 1,
				padding : 20,
				borderRadius : 10,
				style: {
					p : {
						fontSize:14,
						fontWeight:"bold",
						color:"#000000"
					}
				},
				// задаем анимацию при наведении мыши
				onMouseOver: function() {
					this.animate({width:140}, 500);
				},
				onMouseOut: function() {
					this.animate({width:20}, 500); 
				},
				// играем следующий клип при клике
				onClick : function(){
					var clip = this.getPlayer().getClip(),
						list = this.getPlayer().getPlaylist(),
						current = $.inArray(clip, list),
						index = current - 1  >= 0 ? current - 1 : list.length - 1;
					
					this.getPlayer().play(index);
				}
			},
			
			// тут все тоже самое только для правой кнопки
			rightButton : {
				url: '/content/source/flowplayer/flowplayer.content-3.2.0.swf',
				top: 130,
				right: 0,
				width: 20,
				height: 100,
				zIndex : 5,
				opacity: 1,
				padding : 20,
				borderRadius : 10,
				style: {
					p : {
						fontSize:14,
						fontWeight:"bold",
						color:"#000000"
					}
				},
				onMouseOver: function() {
					this.animate({width:140}, 500);
				},
				onMouseOut: function() {
					this.animate({width:20}, 500); 
				},
				onClick : function(){
					var clip = this.getPlayer().getClip(),
						list = this.getPlayer().getPlaylist(),
						current = $.inArray(clip, list),
						index = current + 1 <= list.length - 1 ? current + 1 : 0;
			
					this.getPlayer().play(index)
				}, 
			},
		},
		
		// при наведении мыши на плеер показываем все кноки
		onMouseOver : function(){
			var plugins = ["leftButton","rightButton","leftFake","rightFake"];
			for(var i in plugins){
				this.getPlugin(plugins[i]).show();
			}
		},
		
		// а при бездействии - убираем
		onMouseOut : function(){
			var plugins = ["leftButton","rightButton","leftFake","rightFake"];
			for(var i in plugins){
				this.getPlugin(plugins[i]).hide();
			}
		},
		
		// ну и еще пара проверок при загрузке
		onLoad : function(){
			var list = this.getPlaylist(),
				left = list.length - 1,
				right = 1;
			
			// если короткий список воспроизведения не показываем кнопуки
			if (list.length<2){
				this.getPlugin("leftButton").hide();
				this.getPlugin("rightButton").hide();
			}else{
				this.getPlugin("leftButton")
					.setHtml("<p>"+list[left].title+"</p>")
					.css({
						background : "transparent url("+list[left].thumbnail+") no-repeat 20 20",
					});
					
				this.getPlugin("rightButton")
					.setHtml("<p>"+list[right].title+"</p>")
					.css({
						background : "transparent url("+list[right].thumbnail+") no-repeat 20 20",
					});
			}
		}		
	}),
	
	// обычный JUI диалог
	dialog = $("#videoDialog").dialog({
		//modal:true,
		title:"dialog title",
		resizable:false,
		bgiframe:true,
		draggable:true,
		autoOpen: false,
		width:600,
		height:400,
		minHeight:0,
		open:function(){
			// при открытии диалога загружаем плеер
			player.load();
			// и меняем плейлист
			// для вызова события onPlaylistReplace
			player.play(list);
		},
		close:function(){
			player.unload();
		}
	}),
	
	list = [],
	index = 0;
	
	// вызываеться при смене списка воспроизведения
	// например ajax'ом новый подгрузили
	player.onPlaylistReplace(function(list) {
		// чтото без таймаута не пашет :(
		setTimeout(function(){
			player.play(index);
		},100);
	});
	
	// при старте клипа меняем заголовок диалога
	player.onStart(function() {
		dialog.prev().find(".ui-dialog-title").text(this.getClip().title)
	});
	
	// меняет список воспроизведения
	function getNewPlaylist(){
		list = [];
		// парсит html
		$("#playlist").children().each(function(){
			var self = $(":first",this);
			list.push({
				"url": self.attr("href"),
				"title": self.attr("title"),
				"thumbnail" : self.find("img").attr("src")
			});
		});
		
		// гасим ссылки
		$("#playlist a").click(function(){
			$(this).parent().click();
			return false;
		});
		
		// открываем плеер и играем нужное видео
		$("#playlist").children().click(function(){
			if (!dialog.dialog("isOpen")){
				dialog.dialog("open");
			}
			index = $(this).index();
		});
		
	}
	
	// загружаем список в плеер
	getNewPlaylist();

});

И немного пощупать что получилось

Palm trees and the sun

Happy feet in a car

People jogging in park

Я долгое время использовал IntelliJ IDEA, чтоб не спиздеть с 5ой наверное версии. Сначала крякнутую потом перешел на EAP, это что-то типа программы по которой ты можешь пользовать бэтку за то что отсылаешь багрепорты. Но с девятой версии лавочку прикрыли. Теперь и для EAP нужна лицензия. Дома то понятно что я не отказываю себе в удовольствии использовать крякнутую ultimate Edition но на работе низя :( Пришлось поставить Community Edition. Блять настолько уебищной IDE я не видел, проще в Notepad++ писать, потому что эта убогая хуйня не подсвечивает даже JS в HTML, не включили они поддержку code-injection во free-ware версию.

Да ну ладно похуй на подсветку и автокомплит, можно вынести JS и CSS в отдельные файлы, так даже правильнее. Но это ж пиздец, нельзя создать новый спринг модуль, ни наконфигурировать томкат, да вообще модулей наконфигурировать нельзя. Хорошо хоть мавен работает. Вобщем я устал от этой хуеты и раз уж у меня на фирме все поголовно используют Eclipse пожалуй перейду ка я на него.

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

ЗЫ: завел новый тэг - HATE.

Как обычно я решил использовать самый современные технологии, например тэг COL для управления колонками, казалось бы что тут такого страшного, все его поддерживают, да не все могут скрыть, ну да ладно в IE8 работает и этого достаточно. Набросал скриптик на jquery вроде такого

$("#myTbl")
    .find("col")
    .css({visibility:"collapse"})
    .slice(firstVisible, firstVisible + columns)
    .css({visibility:""})

я решил что все уже позади, но не тут то было. Во-первых jquery не может различить видимые и невидимые колонки, о чем я оставил камент на странице описания селектора :visible , но похоже разработчики посчитали что это баг репорт и удалили его. Во-вторых чертов IE8 хоть и умеет прятать колонки не может их правильно отрисовать после этого, получаеться что текст всех скрытых колонок отображаеться под текстом первой видимой в несколько слоев, это легко убрать всего лишь нажав ctrl+A, но сами понимаете - это не выход.

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

Дело началось не так давно, когда заказчик высказал идею что на сайте должен быть виджет позволяющий рисовать по верх картинки линии как в MS Paint. Более того линии которые ты нарисовал, нужно выделить, и в табличке рядом заполнить дополнительные параметры. У меня перед глазами пронеслись все прожитые годы библиотеки векторной и растровой графики для javascript. Сначала я думал что я буду использовать что-то на основе canvas, хорошо хоть опыт уже есть, но потом понял что в голове крепко засела мысль о Raphaël. Ну и хорошо, я давно хотел с ней (библиотекой) поработать, но не было реального примера.

В двух словах Raphaël - это библиотека которая умеет рисовать векторную графику в формате SVG во всех нормальных браузерах, в остальных она умеет рисовать в формате VML. Как она умеет это делать меня интересует мало, главное что она предоставляет более менее удобное и совершенно недокументированное API. Почему я говорю недокументированное?! Потому что глядя на официальный мануал я чуть не заплакал, там нихуя нет ничего нельзя понять. Ну я решил раз в мануале нет, пох, я тут код jQuery читаю нормально, что мне какой-то Raphaël, но был сильно не прав потому как в коде творится полный пиздец кромешный ужас летящий на крыльях ночи.

Нет, я прекрасно понимаю когда кто-то считает координаты кривой Безье второго порядка он должен писать нечто вроде

Math.sqrt(Math.abs((rx2 * ry2 - rx2 * y * y - ry2 * x * x) / (rx2 * y * y + ry2 * x * x)))

Тут даже можно догадаться что rx2 это произведение R (радиуса) на X (координаты по иксу) в квадрате

Я могу понять регулярное выражение которое проверяет валидность записи цвета в трех форматах (hex, rgb, hsb и hsl можно считать как один)

/^\s*((#[a-f\d]{6})|(#[a-f\d]{3})|rgb\(\s*([\d\.]+\s*,\s*[\d\.]+\s*,\s*[\d\.]+)\s*\)|rgb\(\s*([\d\.]+%\s*,\s*[\d\.]+%\s*,\s*[\d\.]+%)\s*\)|hs[bl]\(\s*([\d\.]+\s*,\s*[\d\.]+\s*,\s*[\d\.]+)\s*\)|hs[bl]\(\s*([\d\.]+%\s*,\s*[\d\.]+%\s*,\s*[\d\.]+%)\s*\))\s*$/i

Но, блядь, я не понимаю каким надо быть мудОфилом, что бы писать вот так:

path = ["C"][concat](a2c[apply](0, [d.x, d.y][concat](path.slice(1))))
now = [+from[attr][0] + pos * ms * diff[attr][0], +from[attr][1] + pos * ms * diff[attr][1], (2 in to[attr] ? to[attr][2] : E), (3 in to[attr] ? to[attr][3] : E)][join](S)

Я для особо "тупых" переведу: вот эти [concat] и [apply] это всего лишь вызов соответствующих методов, но почему же, блядь, не [slice] ?

["C"].concat(a2c.apply(0, [d.x, d.y].concat(path.slice(1))))

а вот эти "2 in to[attr]" это ничто иное как

if(to[attr] && to[attr][2])
	return to[attr][2]
else 
	return E // E = 2.71

Тут возникает вопрос почему так сложно, потому что если to[attr] == null, то to[attr][2] вызовет ошибку и прервет исполнение функции. С таким подходом код становиться нечитабельным и плохо сопровождаемым, но я понимаю что Дмитрия Барановского все устраивает, поэтому он пишет еще такое:

~~double

Оператор ~~ приводит double или строку вида "3.14" к integer, то есть к целому, то есть к 3.

javascript:(function(){alert(~~(""+Math.PI))})()

Ну и последние - это сокращенные записи if-else, но не такие ?: а такие &&|| , хотя насмотревшись на его код я и сам пару раз такое использовал

if(c) b = c else b = d;
b = c ? c : d;
b = c && c || d;

На чём я закончил, перед тем как отвлечься на порыв ненависти к разработчику Raphaël?! Ах да я рассказывал какая это классная библиотека как искал описание API. После бесполезного чтения мануала и безрезультатного просмотра исходников я открыл примеры и начал заниматься реверс инженерингом, та еще радость, но это единственное что помогло. Потом еще в гугле нашелся удачный пример который дал мне толчок для написания своего плагина.

Дальше больше...

Ну не дял них а для себя, ну не для себя а на продажу... но взялся написать и пишу. Смысл вот в чем: на прошлой недели появилось вот такое забавное API. По сути обычный клент-банк, ничего особенного. Единственное что появилось оно только на прошлой недели! Этим я и решил воспользоватся. У них есть родное приложение для iPhone, а я решил написать приложение для Android'a. С одной стороны реальный опыт писания под телефон с другой может даже что-то заработаю. В результате двух дней работы моё приложение умеет показывать главную менюшку, имеет настройку мерчанта, и может показывать баланс. Пока все но это еще даже на альфу не претендует.

Вот пара скриншотов для затравки.