По загадочным причинам, в сфере вычислительной техники слово «асинхронный» означает «синхронный». Например, «асинхронный запрос» — это когда синхронно (т. е. одновременно) с ним может выполняться другой. А вот если синхронность в выполнении отсутствует, и запросы выполняются последовательно друг за другом, то их с какого-то бодуна называют «синхронными».

Бывает, сделаешь страничку, а медленный скрипт блокирует её загрузку. Дописываешь в нужное место параметр async — и проблема решена, теперь страница и скрипт грузятся синхронно! У вас не взрывается от этого мозг?

У меня — в клочья.

Меня тут серьёзные ребята застремали, когда я сказал, что у меня на компьютере стоит ФТП-клиент. Ха-ха, говорят, ФТП-клиент, гы-гы. А чё, говорю? Дак блин, говорят мне, все нормальные ребята используют Эс-эс-аш! Первая моя реакция была — делать мне нехрен использовать какую-то хрень через командную строку и с миллионом сложностей, когда я могу просто файлы драгом и дропом кидать на сервер.

Но потом пошли какие-то более интересные доводы, что через этот Эс-эс-аш как-то можно удалённую файловую систему подмонтировать себе и через обычный Файндер с ней работать. Это мне уже нравится, но только я не представляю даже в общих чертах, как это можно настроить. Вот у меня есть все реквизиты для доступа к Мастерхосту, а чё надо дальше делать, чтобы все мои тамошние домены стали локальными файлами и папками?

Я-то раньше думал через Автоматор такое устроить, что если в какую-то папку что-то кидаешь, оно закачивается на ФТП, но подмонтировать файловую систему-то всяко наряднее. Научите, пожалуйста. Спасибо.

Вот что изменилось на сайте за сегодня:

• сделано несколько тупых оптимизаций, чтобы не так часто Мастерхост испытывал «Capacity problems»;
• ЦСС стал выдаваться одним файлом, а не тремя;
• цвета посещённых и непосещённых ссылок стали лучше отличаться;
• иконка кинофильма отодвинута подальше от поля поиска, чтобы не казаться кнопкой «Найти»;
• к сожалению, пришлось перейти с Гельветики на Ариал (Гельветика подглючивала на Виндоусе);
• специально для браузеров-калек, которым чтобы искать по сайту нужны костыли (т. е. для не-Оперы), добавился Опенсёрч;
• сильно всё улучшено в ИЕ;
• прижимающаяся к верху шапка заработала в Опере (хотя я не до конца ей доволен пока);
• исправлена корявость, из-за которой линия, отделяющая шапку от контента, стиралась не до конца на самом верху страницы (внимательные ребята её видели, и им не нравилось);
• подпись снизу немного изменена, чтобы было понятнее, что это за правила;
• ссылка на меня оставлена только на главной странице сайта, как положено;
• в мгновенных результатах поиска убрана подпись снизу, а то она прыгала туда-сюда;
• если у вас где-то не работала ctrl-навигация вправо, должна была заработать;
• новая фавыконка, говорят, должна лучше смотреться на тёмном фоне;
• если в правилах ничего не найдено, то ссылка на Яндекс.Словари теперь сразу ищет введённое слово в словарях.

Спасибо всем, кто вчера и сегодня вместе с обнаруживаемыми проблемами присылал сразу решения. Дмитрий Зимин, например, прислал готовое решение для прикручивания Опенсёрча, Эндрю Маркус и Макс Шальнов — некоторые правки для ИЕ; Калан (ах, как я не люблю клички!) — улучшенную иконку, а Анатолий Рр — исправление ошибки с навигацией и корявости с тонкой линией.

Всё же лучше всего сайт работает в Вебките. Потому что Вебкит — рай для веб-разработчика. В Опере тоже всё работает нормально. Потому что Оперой пользуюсь я. Проблемы остались в Фаерфоксе и в ИЕ. Ещё есть проблема с Айпадом, из-за которой на нём сайт смотрится огромным (как будто Айфон растянули пропорционально). Это из-за того, что я не знаю, как прописать тег meta viewport раздельно для Айпада и Айфона.

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

В четвёртом выпуске «говорильного подкаста» говорим с техдиректором «Аймобилки» Сергеем Чикуёнком про ХТМЛ 5, Флеш, ИЕ6 и веб-разработку вообще.

Среди затронутых тем:

• ХТМЛ 5 — круто ли это? Почему так долго? Как стандарты отстают от жизни.
• Валидность и чистота кода. Ценность валидного кода против ценности хорошего сайта. Как донести до любителя валидности, что это не важно? А может быть невалидный код — признак неряшливости разработчика? Как спецификация и валидатор по-разному понимают стандарты. Закрывать ли теги, брать ли атрибуты в кавычки — не технический вопрос, а дело вкуса. Когда валидность и функциональность вступают в противоречие.
• Флеш, какова его роль в вебе? Флеш и видео, кодеки, в чём природа спора, и почему не получается уже договориться. Обсуждаем появившиеся в последнее время весёлые демки, когда видео взаимодействует с остальной страницей.
• Аджакс и ИЕ, история вопроса. Сергей рассказывает о том, какой крутой браузер ИЕ6 (не шутка). Куча всего появилась в ИЕ6 раньше, чем где-либо, а через годы это записали в стандарты, но по-другому. Виноват ли в этом ИЕ?
• Гугль и все другие крутые компании перестали поддерживать ИЕ6. Правда ли это? Оказывается, нет, но плохие веб-разработчики используют непонимание людьми этих анонсов, чтобы не поддерживать ИЕ6. Подавляющее большинство пользователей ИЕ6 не меняют браузер, потому что не могут, а не потому, что не хотят. Одно из достижений ИЕ6 — победа над идиотской бокс-моделью В3Ц. Пользователи ИЕ6 охотнее расстаются с деньгами, поэтому не поддерживать ИЕ6 невыгодно.
• Мы как разработчики очень любим Вебкит!

Слушать прямо тут

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

Кстати, с кем и про что, на ваш взгляд, ещё нужно поговорить?

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

слов<img class="suffix" src="i/suffix.gif" />ечко

Но что написать в стилях?

.suffix {
  position: ???
  width: 1.5em; /* на три буквы чтоб */
  bottom: -1em;
}

Относительно позиционированный элемент занимает собой места в нормал-флоу столько же, сколько непозиционированный, а потом может быть сдвинут относительно этого места так, что нормал-флоу этого не заметит. В нашем случае это не подходит, потому что будет разрыв между «слов» и «ечко» шириной в картинку.

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

Поэтому всё время приходится делать так:

слов<span class="suffix"><img src="i/suffix.gif" /></span>ечко

.suffix { position: relative }
.suffix img {
  position: absolute;
  width: 1em;
  bottom: -1em;
}

Спан, конечно, красивее было бы закрыть после «ечк», но это не про семантику заметка. Так вот, весь этот спан, получается, существует только для того, чтобы задать «систему координат» для картинки. Но ведь она уже задана тем, куда вы воткнули эту картинку в разметке!

Так почему было не придумать какой-нибудь position: anchored, который бы участвовал в нормал-флоу, но с точки зрения нормал-флоу имел бы размеры 0 на 0? Можно было бы развить идею, введя anchored-x и anchored-y, чтобы, допустим, сделать сноски на поля, висящие на уровне того места, откуда на них ссылаются. Атрибут position: anchored-y означал бы, что left / right для этого элемента имеют смысл по принципу position: absolute; а top / bottom — по принципу position: anchored, т. е. относительно точки, где элемент встретился в разметке. Тогда текст, снесённый на поля, можно было бы размечать так:

Пушкин писал<sup>1</sup><div class="sidenote"><sup>1</sup> В «Капитанской дочке»</div>: «Береги честь смолоду».

.sidenote {
  position: anchored-y;
  left: 110%; /* чтобы отступить от самого текста 10% его ширины */
  top: 0;
}

Почему создатели стандартов придумывают всякую хрень (вроде box-shadow или анимации) раньше, чем решают базовые задачи вёрстки?

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

Шестнадцатеричные цифры a, b, c, d, e и f нужно писать исключительно в нижнем регистре. Читателю совершенно необязательно проводить время с лупой перед монитором, пытаясь различить 8 и B, 0 и D. Вывод различными программами этих цифр в верхнем регистре следует считать багом.

Разыскивается хороший скрипт автодополнения с выпадайкой в текстовом поле. Скрипт должен брать перечень вариантов откуда-нибудь (аджакс не нужен, варианты могут идти сразу в исходном ХТМЛе) и автодополнять ими при вводе. Ещё должна выпадать выпадайка с подходящими вариантами.

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

Должно работать под всеми браузерами. Может использовать jQuery.js. Не должно тормозить.

Помогайте, пожалуйста.

Недавно у меня на «Вотсоуэвере» стали спамить в комментариях. До этого у меня такой проблемы не было — от спама спасал запрет на комментирование старых заметок (пока роботы успевали найти заметки, к ним уже закрывались комментарии).

Я считаю капчу недопустимым издевательством над посетителями, и я не буду её делать частью формы комментирования ни при каких обстоятельствах.

Самое первое, что я захотел проверить — это разница во времени между моментом получения роботом формы и отправкой комментария. Я думал, что если это делается подряд, то это по-любому спам, ведь живому человеку нужно время, чтобы что-то написать. Оказалось, «умный» робот ждёт 5 секунд перед отправкой формы — это довольно много, за это время человек может вставить комментарий, написанный в Ворде в соседнем окне. Следовательно, таким образом отрубить спам не получится.

Я обнаружил, что все айпи-адреса, с которых был спам, есть в базе на сайте stopforumspam.com, так что можно иметь под рукой эту базу, и считать спамом все комментарии с этих адресов. Но ведь спам может прийти и с адреса, который вчера принадлежал зомби с Виндоусом Экс-пи, а сегодня принадлежит безобидному Маку.

Получается, что подозреваемый в спаме комментарий нельзя просто отметать. Может быть, как раз в таком случае показывать капчу, типа «наш глупый компьютер решил, что вы робот, но вы введите капчу, чтобы переубедить его». Тогда нужно быть уверенным, что такие случаи будут крайне редки.

Следующее над чем я думаю — это использовать Джаваскрипт, который бы делал что-то хитрое в форме, чего бы не смог сделать робот. Но я пока не знаю, вдруг роботы и Джаваскрипт выполнять умеют?

Если у вас есть какой-то опыт в этой области, поделитесь, пожалуйста.

Да, ещё про сайты разных веб-студий.

На странице работы никогда не сказано, собственно, в чём состояло «комплексное интернет-решение». «Сайт компании Пумпурум-лимитед» — и скриншот. Что за компания, чем занимается, зачем ей делали сайт? Этого не написано. Потому, что этими вопросами реально не задавались разработчики. У них было ТЗ, где было сказано, какие нужны разделы, «график» нарисовал что-то в Фотошопе, верстальщик сверстал, вот и сайт, вот скриншот. Что ещё сказать? Не писать же вату из ТЗ, что сайт поддерживает такие-то браузеры и минимальное разрешение такое-то.

Всё это как-то очень уныло.

На сайтах одних веб-студий главная страница рассказывает о том, какой у них опыт в разработке комплексных интернет-решений, поисковой оптимизации и созданию сайтов под ключ. В виде маркированного списка, естественно. Другие веб-студии думают, что первые — отстой, и пишут у себя на главной что-нибудь мерзко оригинальное, например: «О нашей компании больше любых слов могут рассказать наши работы» — и ставят ссылку на портфолио.

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

Продолжим тему нормальных урлов. Некоторые ребята думают, что хороший урл получается, если бездумно заменить в адресе всю служебную хрень на прямые слеши. Эти идиотские урлы видны невооружённым глазом. Например, вместо site.ru/?article=4972304 делают site.ru/article/4972304/.

Такой «красивый» урл ничем не лучше исходного. Он даже хуже: он показывает нам древовидность там, где её нет. Кажется, будто текущая страница — дочерняя для страницы site.ru/article/, на которой 404 или вообще какая-нибудь ошибка ПХП отображается.

Вместо article должно быть написано articles, а по адресу site.ru/acticles/ должен быть список статей. А если он и так показывается на главной, то страница отдельной статьи должна быть дочерней по отношению к главной: site.ru/4972304/. Если уж очень хочется запихать слово article в адрес, то нужно писать: site.ru/article-4972304/.

Урлы с бессмысленным набором слов и чисел, разделённых слешами, являются следствием бездумной конвертации внутренней логики веб-приложения в формат, «похожий на урл». Есть какой-нибудь класс Article, или файл article.php, или функция article (), и в урл его название и попадает.

Конечно, структура сайта чаще всего не является строго древовидной. Частое отклонение — главная страница сайта одновременно и корневая, и соседняя для страниц второго уровня. Но беды в этом никакой нет: на уровне урла всё равно всегда можно решить, к какому из двух уровней относить страницу. В большинстве случаев решение стоит принимать в пользу более короткого урла, потому, что иначе появится ненастоящий промежуточный уровень иерархии. В тех же редких случаях, когда промежуточный уровень появляется, он должен просто тихо редиректить на «настоящую» страницу.

В западном интернете постепенно тоже начинают понимать, что пользоватям не интересен .aspx и прочий?мусор=в&урлах, и переходить на более короткие и чистые урлы. Однако уже в нескольких местах я заметил кретинистические псевдочеловекопонятные урлы, которые нужно истребить. ПЧПУ — это урлы, в которые наряду с бессмысленной технической шелухой запихивается ещё и человеческая часть. Например, такие урлы сейчас делают на Дискогсе:

• http://discogs.com/Руки-Вверх-Дышите-равномерно/release/1193791

Кроме того, что в урле по-прежнему содержится шелуха (1193791), даже человеческая его часть — это обман:

• http://www.discogs.com/The-Beatles-Let-It-Be/release/1193791

По этому адресу оскорбительно (по отношению к Битлам) лежат «Руки вверх». А если часть, начинающуюся со слова release, стереть, то получим 404. Зачем вводить людей в заблуждение, имитируя нормальные урлы, когда система всё равно кривая и калечная?

Человекопонятный урл — это не просто такой урл, в котором понятно, что написано; должен быть понятен принцип, система формирования урлов, чтобы я мог написать адрес и попасть на нужную страницу, как я это с лёгкостью делаю на Википедии. Если слабо сделать как на Википедии (когда и урлы человеческие, и возможные наложения разрешаются дисамбигуационными страницами), то лучше не заниматься ерундой, а сделать урл хотя бы коротким и оставить просто /1193791.

Ещё шесть лет назад я приводил любимую цитату из Монтескье:

Мне кажется, что наиболее совершенно то начинание, которое достигает своих целей с наименьшими издержками.

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

Старшим товарищам к этому явлению стоит относиться с пониманием, но без одобрения.

Я очень хочу, чтобы e2 перешёл уже, наконец, на УТФ-8 (сейчас он использует Виндоус-1251). При этом я в какой-то степени ощущаю себя разработчиком Виндоуса: мне нужно не просто сделать продукт, который был бы хорош сам по себе; мне нужно построить его на имеющейся довольно большой базе кода, научить автообновляться с предыдущей версии и заставить работать на имеющихся инсталляциях.

Идеально было бы сделать так, чтобы очередной e2 просто во время обновления сконвертировал всю базу и всё остальное в УТФ-8 так, чтобы никто не заметил, но зато начали работать любые символы.

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

Но почему-то всё очень сложно.

Есть идея пока оставить конвертацию старых данных и хотя бы просто написать движок, который при инсталляциях с нуля работал бы на УТФ-8. Можно даже не делать автообновления, а разрешить только восстановление из бекапа, в ходе которого уже писать всё в базу таким, как нужно. Но что делать с кодом? Если его сконвертить в УТФ-8 (что, конечно, очень просто), то уже после этого он, думаю, может сломаться из-за использования однобайтных функций работы со строками. Как можно безболезненно перейти на многобайтные функции? Существуют ли многобайтные версии всех однобайтных функций? Насколько это всё надёжно работает?

Короче, проблема, конечно, в том, что я мало знаю про это. Иначе мне было бы всё просто и очевидно. Поэтому я предлагаю тем, кто знает больше, а ещё лучше — у кого есть опыт перевода приложений на УТФ-8, поделиться со мной.

Правило

Золотое правило веб-разработчика звучит так:

Не отвечай на POST-запрос страницей.

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

Когда на странице, полученной по посту, жмёшь F5, «Эксплорер» спрашивает, переотправить ли данные формы. Естественно, нормальный пользователь не понимает, почему у него это спрашивают, и почему нельзя просто перезагрузить страницу — вдруг там появились ещё комментарии? А нельзя потому, что у браузера просто нет никакого механизма получения страницы заново, кроме как повторением того же пост-запроса.

Неопытный пользователь жмёт «Отмену», но быстро обнаруживает, что это приводит только к печальному «Внимание: страница устарела». Так он постепенно научается всегда требовать переотправки формы, становясь, таким образом, опытным пользователем. Опера совершенно справедливо переотправляет форму, не задавая пользователю бессмысленных вопросов.

Естественно, что при переотправке формы комментарий запосчивается дважды, трижды или восемнадцать раз. Не стоит переживать по этому поводу; пусть переживает создатель такого кривого сайта.

Исключение

Отвечать на пост-запрос страницей можно только в экстремальной ситуации.

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

Иными словами, нарушать это правило можно только тогда, когда иначе предотвратить потерю данных невозможно физически.

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

В тайтле такой страницы нужно показывать заголовок того текста, который находится в данный момент перед нами. То есть по мере скроллинга тайтл должен меняться.

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

Кто возьмётся реализовать?

На блоге WHAT WG — о том, почему атрибут alt перестал быть обязательным в HTML 5.

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

In certain rare cases, the image is simply a critical part of the content, and there might even be no alternative text available. This could be the case, for instance, in a photo gallery, where a user has uploaded 3000 photos from a vacation trip, without providing any descriptions of the images. The images are the whole point of the pages containing them.

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

Анне Ван Кестерен опубликовал описание ключевых отличий HTML 5 от HTML 4. Среди приятных мелочей:

[The new element] article represents an independent piece of content of a document, such as a blog entry or newspaper article.

The a and area elements have a new attribute called ping that specifies a space separated list of URIs which have to be pinged when the hyperlink is followed.

A new autofocus attribute can be specified on the input (except when the type attribute is hidden), select, textarea and button elements. It provides a declarative way to focus a form control during page load.

The new required attribute applies to input […] and textarea. It indicates that the user has to fill in a value in order to submit the form.

You can now disable an entire fieldset by using the disabled attribute on it.

The input element has a bunch of other new attributes to specify contraints: autocomplete, min, max, pattern and step.

The style element has a new scoped attribute which can be used to enable scoped style sheets. Style rules within such a style element only apply to the local tree.

The draggable attribute [on any element] can be used together with the new drag & drop API.

The menu element is redefined to be useful for actual menus.

HTML5 has none of the presentational attributes that were in HTML4 (including cellpadding and cellspacing).

getElementsByClassName() to select elements by their class name.

innerHTML as an easy way to parse and serialize an HTML or XML document. This attribute was previously only available on HTMLElement in web browsers and not part of any standard.

activeElement and hasFocus to determine which element is currently focused and whether the Document has focus respectively.

classList is a convenient accessor for className and the object it returns exposes methods, such as has(), add(), remove() and toggle().

Что ж, ждём имплементации. Думаю, в Опере 9.5 многое из этого будет реализовано. Какие-то из фич, связанных с формами, кажется, уже есть.

Я только не понял, за что выкинули элемент s. Написал Ван Кестерену письмо с просьбой по возможности оставить его.

Для нижних и верхних индексов в ХТМЛе есть элементы sub и sup. К сожалению, при использовании их в тексте равенство высот строк ломается, и образуются неприятные дыры:



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

Элементы sub и sup для выравнивания используют свойство vertical-align со значениями sub или super. Именно они и влияют на высоту строки. Стало быть, нам нужно вместо них использовать какой-нибудь vertical-align, оставляющий строку прежней высоты, и сдвигать индексы иным способом, например, с помощью position: relative.

Я уже давно почти везде использую примерно вот такую конструкцию:

sup, sub {
  vertical-align: middle;
  position: relative;
  font-size: 75%;
}
sup { bottom: 0.5em; }
sub { top: 0.5em; }

В результате получается нормальный текст:

Забавный факт:

In roughly a year, the Opera browser went from being one of the least usable SVG implementations (no scripting/DOM support) to the best native implementation and achieved a higher score than the famed Adobe SVG Viewer

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

И хотя сегодня этот SVG, будем честны друг с другом, нафиг не нужен, всё равно приятно!