Хочу поделиться с вами несколькими из прочитанных за последние годы книг в жанре non fiction. Однако при составлении списка возникла неожиданная проблема отбора. Книги, что называется, для широкого круга, которые читаются влет даже совершенно неподготовленным читателем и могут конкурировать с художественными в смысле захватывающего повествования. Книги для более вдумчивого чтения, для понимания которых потребуется слегка напрячь мозг, и учебники (сборники лекций), для студентов и тех, кто хочет более серьезно разобраться в каких-то вопросах. В данном списке представлена именно первая часть — книги для максимально широкого круга читателей (хотя это, конечно, весьма субъективно). Я намеренно отказался от мысли давать книгам собственное описание и оставил оригинальные аннотации даже в тех случаях, когда они не устраивали меня самого, чтобы никак не влиять на процесс отбора для дальнейшего чтения. Как обычно, если вы хотите добавить что-то к этому списку — добро пожаловать в комментарии.

1. Как музыка стала свободной [Конец индустрии звукозаписи, технологический переворот и «нулевой пациент» пиратства]
Автор. Стивен Уитт

"Как музыка стала свободной" представляет из себя захватывающую историю, в которой переплелись между собой одержимость, жадность, музыка, преступность и деньги. История эта рассказывается через визионеров и преступников, магнатов и подростков, создающих новую цифровую реальность. Это история о величайшем пирате в истории, самом влиятельном руководителе в музыкальном бизнесе, революционном изобретении и нелегальном сайте, который по своим размерам превосходил iTunes Music Store в четыре раза.

Заинтересовавшись методологией построения SPA-приложений на Ruby on Rails, я пришел к некоторым идеям, которые реализуются теперь в каждом моем приложении и впоследствии даже были выделены в отдельный гем Oxymoron. На данный момент на Oxymoron написано более 20 достаточно крупных коммерческих рельсовых приложений. Хочу вынести гем на общественный суд. Поэтому дальнейшее свое повествование буду вести уже на его основе.

Пример готового приложения.

Руководство содержит описание поиска личных и корпоративных email различными методами с использованием специальных сервисов и поисковых систем. Включает практические примеры поиска email и рекомендации для начинающих.

Пару месяцев назад я написал статью о том, как начинать работать на oDesk людям привычным к обычным фрилансерским биржам типа free-lance.ru, weblancer, getafreelancer и т.д. Настало время для следующей статьи с советами для людей которые уже стартовали и хотят раскручиваться на этой бирже.

Все изложенное в статье — мое мнение. Можете соглашаться или не соглашаться, но для меня эти правила работают.

Приветствую всех хабражителей!
В этом посте я хочу рассказать, почему в некоторых случаях не стоит доверять информации, которую можно получить просматривая сеансы записей действий посетителя в Вебвизоре от Яндекс.Метрики.

Под катом коротко о технологии, описание проблематики, переписка с технической поддержкой Яндекса и личные выводы.

Несколько выдающихся примеров и рекомендаций по созданию качественного дизайна веб-страницы или блога



Многие люди склонны описывать предоставляемые ими услуги по веб-дизайну как «качественные». Но что означает здесь слово «качество», как определить, является дизайн качественным или нет? Что ж, я вижу несколько способов определить качество применительно к сфере веб-дизайна. Ведь если однажды определить, что позволяет создавать качественный веб-дизайн, можно использовать эти же приемы для оттачивания собственного стиля.

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

Если вы привыкли сначала писать код, а потом его тестировать, то с BDD такой подход совсем не уместен. Сила BDD в том, что он помогает вести разработку начиная со стадии оформления ТЗ. Для BDD это список свойств (фич), который уместно писать вместе с заказчиком.

Но самое главное, что по этому же списку происходит автоматическое тестирование проекта. Инструмент тестирования (в нашем случае это Cucumber) методично пройдет по вашему перечню и дотошно проверит реализацию каждой фичи.

Ratchet — так называется HTML5-фреймворк для быстрого прототипирования мобильных приложений, который 1,5 года назад создали те же парни, которые когда-то выпустили Bootstrap.

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

Я являюсь поклонником Ratchet с момента выхода первой версии. Тогда он был доступен только под iOS.
Не так давно вышла вторая версия, которая наряду с iOS поддерживает Android. Ура-ура!
(правда, обратной совместимости с первой версией нет)

Кому интересно про новые возможности Ratchet 2.0 — прошу под кат!

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

Статистика

После одной недели после релиза приложения, оно набрало 455826 уникальных посетителей, 522091 посещений и 688280 просмотров страницы.

Статистика Tiii.me за первую неделю. Четверг 3 апреля был сумасшедшим

Возможно, вам уже попадался на глаза этот приём. Это поле ввода, которое выглядит так, как будто в нем есть текстовая подсказка (placeholder), но при начале набора текста она не исчезает, а отодвигается в сторону. Мне нравится эта идея. Брэд Фрост написал очень хорошую статью об этом приёме, подробно рассмотрев все «за» и «против».

Большинство примеров использования этой техники полагаются на JavaScript. В один прекрасный день я зашёл на nest.com, увидел там этот приём и задумался: а нельзя ли реализовать то же самое без JavaScript? И вот что из этого вышло.

Вот так выглядит форма на nest.com:

Как человеку с опытом разработчика стать дизайнером? Советы от человека, который сделал это.

Я исхожу из того, что вы уже минимально знакомы с RoR и что-то пытались на нем делать. Этот материал будет интересен простейшей аутентификацией пользователя посредством OpenID, а также тем, кто давно хотел попробовать MongoDB, но не знал с чего начать.

Мы будем использовать:

• Ruby on Rails 3.2.8
• Slim
• Mongoid
• Loginza

TL;DR
Эта обзорная статья. Такое себе "краткое содержание предыдущих серий". Она будет полезна для новичков, или тех, кто не следил за отраслью в последнее время. Для новичков это будет первый шаг во "Вселенную JavaScript", бывалые смогут освежить свои знания.

У JavaScript очень удивительная судьба. Он преодолел путь от самого не понимаемого до самого удивительного языка. У него было тяжелое детство:
Изначально Автор хотел написать функциональный язык. Но менеджеры хотели получить, «обычный» объектно-ориентированный. И чтобы было легко искать разработчиков для новоиспеченного языка синтаксис решили сделать похожим на Java и даже название сделали похожим.
Но на этом история не заканчивается. Java, JavaScript это торговые марки Sun (а теперь Oracle). Microsoft не мог воспользоваться именем JavaScript (Netcape и Sun дружили против Microsoft). В результате Microsoft решил сделать реверс инжиниринг JavaScript и назвал его JScript. Сделали реверс инжиниринг, и сделали его настолько хорошо, что даже содрали все баги в реализации. Позже решили сделать стандарт и назвали его ECMAScript.

Зачем нам вообще нужны спрайты?

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

• Во-первых, используя спрайты, мы ускоряем загрузку страницы; в случае использования иконок, можно создать универсальное средство для применения в проектах;
• Во-вторых, не все устройства с высоким ppi (например, Windows Phone 7.5-7.8, Android до 4 версии на стоковом браузере) поддерживают использование webfonts.
• Легкая интеграция, используя специальные сервисы генерации спрайтов

Постановка проблемы или чтобы жизнь малиной не казалась

Используя css-спрайты со множеством элементов встает проблема о создании css-свойств с background-position; Их нужно писать много, иногда очень много. Конечно, нам помогают многие сервисы по генерации спрайтов — они выдают вместе со спрайтом еще и css/less/sass — файл с координатами. Но практически всегда все жестко завязано на пикселях:

• Изменяя размер (например, для retina-экранов) исходного файла-спрайта все «едет»;
• Мы не можем изменять размер элемента-контейнера, куда хотим вставить, допустим, иконку, чтобы эта иконка смасштабировалась: свойства background-size: cover/contain/100% не работают по понятным причинам;

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

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


Пример работает на LESS 1.5.0, поэтому нет возможности разместить его на codepen или jsfiddle.

 .shade(@type, @color, @depth, @angle, @long, @fade);

• type: значения box/text — box-shadow/text-shadow
• color: цвет тени
• depth:длина тени
• angle: угол наклона
• long: boolean, по умолчанию true — длинные Flat тени
• fade: boolean, по умолчания false — затухание

Для проверки текстовых полей на валидность обычно используют регулярные выражения. Существует несколько наиболе распространенных видов таких даных, как например номер кредитки, дата в определенном формате и т. д. На сайте html5pattern.com собирается коллекция регулярных выражений для таких данных (там это позиционируется, как возможное содержимое html5-атрибута pattern у inpit-элементов, но эти регулярные выражения можно использовать и для привычной валидации с помощью javascript). Актуальные для российской аудитории примеры, вместе с соответствующими регулярными выражениями вы можете посмотреть под катом.

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

Webflow

С помощью данного сервиса вы сможете сверстать кроссбраузерный отзывчивый макет за 55 минут. Очень красивый и удобный интерфейс. Идеальное решение для веб-дизайнеров, 26 000 из которых уже используют Webflow. Для создания двух проектов сервис бесплатный, а в дальнейшей перспективе вас ждут вполне демократичные цены. Инструмент реально «крутой».

Если Вам GUI для верстки не комильфо сам по себе как для меня, все равно рекомендую зарегистрироваться и экспортировать парочку responsive макетов. А еще есть простой генератор отзывчивого лэйаута и Responsive Patterns.

Parallax.js

Функциональный и простой инструмент для создания параллакс эффекта.

Продолжение перевода статьи «Проблемы CSS. Часть 1».

Когда использовать width / height равный 100%?

Height: 100%

Пожалуй, начнем с того, что попроще. Когда использовать height: 100%? На самом же деле, вопрос часто звучит немного по-другому: «Как мне сделать так, чтобы моя страница заняла всю высоту экрана?». Ведь правда?

Для ответа на него нужно понять, что height: 100% равен высоте родительского элемента. Это не магическое «высота всего окна». Так что, если вы захотите, чтобы ваш элемент занял все 100% от высоты окна, то установить height: 100% будет недостаточно.

Почему? А потому, что родителем вашего контейнера является элемент body, а у него свойство height установлено в auto по умолчанию; а значит — его высота равна высоте контента. Конечно, вы можете попробовать добавить height: 100% к body, но этого тоже будет недостаточно.

Почему? А все потому же, родителем элемента body является элемент html, у которого также свойство height равно auto и он также растягивается под размер контента. А вот теперь, если добавить height: 100% и к элементу html, то все заработает.

Стало понятнее? Корневой элемент html на самом деле не самый верхней уровень на странице — им является «viewport». Для простоты, будем считать, что это окно браузера. Так вот, если установить height: 100% элементу html, то это то же самое, что сказать — стань такой же высоты, как окно браузера.

Аутентификация пользователей в экосистемах наподобие Google или Envato реализована в виде отдельных сервисов (accounts.google.com, account.envato.com), предоставляющих необходимые данные и токены сайтам-клиентам. В ходе разработки некоторых проектов на Ruby on Rails мне и пришлось столкнуться с подобной задачей. По-научному — single sign-on или технология единого входа.

Нужен был (1) общий сервис для всех сайтов экосистемы, с (2) преимущественно социальной авторизацией, в угоду входу по связке «логин+пароль».
Сервис, (3) аккумулирующий в себе данные из тех социальных сервисов, с помощью которых пользователь входит в систему, и (4) предоставляющий эти данные сайтам-клиентам.

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

Devise в моем случае подходил мало (завязка на логине+пароле), поэтому предпочтение было полностью отдано omniauth. С этого и началось мое маленькое приключение, о ходе которого предлагаю вам ознакомиться в данной статье.

Сколько уже было сломано копий о задачу выравнивания элементов на странице. Предлагаю вашему вниманию перевод отличной статьи с решением этой проблемы от Стефана Шоу (Stephen Shaw) для Smashing Magazine — Absolute Horizontal And Vertical Centering In CSS.

Все мы знали о margin: 0 auto; для горизонтального центрирования, но margin: auto; не работало для вертикального. Это можно легко исправить, просто задав высоту и применив следующие стили:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Я не первый, кто предложил это решение, однако такой подход редко применяется при вертикальном выравнивании. В комментариях к статье How to Center Anything With CSS Simon ссылается на пример jsFiddle, где приводится отличное решение для вертикального центрирования. Вот еще несколько источников на эту тему.

Рассмотрим способ поближе.