О недоступности веб-шрифтов при подгрузке

Лет пять назад я писал про типографию для web через @font-face. С того времени прошло достаточно времени, браузеры уже стали полноценно поддерживать шрифты. Для простоты и единства, вышел конструктор Google Fonts и Typekit. По всей истории этого дела хорошо прошёлся Вадим Макеев, поэтому я сфокусируюсь на основном баге.

Аж с 2009 года (а то и раньше) был известен баг многих браузеров об отображении текста без символов из-за того что css подгрузился, указал что должен использоваться какой-то шрифт, а сам шрифт (который может нехило весить) ещё грузится. В зависимости от скорости соединения возникает эффект "моргания". Проблема в том что это до сих пор не исправлено в Webkit (Safari, Chrome), поэтому вот мой уродливый хак (да, избавьтесь как только пофиксят)..

Прежде всего  через jquery заставим загружаться файл шрифтов, добавив пустой элемент.

$('body').append('<span style="font-family: \'CustomFontYouWantToUse\';"></span>');

Поймать событие когда шрифт загрузится получается только таким способом.

document.onreadystatechange = function() { if (document.readyState && document.readyState=="complete"){ $('body').addClass('font_loaded'); } };

Теперь в css к стандартному шрифту прийдётся добавить дубликат..

h1 {font-family:serif;}
body.font_loaded h1{font-family:CustomFontYOuWantToUse, serif;}
На просторах интернета было замечено интересное решение, подгружать содержание шрифта сразу в css файле, используя data:URL src:url(data:font/opentype;base64

Прячем лишнюю информацию в Gmail с Greasemonkey

Greasemonkey - отличный плагин для Firefox, позволяющий выполнять произвольный javascript на стороне пользователя. Тем самым это универсальный плагин заточенный под конкретный сайт, хоть и не дающий браузерного UI как другие плагины, но дающий возможность менять DOM существующих сайтов.

2011-04-20_1254.png

Мне вот надоело что в GMail постоянно показывается блок текста со всякой статистикой и ссылками - поставил Greasemonkey, нашёл XPath адрес этого блока с firebug, добавил его устранение, обернул в таймаут для загрузки страницы и вуаля.. чистота.

var xpathResult = window.frames[3].document.evaluate('/html/body/div/div[2]/div/div[2]/div/div[2]/div[2]', window.frames[3].document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

for (var i=0; i<xpathResult.snapshotLength; i++) {
    var nodeToHide = xpathResult.snapshotItem(i);
    nodeToHide.style.display='none';
}

Это элементарный пример (проще только по ID элемент найти) скриптов, огромное количество которых можно найти на userscripts.org

Post form с window.open

Я сам не люблю popup-окна, но иногда клиенту очень уж хочется. Публиковать же форму в такое окошко имеет смысл например при работе с отчётами - в основном окошке выделяются данные, а в открывающемся показывается список готовый для распечатки c window.print()

Решение простое:

<form method='post' action='' target="foo"
onSubmit="window.open('', 'foo', 'width=850,height=400,status=yes,resizable=yes,scrollbars=yes')">

Если же подобное открытие формы должно зависеть от других элементов, например checkbox'а, то на jQuery это выглядит так:

$('#report_form').submit(function(){
        if ($('#csv_radio').attr('checked')!=true){
            this.target="foo";
            window.open('', 'foo', 'width=950,height=400,status=yes,resizable=yes,scrollbars=yes');
        }
        else this.target="_self";
    });

Видео и mp3 в своём блоге

Чем профессиональней становится web-ресурс тем больше необходимость использовать собственных технологий, или по крайней мере своего стиля. Применимо к видео и аудио это значит что внешний вид, функциональность и хостинг - не от youtube/rutube/vimeo а свой. Особенно это заметно когда у вас 500 статей и у большинства - ролики с ютуба, и можно с высокой долей вероятности утверждать что несколько из них уже не работают потому что автор или ютуб их удалил.

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

  • правовую независимость и надёжность неудаляемости роликов
  • инновативность, например показ только собственных связанных видео или HD-канал
  • удержание аудитории от публичного сервиса
  • свой дизайн и стиль плеера

В качестве примера таких решений в рунете можно привести ТНТ и Absolute Games.

AddHandler в Visual Basic 2005

С Visual Basic мне пришлось столкнуться по учёбе, и именно по невизуальной его части - создание элементов форм динамически (в цикле) с частично ограниченным числом оных элементов. Задание в общем звучит невинно - создать программу (автомобильного) теста.

Для упрощённого решения, все данные лежат в открытом виде в текстовом файле. Пользователю надо показать форму с вопросами. По умолчанию пользователь вводит сам ответ в TextBox компоненты, что даёт ему 3 очка за правильное решение. Если нажать на вопрос, то TextBox прячется и пользователь выбирает из предлагаемых вариантов.

Честно говоря самое сложное это вовсе не чтение из файла, а привязка создаваемых объектов с событиями (Events)

Dim resFile As IO.StreamReader
Dim Row As String
Dim line As Integer
resFile = New IO.StreamReader("Valuutad.txt")
Do
line = line + 1
If resFile.EndOfStream Then Exit Do
Row = resFile.ReadLine
Me.AddQ(line, Row)
Loop
resFile.Close()

Сначала я нашёл такой кусок кода как AddHandler objLabel.Click, AddressOf Labelx_Click и решил что неплохо бы передать вместе с этим параметры EventArgs. Не тут то было, оказалось что VB делали такие перцы, логика которых с моей не совпадала вовсе, и которые наделали в VB тучу возможностей которыми я даже и не задумывался пользоваться..

Как оказалось, третьи примеры кода следовали всё тому же AddHandler, но уникальность того, что за кнопка из сотни кнопок была нажата брали из ActiveControl.Text! Это всё равно что баловаться фокусом в среде где фокус легко может отбираться или вообще не присваиваться, как это у меня с Label и происходило. Просто взять и добавить в объект новый параметр ID и по нему найти объект обратно, подобно getElementById в Javascript, тоже задача не из лёгких - надо тогда делать новый класс и наследовать контрол.. дебри.

Программу спас параметр Tag и занесение объектов в массив.