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

От переводчика

Это перевод небольшой заметки, написанной вчера Lea Verou, в ней предлагается интересная, хотя и не новая техника для решения повседневных задач.

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

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

Статья

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

• Пересечение:«Что-то, что совпадает с шаблоном А и шаблоном Б»
  Например: Пароль, минимум 6 символов, в котором хотя бы одна цифра, хотя бы одна буква, и хотя бы один специальный символ
  
  
• Исключение: «Я хочу что-то, что совпадает с шаблоном А, но не совпадает с шаблоном Б»
  Например: Любое целое число, которое не делится на 50
  
  
• Отрицание: Все. Что не совпадает с шаблоном А
  Например: Строка, которая не содержит в себе слово «Foo»

Давным-давно срочные сообщения переносили голуби. Жизнь их была, как правило, коротка и опасна. Хищные птицы, сложные погодные условия и низколетящие НЛО сильно уменьшали шансы на успешную доставку маленького письма. В общем, нелегкая жизнь была у птичек. К вящей пользе птичек в XIX столетии их работу стал выполнять телеграф, а в конце XXго зарождающаяся электронная почта.

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

Добрый день.

В этой статье я расскажу о том, как реализовать систему мониторинга активности пользователей с помощью Node.js и Socket.IO. Выглядит это примерно так:

В настоящее время интернет полон историями успеха, как проекты засветившиеся на Kickstarter’e, получают несколько миллионов долларов (Pebble – 7 млн$, Double fine Adventure – 3,3 млн$). Суммы в несколько миллионов — по-настоящему серьезные инвестиции, удивляет, что это деньги не специальных инвестиционных фондов, а простых граждан.

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

Мы уже писали о методах (Mobile First и Response Web Design), которые используем при разработке нашего сервиса. В этой статье я хочу поделиться с вами нашим опытом. То, что в теории кажется простым, на практике порой оборачивается кошмаром. Речь пойдет о том, как нам удается создавать универсальный веб-сервис, способный работать на большом количестве устройств.

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



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

Есть такая конференция ADD (Application Developer Days) на которой любят всякие архитектурные штуки для разработки ПО обсуждать, обычно эти штуки заканчиваются тоже на xDD — DDD, TDD, MDD и т.д.

Вот к примеру на прошлой конференции задались вопросом, а что такое DDD (Domain Driven Design)?
А Николай Гребнев из CUSTIS — встал и ответил.

Видео доклада:

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

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

UPD: альтернативный вариант перевода вы можете найти на rsdn (спасибо flamingo за ссылку).

В последнее время словосочетание «машинное обучение» (Machine Learning, ML) стало невероятно модным. Подобно любой распиаренной технологии, энтузиазм здесь превосходит уровень реализации конкретных продуктов. Можно спорить, но мало какие алгоритмические технологии со времен потрясающих инноваций от Google 10-15 лет назад привели к появлению продуктов, широко распространившихся в массовой культуре. Не то, чтобы с тех пор не было прорывов в машинном обучении, не было столь потрясших и имевших в основе вычислительные алгоритмы. Netflix может использовать умные рекомендации, но он и без этого Netflix. А вот если бы Брин и Пейдж не анализировали в своих корыстных целях графовую структуру веба и гиперссылки, у нас не было бы Google.

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

Я не пытаюсь убедить вас не делать классных продуктов, основанных на машинном обучении. Я всего лишь пытаюсь прояснить, почему это так непросто.

Картинки со спрайтами безудержно используются для скачивания массы значков и элементов интерфейса всех сразу, единственным HTTP-запросом. Однако они несколько обременительны в употреблении, так как приходится рассчитывать сдвиги и задавать их в background-position. Не получится добавить, убрать или переставить спрайты без такого пересчитывания. Или изменить размер спрайта без того, чтобы наткнуться на его соседа сбоку.

Как можно устранить эту проблему? Ну, положить все спрайты друг на друга, отключить их видимость, затем показать только тот, который нужен. Хотел бы я, чтобы это было возможно… и давно хотел… а затем случилось вот что (читайте снизу вверх):



Ах, хорошо! И ужé работает в Файерфоксе. Такая же возможность запланирована к добавлению в Оперу: баг «CORE-37596» (я не мог найти общедоступной гиперссылки, к нему ведущей). Есть и альтернативы SVG-штабелям, лучше поддерживаемые браузерами: элементы embed, iframe, object или img — но я всё же предпочитаю фоновые картинки из-за того, что проще изменять их размеры и положение. Так что давайте надеяться, что поддержку SVG-штабелей добавят и другие браузеры.

Итак, как же работает SVG-штабель? На самом деле, весьма несложно. Поглядите в исходный код SVG-файла Эрика.

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

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

Приветствую всех.

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

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

Шрифты со значками восхитительны, но…

они размыты. В них нет настоящей, попиксельной резкости. Да, использование @font-face для значков обрело заметную популярность. Я и сам рекомендовал и даже стал коллекционировать их. Но в таких значках есть изъян, который меня достаёт. Они всё ещё немного размываются на несетчаточных дисплеях (а таких до сих пор подавляющее большинство). Попробуйте поуправлять размером у Криса в демонстрации и вглядитесь попристальнее. Эффект по-разному проявляется у разных размеров, но все они имеют одну и ту же проблему «полупиксельной размытости». Возможно, её заметить не так просто, так что вот здесь я увеличил скриншот пятнадцатипиксельного размера (а заодно и фоновый шум убрал):

Этот пост воодушевлен и является логическим продолжением недавно размещенного здесь материала «Хабр vs TechCrunch». Сам я с его авторами никак не связан, но выражаю им большую благодарность за то, что поделились своим опытом.

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

После рассылки у меня на руках остался небольшой список изданий, которым я не могу не поделиться с Хабросообществом. Добро пожаловать под кат!

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

Если вы не понимаете, что побудило сделать git именно таким, то вас ждут страдания. Используя множество флагов (--flag), вы сможете заставить git работать так, как по вашему мнению он должен работать, вместо того, чтобы работать так, как git того хочет. Это как забивать гвозди отверткой. Работа делается, но хуже, медленнее, да и отвертка портится.

Все дела сделаны и теперь есть время черкануть пару строк об автоматизации тестирования…

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

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

Почему это глупо

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



Это скриншот из презентации «Beyond the mobile web by yiibu» (очень рекомендую).

Во-вторых, если вы не facebook или yandex, скорее всего, вы не потянете создание и поддержку разных версий сайта для каждого устройства. Да и это не имеет особого смысла. Потому что ситуация становится похожа на реалии пятнадцатилетней давности. Тогда делали сайт «под браузер», а сейчас автор предлагает делать сайт «под устройство».

Как сделать один сайт для всех устройств

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

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

В этой статье я кратко в примерах объясню что такое свойства __proto__, prototype и работу оператора new в JavaScript.

Свойство __proto__

Абсолютно любой объект в JavaScript имеет свойство __proto__. Это скрытое системное свойство, и не во всех реализациях языка оно доступно пользователю.
При обращении к любому свойству объекта, оно в первую очередь ищется в самом объекте:

var obj = {ownProperty: 1};
console.log(obj.ownProperty);// 1

Но если его там нет, поиск происходит в свойстве __proto__:

obj.__proto__ = {propertyOfProto: 2};
console.log(obj.propertyOfProto);// 2

Если его нет и там, оно ищется дальше по цепочке:

obj.__proto__.__proto__ = {propertyOfProtosProto: 3};
console.log(obj.propertyOfProtosProto);// 3

Эта цепочка называется цепочкой прототипов (prototype chain).