Это перевод заметки Криса Койера Why Ems? на css-tricks.com.



Я долгое время применял px для установки font-size, из-за чего размер шрифта не мог меняться в Internet Explorer 6-8. Переход на em имеет ряд преимуществ, и в этой статье они детально рассмотрены.

Продолжаю сентябрьскую подборку новых полезных штук для веб-дизайнеров.

Сервисы и инструменты

Cut&Slice me — бесплатный плагин для фотошопа, который помогает быстро готовить элементы дизайна для различных типов устройств.

Этот пост для тех, кому интересно, как в Яндексе создаются интерфейсы продуктов с многомиллионной аудиторией. Мы хотим максимально подробно рассказать, почему решили создать новую почту Trinity, чем руководствовались в работе над ее дизайном, поделиться с вами решением логических проблем.

На самые популярные и важные вопросы дизайнер нового интерфейса Анна Котляревская ответила в интервью:



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

В этой подборке представлены уроки с наглядными примерами по созданию CSS-кнопок на любой вкус.

Fancy 3D Button with CSS3 [Демо | Подробности]

Статья по настройке Медиаджика. Что это такое — можно прочесть тут


Подробности под катом.

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

Итак, изначально у меня был ноутбук Lenovo z61m под управлением Windows 7 Ultimate, телевизор Phillips с электронно-лучевой трубкой и желание сделать удобно. Как позже оказалось, первые два компонента были не совсем подходящими, но об этом позже. Начал я с того, что стал выбирать программу, которая будет крутить контент, так как это не требовало вложений. Попробовал Microsoft Media Center (MMC) и XBMC.

MMC красиво показывал обложки для музыкальных файлов, эскизы для видеофайлов и играл любой контент ровно так же, как я привык в Microsoft Media Player и Media Player Classic — Home Cinema. Подкупало также то, что планировалось купить майкрософтовский же пульт дистанционного управления, а значит, скорее всего, проблем совместимости будет минимум.

XBMC понравился тем, что имеет большое количество шкурок (skins), причем дефолтная шкурка в черных тонах изначально нравилась больше, чем синий фон у MMC. Обилие настроек в XBMC, плагины, относительно часто обновление, и встроенный плагин для показа погоды тоже добавляли интереса к этой программе.

Т.к. на домашнем сервере хранится файловый архив (видео, музыка, фотографии), захотелось
реализовать медиацентр для просмотра содержимого с помощью телевизора/монитора прямо с
сервера.

С помощью CSS-магии мы можем создавать красивые типографические эффекты и забыть о использовании изображений, в большинстве случаев. В этой статье мы создадим ряд симпатичных примеров веб-типографики, используя плагин jQuery — lettering.js, а также различные приемы CSS. В некоторых примерах мы также добавим переходы при наведении курсора мыши, чтобы сделать их немного более интерактивным.

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

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

Кому интересно — сразу скажу, что написано это все на Python/Django.

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

осторожно, очень много букв

По мере того как мы подводим итоги недавнего опроса по сортировке CSS свойств у нас появляется более серьезные вопросы о стиле форматирования CSS. Сортировка свойств это всего лишь один шаг на вашем пути к завершенной стратегии форматирования стилей. Название класса — это часть стратегии. Распределение — часть стратегии. Комментарии, отступы, структура файла… все это формирует руководство по форматированию CSS.

Давайте рассмотрим существующие практики форматирования.

На днях столкнулся с задачей:

Сделать две одинаковые по высоте -колонки, не зависимо от количества текста в какой либо из них.

Условия:

1. Никаких таблиц;
2. Поддержка IE6+ и т.д;
3. Резиновая верстка;
4. Никакого JavaScript, чистый HTML и CSS.

Дизайн:

В дизайне изображены две колонки с отступом друг от друга. Каждый из них имеет свой фон и border с округленными уголками. На вид все просто.

Поиск решений:

Искал и естественно нашел очень полезный пост, где описаны все самые действенные способы решения данной задачи: http://habrahabr.ru/post/64173/.
Собственно 4-е решение из этого поста было наиболее приемлемым, но с помощью него мне так и не удалось вывести два разных фона для своих колонок.

Решение

После недавнего выпуска Retina MacBook Pro и The new IPad, экраны с увеличенной плотностью пикселей начали активно входить в нашу жизнь. Что это значит для веб-разработчиков?

Для начала разберемся в терминологии.

Физические пиксели

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


Не очень удобно, правда? К счастью уже существует несколько хитрых способов решить такую проблему.

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

Для начала определим наши задачи:
— по возможности использовать официальные сервисы определения статуса
— в случае их отсутствия можно прибегнуть к посторонним
— способ должен быть как можно проще, без излишков (всегда можно будет его потом расширить)
— чтобы прорисовка страницы не висла на время запроса, сделаем буфер

Рассмотрим 4 основных способа на примере ICQ, Jabber, Skype и MRA. Остальные можно сделать аналогично.

Написать этот пост меня привлекла эта статья. Многие ее помнят по вот этой картинке.

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

Наверное, вы уже слышали о таких вещах как CSS3 Pie, Selectivizr, HTML5 Boilerplate, CSS3 Media queries и т.п. Речь пойдет о том, как использовать все эти инструменты вместе: дело в том, что неоднократно были замечены конфликты между ними. Ну, а если вы не совсем понимаете, зачем вам HTML 5 и CSS 3, тогда не стану навязывать эти технологии; просто скажу, что они позволяют сократить время верстки (хотя, это не единственный плюс).

После выпуска 2000 иконок FatCow прошло более года. Пошел четвертый год рисования. Страницу посетило 560,096 (288,511+235,221+36,364) посетителей. Чтобы дойти до 3500 иконок, работы хватит до февраля 2013 года. Если добавить размер 64x64, то до середины 2015-го года. Пока вложено $76778 и 2000 часов работы. Тут выложили 3000 иконок, за неделю до выпуска на официальном сайте, ибо владельцы коровы (Bluehost) заняты покупкой крокодила (HostGator).



Чтобы понять, какой набор иконок самый уникальный в мире, пришлось рассортировать 7422 иконок. Результат не подвел…

Идея взята у Dan Eden (demo), я лишь немного доработал способ.

Bombermine Online — результат последних двух недель тестирования и подготовки движка для большого кол-ва игроков онлайн.

Движок написан на Java + Jetty (бекэнд). Фронтэнд — HAProxy + Nginx + Node.js. Клиентсайд — GWT, который транслируется в HTML5/canvas + javascript + websockets. Хостится всё в облаке.

На данный момент рекорд — 50 игроков онлайн. Настроен весь необходимый софт для мониторинга нагрузки. После хабраэффекта обещаем выложить отчёт. Ждём гостей.