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

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

Практически пять лет назад я опубликовал на Хабре пост про свой типограф: habrahabr.ru/post/67010. Прошло много времени, он несколько раз обновлялся и получал продолжения в модулях для движков и блогов. Пришло время задуматься о самом лучшем и грамотном инструменте, который будет за вас типографировать текст. Именно по этому я вернулся к своему типографу и все начал заново.

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

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

О продукте

1. Типограф получил поддержку Unicode (это позволяет получать на выходе сразу красивый и форматированный текст без HTML-мнемоники). По умолчанию он отключен, нужно вручную включить.
2. Включил около 70 правил, 30 дополнений и исключений к ним. На сайте есть раздел со всеми общими правилами, там можно подробнее прочитать. Но опять-таки они не все, т.к. есть множество под-правил и условий.
3. Теперь типограф занимаем всего один файл (EMP.php) и доступен для PHP, но в ближайшее время выйдут версии и для Python (в процессе), Ruby, Perl и JS.
4. Инструмент бесплатный и всегда будет оставаться таким. Открытый исходный код. При использовании мы не просим ничего указывать, но будет здорово, если расскажете об этом.
5. Каждое правило можно включить или выключить. Внутри много скрытых правил.
6. Реализована висящая пунктуация (некоторые это называют оптическим выравниванием).

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

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

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

Часто в современном мире стремление к простоте приводит к печальным последствиям. Вот, например, в сфере высоких технологий — простота и удобство практически всегда ставит под угрозу приватность и конфиденциальность пользователя. Это могут быть и WiFi-роутеры, идущие по умолчанию без пароля на беспроводную сеть, и почтовые службы, разрешающие пользователю не заморачиваться со сложностью устанавливаемого пароля. От таких проявлений простоты и удобства часто страдают не только приватные данные частного лица, но и крупные компании, идущие на поводу у своих топ, миддл, а иногда и лоу-менеджеров, которым 123 — удобно, а стандартная политика паролеобразования Microsoft — слишком сложно. Сегодня я хочу рассказать о том, как простота и удобство превращают жизнь тысяч (а то и десятков тысяч) человек в реалити-шоу.

В прошлом году вышел ремейк игры 1993 года XCOM: Enemy Unknown на PC, MAC, XBox 360 и Playstation 3, а в июне этого года ещё и на iPhone и iPad. Историю её создания можно проследить со времени появления первого поколения домашних компьютеров, которое совпало с пиком популярности стратегических и ролевых настольных игр. Почти для любого военного конфликта в истории человечества существовала соответствующая военная игра, а игры в жанре фэнтези выходили далеко за рамки ролевой игры «Dungeons & Dragons»: были также и приключения в глубоком космосе, такие как «Traveller» и даже игры, главными героями которых были адаптированные персонажи литературных произведений, такие как, например, «John Carter of Mars» из книги Эдгара Райза Бэрроуза. Перенос таких игр на компьютерный экран был лишь вопросом времени.

«Все просто», или краткий пересказ длинной истории с пропусками некоторых важных фактов и обстоятельств

В какой-то момент мне казалось, что не проходило и дня, чтобы среди тех людей, на которых я подписан, или среди источников, которые я читаю, не проскакивало хоть что-то, что касалось бы «плоского» дизайна. Вбейте в Bing, Google, Yandex слова «flat design» или «плоский дизайн» ― и вы легко найдете огромное количество материалов: от обзоров и примеров, до аналитических и исторических измышлений или просто мыслей вслух (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, ...).

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

Кто-то говорит, что плоский дизайн интерфейсов пришел или, точнее, объявил о себе во всей красе благодаря платформе Windows Phone (и Windows 8) с ее революционными стилистически простыми и даже намеренно упрощенными интерфейсами. Это было ново и свежо на фоне повального увлечения скеуморфными, натуралистичными иконками в мире Apple. Это было интересно и необычно, в каком-то смысле, знаково, потому что как минимум резко и необратимо решил поменяться и обновиться такой большой и, казалось, неповоротливый монстр как Microsoft.

Просматривая одно из обучающих видео "Школы разработки интерфейсов" Яндекса, наткнулся на ссылку на офигенный труд израильской веб-программистки Тали Гарсиэль (Tali Garsiel) "How browsers work" (Как работают браузеры).

Она в течение нескольких лет отслеживала всю издаваемую информацию о внутреннем устройстве браузеров, изучала исходный код WebKit и Gecko и, в конце концов, собрала все воедино. Вот что пишет сама Тали:

Когда на 90% компьютеров был установлен IE, приходилось мириться с тем, что это загадочный «черный ящик», однако теперь, когда более половины пользователей выбирает браузеры с открытым исходным кодом, пришло время разобраться, что скрывается у них внутри, в миллионах строк программного кода на C++...

Пролистав, я был поражен — отличная работа. Внутреннее устройство браузеров, алгоритмы разбора — все хорошо иллюстрировано, доступно и понятно. И без излишних подробностей, страниц на 30-40. Как раз то, что нужно. Решил — это надо обязательно перевести. Покопался еще немного — оказалось перевод уже как 1,5 года есть!

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

Под катом содержание перевода, чтобы решить стоит ли читать.

1. Введение

В столице нашей необъятной Родины идет беспрецедентный по масштабу проект внедрения технологии Gpon от компании МГТС под эгидой борьбы против медных проводов и за доступную интернетизацию населения. Число абонентов МГТС по городу Москва превышает 3.5 миллиона человек, предполагается, что охвачены будут все.
Идея замечательная – оптика в каждую квартиру, высокоскоростной интернет, бесплатное подключение и Wi-Fi роутер в подарок (правда официально без права его перенастройки, но об этом далее). Реализация же такого масштабного проекта (подобное устройство ставится в каждую квартиру, где есть хотя бы городской телефон от МГТС) как обычно не обошлась без дыр в планировании, которые могут дорого обойтись конечному пользователю. Наша компания заинтересовалась вопросами информационной безопасности клиентов столь масштабного проекта и провела экспресс-исследование, результаты которого мы и предлагаем общественности для информирования о существующих угрозах и мерах борьбы с ними в домашних условиях.

Зачастую вроде бы простые задачи верстки требуют сложной структуры HTML-разметки и использования CSS-трюков. Центрирование элементов или выравнивание контента может быть очень утомительным. Одна из таких задач — это выравнивание элементов верхней части сайта так, чтобы логотип был слева, а пункты меню — справа. Можно использовать float и position:absolute, а для выравнивания по вертикали — добавлять margin и padding разным элементам. Вроде бы ничего сложного. Но если сайт должен корректно отображаться и на мобильных устройствах, возникает много проблем.



Ниже описан лаконичный способ решения этой проблемы.

Фотограф Линден Гледхилл увлекается макросъёмкой мелких природных объектов — снежинок, цветов, насекомых. Один из самых технически сложных видов такой макросъемки — съемка насекомых в полёте. Для того, чтобы успеть «засечь» насекомое в нужный момент, недостаточно человеческой реакции — приходится использовать лазерные или инфракрасные детекторы, которые срабатывают, когда насекомое блокирует лучи лазеров, пересекающиеся в фокальной точке. Не хватает и скорости срабатывания затвора самого фотоаппарата, которая в лучшем случае составляет от 50 до 100 миллисекунд, поэтому фотографии делают только со вспышкой — в тёмном помещении, при постоянно открытом затворе, либо с помощью высокоскоростного внешнего затвора, который предотвращает засветку от окружающих источников света.

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

Крошечный open-source дрон разработанный Bitcraze «прожжуживает» свой путь на рынок этой весной, нацеленный на хакеров и моддеров, экспериментирующих, как в помещениях так и на открытом воздухе.

Буквально несколько часов назад на HTML5 Rocks появилась замечательная статья о текущем положении дел, касающихся загрузки скриптов на странице. Представляю вашему вниманию ее перевод. Поправки можете присылать в личные сообщения.

При разработке одного сайта мне понадобился загрузчик скриптов, так как хотелось что бы загрузка вызывалась из js кода. Из готовых решений нашел requirejs и yepnope. Requirejs — модульный, что к моим требованиям не подходило. Yepnope — асинхронный, это означает, что код в каждом файле мне пришлось бы обертывать в callback функции. Ничего не оставалось, кроме как написать что-нибудь самому. И вот что у меня получилось: wakeloader — безмодульный синхронный загрузчик скриптов для JavaScript. В этой статье я расскажу про него.

Вступление

Здравствуйте, Хабрачеловеки.

В этой статье я хочу рассказать сообществу о такой полезной штуке, как DOM Events. Все, кто хоть как то связан с Javascript, знают, что в этом языке события и их обработка являются одним из важнейших и часто используемых свойств, но не многие знают, как эти события генерировать программно. Собственно, этому и посвящена статья: в ней рассказано, что это, зачем нужно, и как это использовать. О listener'ах речи идти не будет, хоть эта тема весьма тесто связана с рассматриваемой.

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

В итоге получилась система, сочетающая включение/выключение света как с помощью выключателей, так и через интернет — с помощью кнопок на веб-страничке.
Как это получилось — читайте под катом.

Для нас, как и для большинства социальных сетей, очень важны email-рассылки. Одной из интересных и сложных технических задач является корректное отображение писем на мобильных устройствах. Сейчас около 23% писем Badoo открывается именно на них, и это число постоянно увеличивается. А возможно, кто-то прямо сейчас читает наше письмо на своем интернет-холодильнике.
Сегодня мы расскажем, каких правил придерживаться в разработке электронных писем, как сохранить их юзабилити на мобильных устройствах, а также поделимся своими хитростями, накопленными в процессе работы.

Требования

С какими проблемами мы столкнулись и какие требования предъявляются к нашим письмам:

• письма должны корректно отображаться в множестве разных почтовых клиентов и браузеров;
• они должны быть оптимизированы под различные устройства на платформах iOS и Andriod (смартфоны с большим, средним и малым разрешением экрана; планшетные компьютеры);
• нужна обязательная поддержка Outlook 2003/2007/2010, т.к. он занимает большой сегмент использования;
• редактирование компонентов, которые применяются еще в 50 шаблонах писем;
• необходимо создавать универсальные блоки, которые будут подстраиваться под ситуацию, т.к. в письмах данные имеют динамическую структуру (например, письма переводят на 44 языка, в них меняются размеры блоков, изображений, размер текста).

Проверка на поддержку конкретных технологий браузером с помощью JavaScript по праву считается наилучшей практикой при клиент-сайд разработке (Часто используют другой способ, заключающийся в проверке из какого браузера пользователь просматривает страницу — Прим. пер.), но, к сожалению, такую проверку нельзя было сделать с использованием только лишь CSS. Firefox, Chrome и Opera недавно объявили о поддержке CSS директивы @supports и CSS.supports (JavaScript), которые помогут разработчикам определять справится ли браузер пользователя с CSS свойством или нет. Давайте посмотрим на них в деле!

Чем доступнее информация, тем больше её вокруг. Чем быстрее она распространяется, тем меньше остаётся времени на то, чтобы её проверить. Постепенно информационная среда превращается в некое подобие «белого шума». Всё труднее строить внутри себя новые информационные фильтры, чтобы отсеять лишнее: убрать в сторону лозунги, агитацию, пропаганду, а оставить только то, что на самом деле кроется за ними. А манипулировать нашими мыслями пытаются постоянно, и я говорю не о 25-ом кадре (он не работает), а о более земных вещах — приёмах пропаганды, которые так умело (а зачастую — очень топорно) используют политики, рекламщики и вообще, все, кому не лень. Об этих приёмах и пойдёт речь в статье.

Хвост виляет собакой. ("Wag the dog") — чтобы избежать большого скандала или «замять», оставить незамеченным какое-нибудь важное, но неприятное событие, часто используется простой, но хитрый и ловкий приём, который англоязычные политтехнологи называют «Wag the dog», а русскоязычные — «Хвост виляет собакой». Он заключается в том, чтобы вовремя поднять волну обсуждения вокруг вопроса второстепенной важности, на фоне которой другое, более важное событие или действие пройдёт незаметно.
Примеры таких вопросов: Отмена перехода на зимнее время, российское гражданство Депардье, поездка Путина или Саши Грей на Ладе Калине по России, полёты со стерхами и т.д.
Своё название этот приём получил в честь английского выражения tail wagging the dog, который, в свою очередь, появился из следующего народного пассажа:

— Почему собака виляет хвостом?
— Потому, что собака умнее, чем хвост. Если бы хвост был умнее, он вилял бы собакой.

Разрабатывая MaskJS вот уже больше полугода, удалось превратить DOM шаблонизатор в очень мощный, но при этом производительный веб фреймворк. В статье познакомлю вас с возможно интересными подходами к разработки. Уверен, будет интересно почитать о использовании сигналов и слотов вместо DOM событий. И как компоненты делают нашу жизнь проще. Маска легко интегрируется в уже готовый проект, и даже может быть использована вместе с любым другим фреймворком. Основным же отличием наверное является render flow, где в процессе поэтапно создается Document Fragment / контроллеры / «биндинги». Собственно всю гибкость даже сложно передать, но я попробую, и приглашаю под кат.

Ни для кого не секрет, что 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, можно быть уверенным, что в большинстве почтовиках, письмо будет смотреться тоже хорошо, а скорее и лучше.

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