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

1 Один столбец вместо нескольких

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

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

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

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

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

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

Вступление

Целевой аудиторией являются молодые специалисты, которые только начинают свой путь в сфере ИТ. Хочется помочь людям обойти ошибки, которые допустил сам в процессе карьерного роста. А так же получить конструктивную критику от других хабра-пользователей.

* картинка взята с этого сайта

Рады сообщить, что улучшения индексации AJAX-сайтов Яндекс поддержал изменения в поисковом роботе и правилах обработки им URL таких сайтов.

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

При создании AJAX-сайтов могут использоваться URL с #, но такой URL не используется поисковым роботом. Как правило, часть URL после # отсекается. Поэтому вместо URL вида site.ru/#example он обращается к главной странице сайта, расположенной по адресу site.ru. Это значит, что контент страницы может не проиндексироваться и, как следствие, не попасть в результаты поиска.

Теперь вебмастер AJAX-сайта может указать поисковому роботу Яндекса на необходимость индексации, поддержав соответствующую схему в структуре сайта. Для этого нужно:

На Хабре о ней уже вспоминали: контр-адмирал ВМФ США, один из создателей первого американского компьютера MARK-I, автор первого в мире компилятора, разработчик языка программирования COBOL, изобретатель термина "баг" в его нынешнем понимании и просто талантливый человек Грейс Хоппер. А еще в её честь назван эсминец и учреждена премия, которую в своё время получили Кнут, Возняк, Столлман, Страуструп и прочие достойные люди.

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

(Кто не в курсе — субтитры включаются и настраиваются кнопкой «СС»)


P.S. Ютюб в некоторых странах рассказывает, что видео не доступно. Но вот например с американским ВПН — работает (и видео и субтитры).

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

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

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

Проблема

Раньше всю аудиторию Яндекс.Почты мы разделяли на пользователей с флешем и без.

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

А вот с пользователями без флеша (8-10% от дневной аудитории) было сложнее. Мы предлагали им загружать файлы через обычную форму с />. Файлы из неё отправлялись через iframe вместе с содержимым самого письма, и это занимало много времени. Нажав кнопку «Отправить», пользователь долго ждал, пока загрузятся файлы.

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

Я работаю в Почте Mail.Ru, и моей прямой обязанностью является работа с JavaScript во всех его проявлениях. Прикрепление файлов к письму — одна из основных функций любой почты. Мы тут не исключение: у нас уже был Flash-загрузчик, который вполне исправно работал и долгое время нас устраивал. Однако у него был ряд недостатков. Вся верстка, графика, бизнес-логика, и даже локализация были зашиты в нем, в результате чего решение было громоздким, а внести правки мог только Flash-разработчик. В какой-то момент мы поняли, что нам необходим новый механизм. О том, как его создать, пойдет речь в этой статье.

По работе мне несколько раз приходилось участвовать в собеседовании кандидатов на должность клиент-сайдера у нас в компании, смотреть на их познания в Javascript. Удивительно что никто из них не знал толком как же работает jQuery изнутри, даже те, кто отметил свои знания jQuery уровнем «отлично», увы.

У jQuery очень низкий порог вхождения, о нем часто пишут и используют всюду, где только можно (и даже там, где, в общем-то, не нужно), поэтому некоторые даже не смотрят на чистый Javascript. Зачем, мол, его знать, когда есть jQuery, а по нему — тонны примеров и готовых плагинов? Даже на Хабре видел статью про рисование на Canvas, где автор подключил jQuery и использовал его только один раз — для того, чтобы получить доступ к Canvas по его идентификатору. И не считал это чем-то ненормальным.

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

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

Настраиваемые фильтры CSS

СSS фильтры уже имеются в Chrome и Safari, и позволяют расширенные настройки стилей, такие как размытие, искривление и модификацию цветовой интенсивности. Однако, это — только начало. Настраиваемые фильтры CSS позволяют вам описать свои собственные вершинные и пиксельные шейдеры в GLSL, языке, который является неотъемлемой частью традиционного 3D-рендеринга уже в течение 10 лет или около того.

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

Так когда вы можете использовать их? Adobe стал новатором этой технологии и Настраиваемые Фильтры уже доступны в Chrome. Ожидается увидеть их в Chrome в начале следующего года. На данный момент, с ними можно поиграть в Canary.

API автозаполнения

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

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

В прошлом выпуске мы упомянули, что при передаче в jQuery вместо селектора html-строки, на основе нее функция parseHTML создаст соответствующие элементы и вернет их в привычном jQuery-объекте. Сейчас мы рассмотрим все это более тщательно и затронем кроме core.js еще manipulation.js и attributes.js (мельком).

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

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

Хочется странного

Если вы регулярно посещаете с мобильного устройства (телефона, планшета) какие-нибудь сайты, и если у вас регулярно возникает желание изменить на них JS/CSS (но разработчикам сайтов вы по какой-то причине не сообщаете об этих желаниях), то статья вам может быть интересна.

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

Первым делом начал собирать информацию, ее довольно много, есть правда и устаревшая. Например, Twitter поменял уже ссылку, старая twitter.com/share, а новая twitter.com/intent/tweet, у Google ссылка «www.google.com/buzz/post», уже давно не работает, вместо нее plus.google.com/share. Конечно, это общеизвестные факты, но, похоже, все-таки не все об этом знают и предлагают «шарить» на старые ссылки.

В общем, ознакомившись с темой, решил взять кнопки в первоисточнике:

Проблема

Некоторое время назад в работе над клиентской (javascript) частью движка josi возникла, кстати, достаточно часто встречающаяся проблема переполнения стека:
Uncaught RangeError: Maximum call stack size exceeded (google chrome)
В статье рассматривается решение без использования setTimout или setInterval.

Дарова, хабр! (ничего оригинальнее не придумал)

Сомневаюсь что эта заметка тянет на полноценный пост, но я все же оставлю ее здесь. О чем же пойдет речь?

Все мы слышали о Git. Все мы знаем что он — хорош. Но лишь немногие пытаются что-то с ним делать, как-то его протвикерить. Сразу говорю, тут не будет ничего паранормального, только немного работы с файлом .gitconfig. Да-да, именно с тем файлом, который так трепетно пылится у вас в домашней директории.

Так, мне уже немного надоело писать этот, по сути, бессмысленный вступительный текст, так что давайте уже начнем что-то делать.

1. Верстка, аутсорсинг и технические задания

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

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

Вы PM. Как узнать – готова ли вёрстка к реальному использованию?
Вы заказчик. Как убедиться, что работа выполнена качественно?
Как оценить качество вёрстки?

Когда я стал тим-лидом, а позже PM, передо мной стала задача проверять вёрстку наших проектов. Нужно было выработать формальные, легкопроверяемые критерии, соответствие кода которым, должно было давать некую гарантию, что не будет факапов и ни клиент, ни программеры не сказажут потом “WTF?”.

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

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

Итак что же это за список?

Краткая версия теперь доступна на html5checklist.com (github), где можно вносить pull-request'ы.

История обновлений:

• 2015/08/11: Актуализировал рекомендации по оптимизации скорости загрузки. Добавил требование поддержки Retina. Дополнил «19. Мелочи» требованием что изображения должны масштабироваться в зависимости от размера окна.
• 2015/08/10: актуализирован список исключений для CSSLint
• 2015/07/29: актуализирован пункт №13 «плохо»/«хорошо»
• 2015/04/08: добавлено требование использования препроцессоров и рекомендация использования систем сборки
• 2013/04/25: добавлены анализаторами качества кода: CSSLint и JSHint, указан сайт подбора css font stack (спасибо @fliptheweb), мелкие уточнения (работу интерактивных элементов страницы, что не пропадает фон на высоких разрешениях, не должно быть пустых презентационных блоков, при проверках контента — пробовать удалять заголовки, менять местами блоки)
• 2013/04/24: добавил пункт об минимизации каскада (БЭМ-техники, MCSS, SMACSS), необходимости вписывания в экран моб. устройства, заменил ссылку на проверочный текст отображения стандартного html на код с normalize.css, поправил пример где в рекомендации встречался длинный каскад, упомянул про Opera на Presto и новый уровень семантики — в именах классов BEM.
• 2012/04/12: отсортировал пункты проверки в порядке важности, выделил главные, дополнил статью подробностями
• 2011/12/07: дополнил согласно доклада на WSD Минск'2011.
• 2011/07/19: добавлено про повышение надёжности вёрстки благодаря html5-тэгам, про необходимость favicon/apple-touch-icon, отсутствие багов при ресайзе textarea
• 2011/06/15: добавил пояснения какие ошибки валидации допустимы, рассказал про отсутствие официальной кнопки «HTML5 Valid» и про официальное лого HTML5 на сайте.

Приветствую!

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

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