Я в интернете

РСС    Джейсон-фид

Есть автоматические трансляции в Тумблер и Же-же. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

Позднее Ctrl + ↑

Обсуждаем ХТМЛ 5 с Сергеем Чикуёнком

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

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

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

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

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

На безрыбье и рак мозга

Кто не устремлён за @ilyabirman, вот вам за это очередной дамп бредовый. Простите, что много.

Доволен этими:

  • Станиславский не поверил собственным глазам!
  • кешью по безналу,
  • центр клонирования семьи,
  • не на жизнь, а насморк.

Незадача: хотел пошутить, что касты в Индии делятся на подкасты, а оказалось, что так и есть.

Мелочёвка:

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

— Ворота, подъём!

Риторические вопросы:

  • Когда декабристы смотрят Гугль-мэпс, у них посещённые ссылки выделены фиолетовым?
  • Хрустальные туфельки можно мыть в посудомойке?
  • Если скрестить шпаги и сабли, получатся... рапиры?
  • Равна ли сила Кориолиса массе Кориолиса умноженной на ускорение Кориолиса?

Копирайтинг и нейминг:

  • Окуджаваскрипт,
  • Реалити-шоу «Тихий дон — 2»,
  • Тина Канделаки-Страйк,
  • Вячеслав Блутусов,
  • Куб Мёбиуса и шар Клейна,
  • Белка Пирса,
  • Пятка Роршаха,
  • Социальная сеть «220 В».

На цветочном ларьке: «Мы работаем для ваз!»

Смотрите во всех зоопарках страны. Спрашивайте на дискотеках города.

Встречают так себе, а провожают поуму.

Он буквально вырвал победу на чемпионате по поеданию хот-догов

— Чего не купил костюм?
— Мал воротник, да дорог.

Пост оплачен! (критика в сторону РПЦ)

— Католичество, право, славное!

Benchmark: «Осторожно, окрашено!»

Do you want to save hex?

Морг здесь неуместен (при обсуждении плана застройки)

— Расскажи, Камилла, где была.

— Отрисовывал силуэт в Иллюстраторе, обвёл строук вокруг пальца.

Все полезные йогурты полезны одинаково, каждый бесполезный йогурт бесполезен по-своему.

— Вы позорите часть мундира!

Пьёт — значит любит.

— Если ты такой умный, то почему ты такой бледный?

Эта крошка хороша в постели. (Ещё сон хорош в постели.)

— Ваня, через дорогу раздевалка!

Болельщики отправили футболистам «Луч-энергии» луч энергии.

Лейблы контролов на форме

На дверях не пишут: «Чтобы пообщаться с Абрамом Моисеевичем, зайдите в этот кабинет». Или «Зав. терапевтическим отделением:». Или: «Посетите туалет».

На дверях пишут: «Иванов Абрам Моисеевич», «Зав. терапевтическим отделением»,

Туалет

Лейбл на форме — это просто подпись, табличка, наименование. Она не должна ни призывать воспользоваться контролом, ни учить это делать. Двоеточие после лейбла обычно не нужно — просто потому, что для постановки знака препинания необходима какая-то причина.

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

Синтаксис элементов интерфейса

Помню, как готовил самую первую версию этой таблицы в Матвеевском в 2007 году, за вот этим столом.

Абсолютно относительно

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

слов<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 или анимации) раньше, чем решают базовые задачи вёрстки?

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

Конкурс уважаемых советчиков

Пользуясь случаем (заключающемся в устроении конкурса) пиарю конкурс:

Конкурс уважаемых советчиков

Наше жюри — самое объективное и беспристрастное.

Колэмбия

На улице Энгельса:

Colambia

То есть вот это же какой-то дизайнер нарисовал в своём Кореле. Как его на работу приняли, как у него эту работу приняли — этого никто не знает. А может хозяин магазина даже не заметил?

Нудлс-бар

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

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

Течь

Самая непростительная форма издевательства над английским на почве необразованности — это когда tech читают как «течь». Хочется немедленно ввести за это смертную казнь. Течь — это когда течёт, где ваши уши-то? Вентиль старый, пропускает воду помаленьку — течь. А tech — это тек!

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

Правильные книги

Роберт Брингхерст (Robert Bringhurst) учит нас типографике. Он зануден и порой невыносимо медлителен, но сильно повышает разрешение. Интерлиньяж, пробелы, капитель — после Брингхерста видишь эти вещи существенно лучше.

Артемий Лебедев учит нас делать сайты. Он остроумен и уверен в себе, и, главное, он действительно откуда-то знает, как надо. Здравый смысл — это главный инструмент, который удаётся освоить внимательному и критичному читателю Лебедева.

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

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

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

Ранее Ctrl + ↓