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

Казалось бы, ничего не остается, как купить у соответствующих товарищей credit card with US billing понуро закрыть страницу магазина, уйдя на поиски более дружелюбного продавца, как тут вы замечаете знакомый шильдик PayPal, который повесил владелец сайта, приглашая всех приобрести его товар, заплатив максимально удобным для вас способом. И вот она, победа, вы деловито шествуете по страницам чекаут процесса, как вдруг осознаете, что продавец малого того, что не принимает православные карты к оплате, так еще и на настолько обнаглел, что отправляет свой товар только в пределах своей отчизны, забивая на весь мир и связанные с международной отправкой проблемы.

Если получить адрес для получения посылок в США уже давно не проблема, то вот как получить американский адрес, доступный для выбора при оплате PayPal? Да, система PayPal не позволяет штатным образом владельцам аккаунтов, зарегистрированных в стране, отличной от США, добавить американский адрес доставки.

Но на каждую хитрую жопу, как известно…

Что заставляет дизайн выглядеть скоординированным, спланированным и профессиональным? Ответ: 'цвет'.

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

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

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

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

Даже если такой сайт висит в заголовке выдачи — он продаст?
К тому-же, кликая на первые позиции, пользователь прекрасно понимает, что предложений в ответ на его запрос остается еще масса и, скорее всего, покинет ресурс.

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

SEO совет #1: Сделайте Google Alerts вашим личным интернет шпионом.

Google Alerts это отличный способ позволить крупнейшей в мире поисковой системе стать вашим личным шпионом в интернете. Этот способ позволит поисковой оптимизации инсайдерской информации выйти на совершенно новый уровень.

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

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

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

DC.js

Библиотека позволяет создавать великолепные многоуровневые/масштабируемые кроссплатформенные графики и диаграммы с моментальным перерендерингом при пользовательском взаимодействии. За процесс визуализации отвечает знаменитая d3.js, а за анализ многомерных наборов данных crossfilter.js. Кстати кроссфильтр — проект небезызвестной компании Square.

chart.renderlet(function(chart){
    // smooth the rendering through event throttling
    dc.events.trigger(function(){
        // focus some other chart to the range selected by user on this chart
        someOtherChart.focus(chart.filter());
    });
})

Проблема z-index в том, что многие просто не понимают, как он работает.
Всё, описанное ниже, есть в спецификации W3C. К сожалению, не все её читают.

Описание проблемы:

Итак, пусть у нас есть HTML код, состоящий из 3 элементов.
Каждый из них внутри себя содержит по одному . А каждый , в свою очередь, имеет свой фон: красный, зеленый и синий, соответственно. Плюс ко всему, каждый позиционирован абсолютно левого верхнего края документа таким образом, что он немного перекрывает собой следующий за ним . Первый имеет z-index, равный 1, у остальных двух z-index не задан.

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

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

Сразу хочу сказать, что все книги на английском. Часть из них можно найти на русском, но без английского на уровне чтения и прослушивания подкастов будет тяжко – на русский клевые вещи об управлении продуктами переводят медленно и нехотя. Второй момент – чтение книг из этого списка не сделает из вас менеджера продукта. Как и книжка С++ за 21 день не сделает из вас С++ разработчика. Просто уровень вхождения в окологуманитарные профессии пониже, и это иногда создает напрасные иллюзии.

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

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

AngularJS директивы – это клево

AngularJS является каркасом (фреймворком) для построения web приложений, который позволяет создавать сложные приложения достаточно просто. Одна из его лучших возможностей, это создание директив, которые являются повторно используемыми web компонентами. Это дает возможность создавать новые HTML теги и атрибуты, которые могут динамично отображать контент в ответ на изменение данных, и обновлять сами данные, в случае необходимости.
Это очень высокопроизводительный подход, поскольку он позволяет вам оборачивать сложное взаимодействие с DOM в повторно используемые пакеты кода.

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

Stackedit

Шедевр среди Open Source редакторов! Основан на библиотеке разметки (Markdown) PageDown, которая используется в StackOverflow и других проектах StackExchange. Stackedit синхронизируется с Dropbox и Google Drive, а также сохраняет все документы в local storage, благодаря чему редактирование возможно и в онлайне и в оффлайне. Возможность импорта/экспорта/конвертация Markdown и HTML. Публикация в WordPress, Tubmlr, Blogger, Github, Gist и на любой SHH сервер. Статистика, работа в режиме realtime, поддержка различных синтаксисов (Prettify/Highlight.js), LaTeX, темы… Это просто великолепный продукт.


App.io позволяет запускать iOS приложения в браузере. Это уже тема мобильной разработки, но недавно я читал статью про Sprinty Driver и обратил внимание на то, что BeetlePlay разрабатывают демо-версии на Flash. Решил поделиться. Также советую фреймворк для создания анимаций в UIKit от IFTTT.

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

Webflow

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

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

Parallax.js

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

Сколько уже было сломано копий о задачу выравнивания элементов на странице. Предлагаю вашему вниманию перевод отличной статьи с решением этой проблемы от Стефана Шоу (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, где приводится отличное решение для вертикального центрирования. Вот еще несколько источников на эту тему.

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

Если задать себе вопрос о том, кто на Земле остался не вовлечённым в ИТ-мейнстрим, то на ум в первую очередь приходят жители бедных отдалённых территорий, например, большинства африканских стран, Гималаев и российской глубинки. На достаточно развитых территориях, на первый взгляд, всё нормально: компьютеры, планшеты, смартфоны, гаджеты, Интернет – всё это в изобилии.

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

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

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

Разрабатывая дизайн для веб-сайтов и мобильных приложений в Photoshop, мы сталкиваемся с проблемой при формировании цвета программным кодом, HTML или CSS. Статья призвана покончить с этим раз и навсегда.

«И эти дурацкие иконки! Пиктограмма — это знак, который ни на одном человеческом языке невозможно объяснить. Не зря же появилась речь!»
Джеф Раскин.

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

Я обожаю twitter bootstrap. Прост, местами логичен, достаточно красив, подходит для быстрого прототипирования веб-интерфейсов. Но этого оказалось недостаточно. Взяв twitter bootstrap в большой проект, мне пришлось целиком его разобрать и переосмыслить css-фреймворки как боевые единицы в веб-проектах. В результате переосмысления родились требования к любому css-фреймворку, удобному как верстальщику, так и frontent-разработчику.

Представляю Вам третью статью из серии jQuery для начинающих. В этот раз я постараюсь рассказать о реализации AJAX запросов...

Последнее время мне всё чаще задают вопрос как выбрать тот или иной элемент в DOM'е, и данный пост будет сплошь посвящен селекторам в jQuery, возможно большинство из них Вы видели в различных источниках, но собрать их воедино все же стоит…

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

Картинки кликабельны.

Form builder

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