Впервые css был представлен примерно в 1995 году, и был предназначен для стилизации простых текстовых документов. Не веб сайтов. Не приложений. А именно текстовых документов. С тех пор, css, прошел долгий путь. Возможно слишком долгий.

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

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

Некоторое время назад я писал об универсальных радио-приемниках за 20$ из TV-тюнеров на rtl2832. Самым большим их недостатком было то, что они не могут принимать ничего ниже 50Мгц (e4000 — не работает ниже 50Мгц, R820T — ниже 24Мгц), а в этом диапазоне — 3/4 всего интересного, что можно услышать в радиоэфире за счет того, что короткие волны отражаются от ионосферы — и дальность связи уже не ограничена прямой видимостью.

Устранить этот недостаток можно добавив к нему конвертор частоты. Сделать качественный (со всеми фильтрами) конвертер своими руками — достаточно сложно и дорого, потому пришлось купить готовый: Ham-it-up v1.2 c кварцем на 125Мгц (42.95$, из США шло чуть дольше месяца). Краткие результаты тестирования и несколько хитростей для успешного приема на коротких волнах — под катом.

Решил написать пост о популярном нынче Canvas из HTML5 и о своем проекте dbcartajs, его использующем. Почему Canvas? Немного истории. Прежде для создания изображений, иллюстрирующих различные расчетные модели (например, вывод окружности по радиусу и центру в координатах, вывод многоугольника с количеством вершин N и площадью S, вывод окружности на сферу и т.д.), я и мои коллеги по работе в институте использовали различные элементы управления из разных сред разработки: PictureBox их VB6, QPainter и QCanvas из Qt, Canvas из Tk и, наконец, создание изображений по mapfile из MapServer. Позже после знакомства с возможностями HTML5 я решил перейти на использование Canvas и Web-разработку с JavaScript. Удобно — для отладки и разработки нужен лишь браузер.

В комментариях к посту Clipping Magic... я посетовала на невозможность качественно отделить объект от фона в Гимпе. Я с мая искала рабочий способ замены фона, чтобы не мучиться с фотошопом в убунту, которая давно уже является у меня единственной осью на десктопе. Прочитав сотни уроков (в том числе уроков по ручному созданию подобных масок в фотошопе, т.к. маски в гимпе почти не отличаются), я так и не нашла способа, который был бы таким же быстрым и качественным, как Refine Edges в CS5-6. А вчера в каталоге плагинов на официальном сайте Гимпа был выложен плагин, который наконец-то справился с задачей.
Итак, встречайте:

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

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

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

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

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

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

На разработку собственного варианта подсказок меня натолкнул Tipsy Tooltip используемый в Twitter Bootstrap. По началу я пользовался им, но все возможности плагина мне были не нужны и, будучи перфекционистом, лишний код смущал естество. Решил: напишу-ка я то, что нужно мне и ни строчкой больше. Написал и осмеливаюсь поделиться рецептом с сообществом. Авось кому-то приглянется…

Yaxy — proxy-сервер, подменяющий различные части HTTP-запросов и ответов на указанные в config-файле значения. Я не буду здесь описывать, как поставить, настроить и запустить сервер, это всё описано в readme репозитория. Здесь я опишу различные случаи, в которых Yaxy очень помогает, а то и вовсе незаменим.

Первоначально технология HTML (hypertex markup language) была предназначена для описания смысловой структуры веб-документа, то есть для определения частей текста, в которых находятся различные по типу и содержанию части страницы как например заголовки, абзацы, сноски, иллюстрации, гиперссылки и так далее. Говоря академическим языком, HTML создан для семантической разметки документа.

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

До HTML задача семантической разметки документов решалась с помощью:

• TeX (технологии 1978го года) для макетирования академических публикаций
• SGML (технологии 1968го года) для более широкого спектра задач. SGML очень похож на своего потомка XML за исключением ряда правил, которые в некоторых случаях заметно усложняют чтение разметки, как например разрешение не ставить угловые скобки в тэгах.

Другими словами, если TeX был адаптирован строго под нужды макетирования университетских докладов, научных работ и тому подобного, SGML позволял создавать структуры информации подобные Реляционным Базам Данных, то есть реализоваывать ER-модели (entity-relationship).

(пример ER-модели)

(пример ER-отношений)

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

Тим Бернерс Лии создавая Web в конце 80ых, взяв за основу SGML, упростил синтаксис, создал перечень предопределенных тэгов для макетирования веб-страницы, правила использования которых задал с помощью DTD (технология из семейства SGML которая регламентирует порядок использования тэгов — то есть перечень разрешенных атрибутов, вложенных тэгов, разрешение на текстовый контент и так далее) и мы получили HTML 1.0

Таким образом HTML основанный на SGML первоначально был призван для описания структуры документа в контексте ER-отношений ее частей, то есть определения структуры и содержания документа в терминах сходных к базам данных.

Теперь представьте ситуацию, когда в прикладной программе для того чтоб подвинуть GUI-кнопку на несколько пикселей в какую-либо сторону Вам приходится редактировать структуру базы данных. Парадоксально, но в соверменном вебе это в порядке вещей — очень часто для того чтоб визуально подвинуть какой-либо элемент (GUI-кнопку) приходится изменять HTML-структуру (базу данных)!

Seam carving это алгоритм для изменения размера картинки, сохраняющий важный контент и удаляющий менее значимый. Он был описан в статье S. Avidan & A. Shamir. Он дает лучший результат, чем обычное растягивание изображения ввиду того, что не меняет пропорций значимых элементов изображения. Две фотографии ниже демонстрируют работу алгоритма – исходное изображение имеет размер 332x480, в то время как модифицированное seam carving'ом 272x400.


В данной статье я опишу работу алгоритма используя псевдокод и код Matlab. Оригинал статьи, написанный мной на английском доступен тут, исходный код на гитхабе.

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

Не так давно мы начали рендерить 3D-модели на Гитхабе. Сегодня мы с удовольствием объявляем о новейшем прибавлении в семействе визуализаций — о геоданных. Любой файл .geojson в репозитории на Гитхабе теперь станет автоматически отображаться в качестве интерактивной карты (с возможностью листания), снабжённой вашими геоданными.



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

«Под капотом» мы используем Leaflet.js для отображения данных geoJSON поверх специальной версии базового слоя карты улиц MapBox — упрощённого, чтобы данные ваши на нём воссияли. Лучше же всего — то, что картооснова использует данные OpenStreetMap; так что, если пожелаете улучшить какой-либо участок её, редактируйте тотчас же.

Карты на Гитхабе поддерживают отображение данных ГИС как точек, линий и многоугольников. Вы даже можете донастроить способ отображения ваших данных — например, изменить цвета и размеры отдельных пометок, указать более понятные значки, указать дополнительные свéдения для чтения читателем, ткнувшим по заинтересовавшей его пометке на карте.

Сегодня мы хотели бы рассказать о базовых правилах верстки HTML в email-письмах. Как известно, на свете существует множество почтовых клиентов:

• веб-версии у почтовых провайдеров (Gmail, Yandex, Mail, Yahoo итд.)
• десктопные почтовые клиенты (Outlook, Bat, Thunderbird, Mac Mail)
• мобильные почтовые клиенты (Blackberry, Android, Iphone, Ipad итд)

К сожалению, не существует обязательного стандарта верстки писем, который бы универсально поддерживался бы всеми клиентами. Часть поддерживает CSS3, часть нет, какие-то теги и аттрибуты поддерживаются, какие-то нет, не говоря уже о том, что поддержка HTML и CSS меняется даже в пределах одного почтового клиента от версии к версии. Последнее особенно заметно на примере Outlook (от Express и 2003 к Outlook 2011).

Что же необходимо знать тем, кто собирается самостоятельно верстать HTML-код для email-писем?

Доброго времени суток уважаемые хабражители. На сегодняшний день создание разметки для страницы грубо говоря не автоматизировано. Разметку мы выполняем с помощью float или inline-block (подробнее). Поэтому я хочу поделиться с вами замечательной идей — Justify Grid Framefork.

Проблема

Если говорить о верстке на float, то мы сталкиваемся с проблемой центрирования элемента и нам приходиться скурпулезно указывать все значения ширины и отступов. Эту проблему безусловно решают существующие Grid фреймворки (к примеру 960.gs). Но получается симантически не верная разметка и разработчикам постоянно приходиться использовать .clearfix. Плюс ко всему проблемы могут возникнуть из за дробных пикселей. Если говорить об inline-block, то неудобства появляются из за того, что элементы с этим значением выравниваются по базовой линии, а не по верхнему краю. А если на странице несколько inline-block'ов, каждый из которых расположен с новой строки, то между ними будут некоторые промежутки. Любой пробел повлияет на Ваш layout. Решение есть — CSS Grid Layout или Flexible Box Layout, но эти решения не поддерживаются на большинстве браузеров.

Разработчики, использующие Bundle Transformer, часто спрашивают у меня: «Какой минимизатор обладает самой высокой степенью сжатия?». В принципе, в сентябре прошлого года в своей статье «Вышел Bundle Transformer 1.6.2 или что изменилось за полгода?» я уже проводил сравнение минимизаторов по степени сжатия кода, но это сравнение было поверхностным и не было подкреплено цифрами.

В этой краткой статье мы проведем сравнение наиболее популярных алгоритмов минимизации CSS- и JS-кода на примере адаптеров-минимизаторов из Bundle Transformer. В качестве исходных файлов будут использоваться файлы bootstrap.css и bootstrap.js из Twitter Bootstrap версии 2.3.2. Измерять размеры файлов мы будем с помощью YSlow.

Решил я однажды реализовать гибкий способ стилизации подчеркивания ссылок — чтобы просто делать полупрозрачные подчеркивания, регулировать паттерн в dashed/dotted-border, делать волнистые подчеркивания и вообще иметь настройки CSS3 text-decoration, которые еще ни один браузер не умеет.



В результате получился генератор PNG в data-URI на LESS.

Демо.

Я надеюсь тут остались люди, которые помнят старый и ужасный на вид HabraPack? В последнее время я начал натыкаться на свои жуткие иконки на большом количестве сайтов и даже в терминалах оплаты местной компании, в разделе «Социальная сеть». Также, совсем недавно, знакомые попросили чуть обновить иконки, что я собственно и сделал.



Я буду обновлять иконки раз в день, большим количеством иконок. А пока можете СКАЧАТЬ и спокойно пользоваться, если вдруг найдутся люди, кому понравится.

.PSD файл прилагается.

Все знакомы с css параметром border, но есть ли вещи, которые мы не знаем о нем?

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

Ни для кого не секрет, что e-mail маркетинг только начинает набирать обороты во всем мире. А для России – это ещё и вовсе молодая ниша на рынке. И профессиональная верстка электронных писем здесь один из составляющих факторов успеха. Под профессиональной версткой понимается не только визуально красиво и надежно сверстанный макет, но и то, как выглядит usability открытки с маркетинговой точки зрения, как оптимизирована графика вместе с типографией для спам-фильтров и многое другое. Верстка электронных писем довольно обширная тема, в одной статье все не уместить, поэтому в данном посте постараюсь описать только базовые элементы и приемы, надежно проверенные за годы практики и работающие в top самых используемых почтовых клиентах мира: iPhone 4S/5; Outlook 07/10/13; iPad; Apple Mail; Android 2.3/4.0; Yahoo; Gmail. Если рассматривать только российский рынок, то нельзя не упомянуть о Mail.ru и Яндекс.Почта.

Что нужно знать в начале?

Сразу хочу выделить несколько из основных и важных моментов:

1. В нашем арсенале имеется очень урезанный набор css-свойств, которые поддерживаются всеми почтовиками. При этом, стили нужно прописывать inline, а в head выносить только вендорные свойства и те блоки объявлений, которые не несут нагрузки на основную стилизацию письма. Ну и использовать link in head — крайне нежелательно.
2. Не используйте background-image в основных визуальных элементах дизайна и не помещайте в изображения важную текстовую информацию. Вообще нужно всегда учитывать такой вариант, что письмо будет просматриваться получателем без единого изображения.

Каркас

Пожалуй каждый, кто хоть раз верстал письмо под рассылку, знает, что каркас лучше строить с помощью таблиц. На самом деле простая блочная модель div поддерживается на данный момент во всех перечисленных выше почтовиках, за исключением MS Outlook начиная с 2007 версии. Это связано с тем, что в качестве движка последние версии Outlook используют Microsoft Word, который в свою очередь много не знает о блочных css-свойствах. Игнорировать при верстке данный почтовый клиент я не рекомендую, поэтому в качестве фундамента все же используйте table. Да и добившись хорошего результата для Outlook, можно быть уверенным, что в большинстве почтовиках, письмо будет смотреться тоже хорошо, а скорее и лучше.

В качестве примера рассмотрим наиболее важные элементы из следующего, не сложного шаблона: