Это перевод поста из Facebook Engineering Blog, который интересен, наверное, даже не столько сутью решения, которое в нем описано, сколько рассказом о «кухне» разработки в Facebook. Речь идет об обновленном функционале просмотра фотографий, который появился в конце сентября 2010 г. и был немного еще улучшен на днях.

Задумавшись об обновлении Photo Viewer, мы столкнулись с множеством трудностей. Очевидно, что фотографии это наиболее востребованная функция Facebook. Ежедневно наши пользователи загружают более 100 миллионов фотографий, а предназначенный для этого функционал был создан довольно давно и явно нуждался в доработке.

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

Как нам это удалось
Мы начали с составления списка текущих проблем:

• Наибольшие проблемы возникали с надежностью. Изображения загружались медленно, и иногда процесс зависал на неопределенное время. Пользователям приходилось обновлять страницу в браузере, чтобы увидеть фотографии и комментарии к ним.
• При просмотре фотографий из Ленты новостей приходилось либо открывать их в новой вкладке, либо мириться с тем, что после просмотра нужно было заново прокручивать ленту вниз, чтобы вернуться к предыдущей позиции. Для разбирающихся в компьютере людей это не составляло особых проблем, но многие из наших пользователей испытывали связанные с этим неудобства.
• Функционал просмотра комментариев к фотографиям был также реализован не самым удобным образом. Процесс выглядел так – нужно было посмотреть фотографию, промотать страницу вниз, чтобы увидеть подпись и комментарии к ней, а потом вернуться обратно наверх, и так каждый раз.
• JavaScript, предназначенный для загрузки и кэширования фотографий, а также для публикации комментариев, был также реализован не самым лучшим образом. Он оставался неизменным на протяжении многих лет, на фоне того, что технологии работы браузеров и требования к ним значительно ушли вперед.

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

Недавно столкнулся с задачей прикручивания достаточно необычного шрифта для мобильного веб клиента. Так как работа была под айфон, то я решил, что в этой задаче мне поможет css 3 и такая штука как @font-face. Пользу от такого способа решения задачи, я думаю, видят все, потому что:

• сохраняется поиск по тексту, потому что это текст, а не картинка;
• появляется возможность использовать онлайн-переводчики и разные фишки связанные с текстом;
• никто не отменяет для нас использование line-height, letter-spacing, text-shadow,text-align, и селекторов вида ::first-letter и ::first-line

Фреймворк jQuery Mobile вышел уже относительно давно, но только сейчас мне удалось им заняться. До этого имел дело с jQTouch и Sencha Touch. У каждого из них есть свои плюсы и минусы, но сегодня речь пойдет именно про разработку на jQuery Mobile. Для получения базового опыта я опишу создание простого приложения с несколькими страницами, интеграцией с твиттер и гуглокартами, ну и набором базовых элементов. Поехали!

Вы никогда не сталкивались с проблемой как объяснить человеку, неиспорченному общением с железным другом, азы программирования?

Так уж получилось, что мы, работая в компании ГдеЭтотДом (я и anei), относительно часто ходим обедать в МуМу. Остаток от обеда обычно представляет собой фирменную конфетку. Которую мы не едим — вот такое несоответствие типов.

Но мы нашли выход, скармливая их Валерке.
Я, честно говоря, не знаю, причем тут программирование, Валерка и конфетки, но, в общем, однажды…
Подходит Александреску к Валерке и говорит:

Дисклаймер: описываю только свой личный опыт и мнения автора могут не совпадать с мнением автора. Статья огромная, читать много.

Пишу эту статью, и представляю себе тебя, читателя Хабра, которой в обеденный перерыв залез почитать что-нибудь для развития. А этот читатель, т.е. ты (да, не отворачивай глаза от букв, именно ты) давно наслышан, что своё дело – это круто. И, может быть, как раз не хватало лёгкого пинка, чтобы выйти из зоны будничного комфорта и что-нибудь, да предпринять.

Эта статья адресована тем, кто уже «на грани». Она почти лишена философии и туманных ссылок, просто тупо туду-лист. Бери и делай. Намеренно избавляю тебя от объяснений, зачем молодому проекту нужна госрегистрация, такая ли уж это свобода – быть собственником и от куда взять деньги на госпошлину. Статья адресована московским стартаперам, гео-патчи от других городов приветствуются в комментариях.
Будем считать, что с формой собственности определились — это ООО и упрощенка 6%. Если кому нужно ИП – там проще, справишься и без этой статьи.

Для создания фирмы необходимо:

Вы обращали внимание, что при заходе на сайт www.yandex.ru, мы пытаемся определить, используете вы компьютер или мобильное устройство, чтобы показать подходящую версию главной страницы Яндекса?

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

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

http://api.yandex.ru/detector

С его помощью можно легко перенаправлять пользователей на ту или иную верстку страницы.

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

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

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

Смотрите, внедряйте, делитесь результатами!

Команда с определёнными взглядами на мобильное устройство мира

Навигация по странице

Всё чаще и чаще в web появляются сайты, использующие навигацию, написанную на JavaScript. Типичный случай использования javascript для навигации: страница с меню и блоком контента, куда через AJAX подгружается содержимое:



Пользователь кликает по пункту, JavaScript грузит из сети содержимое, вставляет в блок контента, пользователь доволен: страница без перезагрузки показывает требуемое и траффика потребовалось меньше за счёт того, что не потребовалось грузить все эти HEAD, BODY, STYLE и прочие элементы.

Но вот проблема: URL страницы. Если на old scool сайтах на каждый пункт меню показывается новая HTML страница, и у пользователя есть вменяемый URI, который он может скопировать из адресной строки бразуера, послать другу или положить в закладки, то в случае AJAX интерфейсов в URI странице зачастую нет никаких ссылок на текущий контент документа.

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

Не с секрет, что для решения этой проблемы многие программисты кодируют ссылку на текущее просматриваемое содержимое в якорь (anchor) URI документа. К примеру, на сайте jqapi.com (скриншот которого приведён вначале топика) при выборе того или иного пункта меню якорь страницы меняется на #p={contentId}.

Как вы знаете, StartupIndex почти каждый месяц проводит проектные сессии. Это закрытые конференции, на которых авторы стартапов проводят свои презентации перед независимыми экспертами и инвесторами.

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



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

от переводчика: Перевод немного вольный, не обессудьте — оригинал очень большой. Но смысл постарался передать. Осторожно, много букв!

Многие люди не очень хорошо понимают, чем занимается Y Combinator (YC). Цель этой статьи подробно описать процесс работы, пожалуй, самого успешного инкубатора стартапов в мире.

YС проводит два трехмесячных цикла финансирования в году: с января по март и с июня по август. Они просят основателей каждого стратапа, который финансируют, приехать в Bay Area на весь цикл финансирования, в ходе которого YC интенсивно работает с ними, чтобы получить компанию в наилучшей форме. Каждый цикл завершается мероприятием под названием «День Демо», в который стартап представляют аудитории, которая в настоящее время включает в себя большинство из крупнейших в мире инвесторов стартапов.

На Хабре неоднократно обсуждали различные «облачные хостинги» (вот о clodo недавно написали), но про Оверсан-Скалакси мне упоминаний найти не удалось. В вечных поисках надежного и быстрого хостинг-провайдера я остановился на Linode.com. Данный хостинг очень надежен, быстр и цены хороши. Однако ДЦ в Лондоне находится на значительном расстоянии, пинг не всегда устраивает (хочется ведь, чтобы все было «со скоростью света»), да и не самый удобный способ масштабирования.

Некоторые наши проекты хостятся у Оверсан-Меркурия. Несмотря на проблемы с МакХостом, Оверсан-Меркурий оказался достаточно надежным, за полгода работы было 2 случая, когда были проблемы (одну из них обсуждали здесь, а вторая была ночью, поэтому заметили ее лишь по графиками munin). С Меркурием все здорово, скорость работы, пинги, но цена… В общем, для небольших проектов вряд ли подойдет по цене, да и не уверен, работают ли они с физ.лицами.

Совершенно недавно, гуляя по просторам сети, наткнулся на хостинг в облаке от Оверсан-Скалакси. Раньше как-то заходил на их сайт, но никакой конкретной информации по ценам найти не удалось, поэтому забыл о них на какое-то время. А тут вдруг тебе и цены, и регистрация, и возможность протестировать появились. Недолго думая, я зарегистрировался. Честно говоря, был приятно удивлен панелью управления.

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

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

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


Поехал за книгой в магазин. А пока некоторые отрывки из книги и комментарии:

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

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

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