20 заметок с тегом

решения РСС

Интерфейсные тени в Фотошопе Избранное

6 января 2012, 13:49

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

Кнопка с эффектом дроп-шадоу

Смысл эффекта — плашка по форме объекта кладётся под него, размывается и сдвигается. Вот какие параметры выставлены у этой тени:

Параметры эффекта дроп-шадоу

Чтобы тень была интереснее не обязательно звать техдизайнера: группа параметров Quality позволяет добиваться намного лучших результатов.

Во-первых, контур. Его можно гнуть:

Контур тени в Фотошопе

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

В комплекте с Фотошопом идут какие-то совершенно невменяемые контуры, дискредитирующие саму эту фичу (речь о первых двух строчках):

Контуры тени в Фотошопе

Последние четыре контура — мои. Нужно не лениться добавлять себе в набор удачные контуры, чтобы можно было быстро их выбирать. Вот, например, последний контур в деталях:

Контур тени в Фотошопе

Настоящая тень сходит на нет неравномерно, потому что источников света много разных. Так что контур стоит немного поискажать по вкусу и до готовности.

Во-вторых, шум. Шум просто стоит добавить на уровне 2-3%:

Шум у теней в Фотошопе

С такими контуром и шумом кнопка получится уже вот такая (остальные параметры те же):

Кнопка с улучшенным эффектом дроп-шадоу

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

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

Чеки из магазинов Избранное

15 ноября 2011, 23:17

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

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

Инбокс везде Избранное

7 ноября 2011, 22:04

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

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

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

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

Сегодня, разбирая залежи букмарок в браузере, я догадался, что там тоже нужно сделать инбокс, чтобы все новые закладки добавлять именно в него:
Инбокс везде

Короче, видите, то есть это не просто я так делаю, а это аж целая моя методология, и поэтому этому посвящается аж целая заметка.

Чиним кретинистическую барсовскую переключалку раскладки Избранное

18 ноября 2009, 12:03

Вчера запостил это на macosxhints.com, но когда они там опубликуют никто ведь не знает, так что напишу и сюда, по-русски.

В Барсе поменялось поведение переключателя раскладок. Раньше ⌘Пробел мгновенно переключал раскладку при нажатии, а сейчас он ждёт, когда отпустишь пробел, и если в течение доли секунды этого не сделать, поперёк экрана вылезет полупрозрачное окошко со спиком раскладок, в котором можно переключать раскладки пробелом (продолжая держать ⌘) аналогично тому, как после нажатия ⌘Таба можно табом переключать программы.

Это окно не только совершенно бессмысленно, но ещё и дико раздражает.

Во-первых, из-за него каким-то образом постоянно переключаешься в язык, в который не собирался переключаться (я не могу отследить, как это происходит, но иногда вместо русской или английской типографской раскладки у меня включается встроенная неотключаемая U.S.) Кто сталкивался с этим, тот поймёт.

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

В-третьих, новый переключатель кажется тормозным и ненадёжным. На кой хрен Эплам нужно было «чинить» то, что не было сломано — я не знаю.

Решение проблемы пришло мне в голову, когда я узнал, что старое поведение переключателя вызывается комбинацией Шифт+⌘Пробел (при этом в настройке клавиатуры оно отсутствует). С помощью моего любимого назначателя клавиатурных сочетаний на всё что угодно Спарка я просто переназначил клавиши так, как мне нужно. Итак:
  1. Вырубаем сочетание ⌘Пробел в System Preferences / Keyboard.
  2. Открываем Спарк и создаём новое действие типа Text / Keyboard.
  3. В качестве сочетания пишем ⌘Пробел.
  4. Там, где кейстроук, жмём на запись и жмём Шифт+⌘Пробел.
  5. Убеждаемся, что демон Спарка запущен (видно в статус-строке).
  6. Врубаем обратно сочетание ⌘Пробел в System Preferences / Keyboard.
Теперь всё работает как в Леопарде.

Об установке Снежного барса Избранное

8 сентября 2009, 12:06

Вот ещё, хотел рассказать.

На разных форумах люди обсуждают нарезание дистрибутива Снежного барса на ДВД, а поскольку он больше 6 ГБ, то в разговоре фигурируют двухслойные ДВД. Переводить болванки — непонятное для меня развлечение. Вся эта хрень совершенно не нужна.

Люди, похоже, не понимают, что такое ДМГ-формат и как пользоваться Диск-утилитой. Берём флешку на 8 ГБ (и выше; или внешний жёсткий диск), втыкаем её в УСБ, запускаем Диск-утилиту, делаем в ней Restore образа из Mac OS X Install DVD.dmg на флешку. После этого втыкаем её в Мак, на который хотим поставить Снежный барс, перезагружаем его с нажатым Альтом и выбираем, чтобы он грузился с нашей флешки.

Направляем стрелочки в Айтюнсе в мирное русло

26 февраля 2009, 1:58

В восьмом Айтюнсе исчезла любимая всеми ребятами опция «Не показывать грёбанные стрелочки-ссылки на Айтюнс-стор в каждой песне».

Многие, конечно, знают, что стрелочки всё равно можно прибить с помощью нехитрой команды:
defaults write com.apple.iTunes show-store-arrow-links -bool false
Но не все знают, что круче делать так:
defaults write com.apple.iTunes show-store-arrow-links -bool true
defaults write com.apple.iTunes invertStoreLinks -bool true
Теперь стрелочки будут вести не в в Айтюнс-стор, а в правильно отфильтрованную библиотеку. Особенно это удобно, если нужно прыгнуть в неё из плейлиста. Если ткнуть на стрелку рядом с названием альбома, откроется весь альбом; если рядом с исполнителем — всё, что есть этого исполнителя.

Как починить мышь на Маке

16 октября 2008, 4:34

Если кто не знает, в чём проблема с мышью на Маке (например, не читал мою давнюю заметку про три беды МакОСа), то суть её состоит в том, что кривая ускорения у Эплов слишком кривая. Когда мышь по столу двигаешь медленно, по экрану она ползёт совсем как черепаха, но стоит её начать двигать хоть чуть-чуть быстрее — и ты уже на другом конце экрана. См. также «mac mouse acceleration» на Гугле.

Кстати, чем больше монитор, тем сильнее ощущается проблема.

Естественно, это нужно починить, потому, что без идеальной мыши пользоваться компьютером невозможно. Поиск в интернете приводит нас к следующим вариантам решения:
  • поставить программу MouseFix (iMouseFix), USBOverdrive или SteerMouse и всё будет хорошо (все они лишь изменяют коэффициенты в эпловской кривой, сохраняя её дебильную форму; последние две ещё и требуют перезапуска системы, и выглядят как говно);
  • поправить какой-то .plist (то же самое, там только коэффициент);
  • поставить фирменные драйверы от мыши: они могут разрешать более тонкую настройку (логитековский Контроль-центр не является драйвером, а просто даёт навешивать всякие фичи на боковые кнопки, что можно намного удобнее делать и встроенными средствами);
  • купить микрософтовскую мышь: её драйверы сами управляют перемещением указателя в обход системы и делают его правильным (покупать мышь ради решения сугубо софтверной проблемы — явный левак);
  • просто использовать микрософтовские драйверы: они заработают с любой мышкой (с моей не заработали, точнее, не повлияли на её поведение);
  • выкинуть мышь, перейти на планшет (это интересно в принципе, но не решает обозначенной проблемы);
Моё любопытство привело меня к документу Микрософта, где описывается правильная кривая ускорения. В Виндоусе зависимость скорости перемещения указателя от фактической скорости движения мыши достаточно близка к линейной:

Кривая ускорения мыши в Виндоусе

В итоге я бросил поиски решения «в один клик» и стал копать глубже. Поисковый запрос «edit mouse acceleration curve» привёл меня к чудесной программе ControllerMate, которая умеет делать с любыми устройствами ввода и вывода такие вещи, что закачаешься. Например, я в порядке эксперимента заставил её всякий раз, когда я нажимаю на правую кнопку мыши, мигать трижды лампочкой Капс-лока на клавиатуре. Но нам она нужна для другого: в ней есть редактор кривой ускорения мыши:

Редактируем кривую ускорения в Контроллермейте

Бледно-голубыми нарисованы системные кривые с разными коэффициентами — только здесь я глазами увидел, насколько же они бесчеловечны. Чтобы повторить кривую Микрософта потребовалось две минуты, на подбор удобных коэффициентов (с нажатыми Command/Option можно масштабировать всю кривую целиком по одной из осей) — ещё три.

И после этого наступило счастье.

После трёх дней ощущения себя на этом компьютере в гостях я, наконец-то, дома.

О «ручном» рендеринге текста в Фотошопе Избранное

21 августа 2008, 23:19

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

Вот, например, набросок кнопки «Выйти» для воображаемого сайта (слово слегка утоплено в кнопку за счёт теней):

Рендеринг текста

Выпуклости и тени трогать не будем, сконцентрируемся на надписи. Она сделана шрифтом «Ариал», 12 п, в режиме «хрустящего» антиалиасинга (crisp). Проблема в том, что она мыльная:

Рендеринг текста крупным планом

Сравним рендеринг с другими режимами антиалиасинга — резким (sharp), насыщенным (strong) и спокойным (smooth), а также попробуем выключить его совсем:

Рендеринг текста с разным антиалиасингом

Резкий режим оставляет меньше всего мыла, но он механически округляет всё до целых пикселей, ломая форму букв и толщины штрихов („й“ получилась жирнее других). В насыщенном режиме вообще всё получается грязно-жирным и мыльным. Спокойный вариант трудно отличить от исходного хрустящего. Устранить мыло совсем удалось лишь полным выключением антиалиасинга, но текст при этом, естественно, стал кудрявым, с лестницами по бокам.

В общем, у машины получается плохо — требуется человеческое вмешательство. То, чем мы займёмся дальше, называется «пиксельными войнами» (pixel wars). Отталкиваться будем от хрустящего антиалиасинга.

Не все знают, что кегель шрифта может быть дробным. Этим мы воспользуемся для того, чтобы по вертикали буквы попали в целое число пикселей. Критерием успеха для нас будет чёрная горизонтальная однопиксельность верхнего штриха буквы т. Будем потихоньку увеличивать шрифт. Красоты достигнем лишь на отметке 13,2 п:

Будем потихоньку увеличивать шрифт и достигнем красоты на отметке 13,2 п

Горизонталь буквы т теперь выглядит хорошо, а вот верхняя часть у „В“ размазалась. Возьмём её и загоним обратно в пиксели. Будем её уменьшать, а не увеличивать, чтобы относительный размер строчных стал больше:

Возьмём букву В и загоним обратно в пиксели

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

Начнём с изменения кернинга (Альт+влево/вправо между буквами). Будем пододвигать каждую букву так, чтобы её левый вертикальный штрих попал в пиксели (в случае с круглыми буквами можно просто стремиться к симметрии). Получится что-то такое:

Будем пододвигать каждую букву так, чтобы её левый вертикальный штрих попал в пиксели

Как видим, кернинг помог лишь отчасти: в некоторых буквах при хорошем попадании одного штриха, другой размазывается. Тут нам поможет растягивание букв. Возьмём „ы“ и сделаем её чуть-чуть пошире, чтобы правый штрих «защёлкнулся»:

Возьмём „ы“ и сделаем её чуть-чуть пошире, чтобы правый штрих «защёлкнулся»

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

В итоге получится что-нибудь вроде такого:

http://ilyabirman.ru/meanwhile/pictures/typerendering-6-result.png

Сравним с исходным рендерингом (было — стало):

Сравним с исходным рендерингом текста

Наверняка можно добиться и ещё лучшего вида. Можно также было начать с другого режима антиалиасинга, но он должен быть один и тот же во всём наборе кнопок, если их делается несколько.

Приятных экспериментов.

Работа с текстом в Фотошопе без мыши

11 июня 2008, 17:25

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

Alt+Backspace — закрасить выделенные кусок текста текущим основным цветом;
Ctrl+Shift+U — подчеркнуть/неподчеркнуть;
Ctrl+Shift+B — зажирнить/отжирнить;
Ctrl+Shift+I — наклонить/выпрямить.

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

Заодно, раз уж речь пошла о работе с текстом, скажу тем, кто не в курсе, что Alt+влево/вправо позволяет изменять кернинг между символами, между которыми стоит курсор, а если в тексте есть выделенный фрагмент - трекинг в нём; а Alt+вверх/вниз настраивает интерлиньяж в выделенном фрагменте.

Холодильник Студии Лебедева

20 мая 2008, 2:10

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

Конечно, упрекать Лебедева в хреновости формулировки нельзя. Формулировка в высшей степени кривая и непонятная, но на то она и дизайнерская задача - нужно вникнуть в то, что хочет заказчик, описать это ему, и рассказать, как ты это сделаешь. То, что заказчик сам не знает, чего хочет - нормальная история.

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

Моя версия

Предлагаю интересующимся, раз уж такое дело, обсудить задачу здесь. Вот мой подход:
  • продукты кладутся в холодильник только на верхнюю полку частной зоны;
  • если кто-то видит, что какой-то продукт "чё-то сильно уж давно лежит" (с учётом того, сколько обычно такой продукт не портится), то он его перекладывает на нижнюю полку;
  • если кто-то видит, что какой-то продукт сильно давно лежит на нижней полке, он перекладывается в общественную зону;
Короче, сомнительные продукты опускаются ниже на одну полку.

Нижняя полка служит автоматической напоминалкой типа: "эй, это чьё? съешьте или выкините уже!" Владелец всякого продукта имеет возможность и скорректировать неоправданное "понижение полки": увидел свою колбасу на нижней полке - заволновался - переложил обратно на верхнюю.

Продукт из общественной выкинет первый же обнаруживший, что он уже негоден. Если же продукт вдруг окажется годным, то он его съест, предотвратив порчу.

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

Понятие "нижняя полка" условно; это может быть просто какая-то часть частной зоны. Можно просто положить туда жёлтый лист бумаги; то что на нём - под вопросом.

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

Комментарий к лебедевскому решению

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

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

Отучаем инсталлятор проверять версию ОС

30 марта 2008, 15:02

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

Начну с того, что мой инсталлятор был EXE-файлом, который встречал меня словами о том, что он распаковывает MSI-файл, а уже после того, как распакованный MSI запускался, он ругался на то, что Виндоус у меня не XP.

Как нетрудно догадаться, MSI можно выловить в C:\Documents & Settings\<Your name here>\Local Settings\Temp. Попутно замечу, что "распакованный" из 25-мегабайтного дистрибутива файл оказался всего лишь 19-мегабайтным...

Теперь нам понадобится Orca MSI editor. Оказывается, MSI-файл представляет собой базу данных с какой-то кучей таблиц. Что там к чему - понять трудно, но моё внимание привлекла таблица LaunchConditions, в которой была всего одна строчка:

(Not Version9X=400) And (Not Version9X=410) And (Not Version9X=490) And (Not VersionNT=400) And (Not VersionNT=500) And (Not VersionNT=502) And (Not VersionNT=600)[ProductName] requires that your computer is running Windows XP

Я эту строчку тупо удалил, перезапустил инсталлятор, и прога встала как миленькая.

Корректное завершение explorer.exe

14 февраля 2008, 14:48

Так уж вышло, что explorer.exe иногда падает. Одна из связанных с этим проблем - это то, что он забывает какие-то изменения, сделанные на панели задач или рабочем столе. Например, если вы добавили новый тулбар с ярлыками на панель задач, поставили его слева от тулбара с кнопками задач, рассортировали там иконки, а потом explorer.exe упал, то всё это он забудет напрочь.

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

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

Мало кто знает, что корректно завершить процесс explorer.exe (и, таким образом, добиться сохранения всего) можно не перезагружаясь. Для этого нужно нажать Пуск - Завершение работы, а потом выбрать Отмену, удерживая Ctrl, Alt и Shift.

После этого через Ctrl+Shift+Esc - Файл - Новая задача explorer.exe запускается обратно, и он всё помнит.

Заставляем Photoshop CS2 работать с кириллицей

31 марта 2006, 23:10

Photoshop CS2 любит переключаться в шрифт Myriad Pro каждый раз, когда вы пишете что-то по-русски некоторыми шрифтами. Со стандартными системными шрифтами этой проблемы не происходит. Шрифт Myriad Pro - вообще какой-то шрифт-загадка, в папке шрифтов Windows его нет, и вообще нигде на компьютере найти что-то похожее мне не удаётся. Почему фотошоп переключается именно в него - тоже непонятно. Но факт остаётся фактом.

В Photoshop'е CS можно было набрать текст выбранным шрифтом, игнорируя то, что вместо букв печатаются кракозябры, а потом выделить его - и ещё раз выбрать нужный шрифт; всё вставало на свои места. В CS2 выбрать нужный шрифт не удаётся: тыкаешь на него, а он всё равно делает Myriad Pro.

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

Как пишут в некоторых местах, проблема в том, что сами шрифты записаны в каком-то таком формате, который фотошоп не понимает. И вот, "если гора не идет к Магомету", то почему бы не сконвертировать сами шрифты в понятный фотошопу формат? Для этого нашлась специальная программка ttfconv (16 KB), которую можно скачать вот тут. Технология использования программы: кладём "неправильные" шрифты с ней в одну папку, запускаем ttfconv *.ttf, полученные шрифты устанавливаем. Запускаем фотошоп, наслаждаемся.

P. S. На первое апреля пост попал случайно; решение действительно рабочее.

Изображения в RSS-читалке Оперы

31 марта 2006, 16:57

Сенсация! Оказывается, RSS-читалка Оперы умеет показывать изображения. Я был совершенно уверен, что не умеет!

Хитрость в том, что во время просмотра RSS нужно на тулбаре нажать на View и в подменю Display снять галочку с Suppress external embeds... Кроме того, там должен быть выбран формат HTML, а не Plain text. Ужас какой.

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

Надеюсь, в девятке они сделают что-нибудь, чтобы это работало сразу.

Ужасный баг Оперы с куками

23 июля 2005, 0:30

Как известно, браузер решает, какие куки слать странице вместе с запросом, на основании того, какие домен и путь прописаны у куки. Причём домены тупо сравниваются своими концами. То есть, кука, оставленная для домена ilyabirman.ru, видна всем доменам *.ilyabirman.ru.

Страшный баг Оперы состоит в том, что если домены ilyabirman.ru и something.ilyabirman.ru создадут куки под именем name, то им обоим будет слаться та кука, которая оставлена для домена ilyabirman.ru. Таким образом, если something.ilyabirman.ru по неосторожности оставил куку с таким же именем, с каким уже успел оставить куку ilyabirman.ru, то он никак не сможет достать её значение.

Другие браузеры понимают, что более "родные" куки должны иметь приоритет...

Из-за этой проблемы мне не удавалось залогиниться в e2, который я поставил в своём поддомене, ведь ему прилетала кука не с тем ключиком, который только что был сгенерен, а с тем, который валиден только для ilyabirman.ru.

Секс с этим багом продолжался несколько часов: записываю в куку значение, а прилетает совсем другое, что за чертовщина!? Всё это ещё и осложнялось тем, что изучаемые куки представляли собой случайные 40-значные шестнадцатиричные последовательности, поэтому чисто визуально понять, что прилетевшая кука относилась к ilyabirman.ru не представлялось возможным. Но, наконец, я вычислил в чём было дело.

Начиная с v1104, e2 приписывает ко всем создаваемым кукам префиксы, состоящие из такого числа знаков подчёркивания, насколько глубоко относительно второго уровня зарыт домен, где он установлен. То есть, сайт something.ilyabirman.ru получает куки, например _key, _commenter_email и так далее.

Это уже второй баг Оперы, который мне пришлось сегодня исправлять самому в e2. Но про первый я даже рассказывать не хочу, там такииииие дебри DOM...

Fix That SpeSta!

22 июля 2005, 19:01

Возможно, кто-то заметил, что SpeSta работает из-под e2 как-то криво.

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

Победа пришла неожиданно. Вчера в ходе общих поисково-расследовательских мероприятий я обнаружил заметку, в которой написано, как заставить штуку работать. Слово автору:
Открываем файл stat/counter.php (если SpeSta установлена у вас в папку stat, разумеется). Находим пару строчек следующего содержания:

if (!isset ($ref) ) $ref=$GLOBALS['HTTP_REFERER'];
if (!isset ($pg) ) $pg=$GLOBALS['REQUEST_URI'];

Меням на следующее:

if (!isset ($ref) ) $ref=$_SERVER['HTTP_REFERER'];
if (!isset ($pg) ) $pg=$_SERVER['REQUEST_URI'];
Попробовал - вроде бы помогло. Исправление довольно приятное в том плане, что хуже таким образом сделать не возможно точно. Поэтому, думаю, следующий хотфикс научит e2 влезать в counter.php и править это автоматически.

Сделаем картинки показабельными!

25 апреля 2005, 12:06

Когда картинки выключены, браузер должен показывать их альты. Что делает Опера:
  • Если альт - нормальный текст, то вместо картинки она показывает этот текст
  • Если альт отсуствует, то вместо картинки показывается текст "Image"
  • Если альт есть, но пустой, то она не показывает ничего
Последнее логично (ведь пустой альт означает, что картинка используется только для оформления) и наверняка соответствует спецификации (смотреть лень). Но не всегда удобно. Проблема в том, что если картинка не отображается вообще никак, то нельзя на неё нажать правой кнопкой и выбрать Load image, то есть, картинки с пустыми альтами никак не отобразить, приходится включать отображение рисунков на странице. Ещё сейчас стало модно делать так, чтобы сайты проходили валидацию, поэтому все стали пихать пустые альты даже в те рисунки, которые имеют смысл, например, в заголовки меню (напомню, альт - обязательный атрибут тэга img).

Короче, решение проблемы выглядит так:

for (i in is = document.getElementsByTagName ('img'))
  if (is[i].src) if (is[i].getAttribute ('alt') == '')
    is[i].setAttribute ('alt', '#')

Закидываем это в папку пользовательских скриптов Оперы с расширением .user.js (важно!) и забываем про проблему навсегда. Я не очень большой специалист в DOM, может быть это же можно написать и короче/правильнее/оптимальнее, но это работает.

Как я верстал C-Airlaid Избранное

19 октября 2004, 20:35

Описание существующих проблем браузеров интересно, описание решений этих проблем интересно вдвойне, крики «маздай» ничего кроме зевоты не вызывают.
Данил Иванов, imfo.ru, вот здесь

Попробую для разнообразия последовать этому принципу и написать вдвойне интересную заметку. Расскажу-ка я о том, как я верстал airlaid.ru и с какими проблемами столкнулся. (Чёрт возьми, не могу не заметить, что с этими проблемами я не столкнулся в Опере.)

Вот такую штуку мне надо было получить:

Результат

Думаю, очевидно, что имеется в виду вёрстка в три колонки, т. е. ширина главного меню (и нижней плашки под копирайты) составляет 1/3 ширины окна; выравнивается и то, и другое посередене. Для простоты я решил делать колонки шириной 33%, 34% и 33% соответственно. Всякая шелуха вокруг нас интересует мало, поэтому рассмотрим упрощённый вариант задачи:

Упрощённый вариант

Итак, нам нужно сделать просто трёхколоночную вёрстку. Сложность здесь представляет (как оказалось) задача скругления краёв у синих плашек. Для начала я нарисовал 4 вот таких вот уголка для разных мест, антиалиаснутых на нужном синем фоне (восьмикратное увеличение by Photoshop):

Такой вот уголок

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

Эти уголки были расставлены в нужные места вот так:

#main-menu  {
  position: relative; 
  left: 33%;  top: 0;  width: 34%;  height: 170px;
  background: #189CC0;
}
#menu-lc  {  position: absolute;  left: 0;  bottom: 0;  }
#menu-rc  {  position: absolute;  right: 0;  bottom: 0;  }

<div id="main-menu">
<img id="menu-lc" src="menu-lc.gif" alt="" />
<img id="menu-rc" src="menu-rc.gif" alt="" />
</div>


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

Глюк в IE 6 при 1024 и 1600 пикселях

Internet Explorer 6.0, при 1024 и 1600 пикселях

Глюк в Firefox 0.9.2 при 800 и 1024 пикселях

Mozilla Firefox 0.9.2, при 800 и 1024 пикселях

Забавно, что при ширине окна 800 пикселей IE показывал всё правильно, а FF отлично справлялся с вариантами 1152 и 1600. Целенаправленно я проверял только более-менее вероятные ширины окон, однако в обоих браузерах наблюдался такой эффект: при плавном изменении горизонтальных размеров окна глюк то появлялся, то исчезал в совершенно хаотичном порядке.

Я специально повторил эту вёрстку для "упрощенной задачи", причём вотнул стили прямо в HTML, чтобы интересующиеся могли не сильно напрягаясь посмотреть, что да как. Откройте это с помощью IE и/или Mozilla, поизменяйте размеры окна.

Открыть!

Первая приходящая на ум вероятная причина глюка: проценты в разных местах округляются по разным правилам - где-то в сторону меньшего, а где-то - в сторону большего. Однако такое объяснению проходит только в случае с IE; обратите внимание, когда изменяешь ширину его окна, он то показываёт всё правильно, то показывает уголок на один пиксель левее, чем нужно. В Mozilla же происходит намного более интересный эффект: она иногда показывает всё правильно, иногда показывает уголок на один пиксель правее чем нужно, а иногда - на один пиксель левее. Чтобы не быть голословным, приведу конкретные цифры: при ширине 800 пикселей уголок сдвинут вправо (как на рисунке выше), при 814 всё отображается правильно, а при 828 пикселях уголок сдвинут влево (как на рисунке про IE). Объяснения такому глюку я уже придумать не смог.

Начал я пытаться эту проблему решать. Сначала я попробовал запихать оба нижних уголка меню в таблицу, сделать её шириной 100%, поместить в левую колонку левый уголок, написать там align="left", а правую - в правый и написать align="right". Но в результате получил ровно тот же самый эффект (вроде бы, в обоих браузерах). Тогда у меня появилась сумасшедшая мысль: позиционировать уголок в нужные места javaScript'ом. Вариация на эту тему: подставлять в right: иногда -1px, иногда 0, иногда 1px, в зависимости от резрешения и браузера. Так можно было бы сделать, чтобы в стандартных разрешениях всё работало OK. Но этого я даже не пытался делать - слишком уж уродливое решение.

В конце концов я придумал вариант, при котором задача решается, а уродливость её решения, скажем так, остаётся на допустимом уровне. Я сделал вот что:

#menu-rc  {  position: absolute;  right: -1px;  bottom: 0;  }

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

Внимательные товарищи заметят, что под Gecko глюк немножко остался, но это уже совсем мелочи. Причина этого глюка частично в том, что у Gecko, как я уже сказал, не два, а три варианта расположения уголка (-1px, 0 и 1px), а моё решение 100% лечит только от варианта с двумя расположениями, т. е. как IE.

В общем, такие дела.

Победа над флоатами

21 декабря 2003, 2:59

Научился наконец справляться с флоатами в HTML/CSS. С ними была такая проблема: если вертикальный размер у флоата больше, чем у текста, который его обтекает, а действие происходит внутри div'а, выкрашенного в зеленый, скажем, цвет, то вертикальный размер этого div'а становится равным вертикальному размеру текста, плюс поля. То есть получается, что флоат, скажем картинка, вылазит за див снизу. Когда этот div выкрашен в зеленый цвет, то эту засаду сразу видно. Всё это прямо следует из:
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist.
(c) W3 Consortium

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

<div class="fuck_w3c_standards"></div>

В CSS:

.fuck_w3c_standards {
  clear: both;
}

Outlook в трэй

3 декабря 2003, 19:37

Пока - так, хотя вот в форуме каком-то пишут, что заставить Outlook XP сворачиваться в tray можно какими-то изменениями в реестре. Зашел я в реестр... Скажем так, неочевидно, какими именно изменениями можно этого добиться. Кто в курсе? А то я не люблю левые программы.

Добавлено позднее: HKEY_CURRENT_USER, Software, Microsoft, Office10.0, Outlook, Preferences. Создаем ключ REG_DWORD со значением 1. Перезапускаем Outlook.

Итак, TheBat! уже очень-очень скоро отправится в корзину.