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

1. Какую работу требуется выполнить

Не просто в общих чертах, а подробно. Важно, чтобы обе стороны одинаково понимали что нужно сделать и что будет являться результатом сотрудничества. Чем подробнее, тем лучше. Важно зафиксировать объем.

Если договоренностей нет, то разбежности в толковании объема ведут к недовольству и конфликту. Один считает, что работа выполнена не полностью, другой же наоборот, считает, что сделал уже больше оговоренного и его обманывают.

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

Я вырос в типовом 9-этажном многоквартирном доме, построенном в советские годы. И весь наш микрорайон состоял либо из таких домов, либо из «хрущевок». Большинство людей моего поколения (80-90-го года рождения) так или иначе тоже выросло в таких серых и однотипных «коробках».

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

В Ivideon нет рекламы. Вообще. Даже несмотря на то, что существенная часть наших пользователей подключены бесплатно.
Мы запустили сервис видеонаблюдения почти год назад и он был бесплатным без всяких ограничений для всех. Три месяца назад мы запустили коммерческие тарифы и ввели ограничения. Две камеры — бесплатно, включая возможность их трансляции на собственном сайте, а дополнительные камеры — за небольшую абонентскую плату. Большинству не корпоративных пользователей двух камер более чем достаточно.

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

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

Но речь не об этом. С момента появления нашего блога и нашей первой статьи на Хабре о том как создавался Ivideon, мы ни разу не рассказали о том, а что же мы сделали и зачем? То, что обычно компании первым делом публикуют на Хабре в виде собственной рекламы, мы пропустили. Позвольте нам сделать это сейчас и не получить уж слишком много минусов. Тем более мы просто хотим рассказать о нашем продукте, который позволяет не только в реальном времени наблюдать за яйцами.
Если просто, то Ivideon дает удобную возможность объединить в одном интерфейсе личного кабинета неограниченное количество камер, разбросанных географически. Они могут находиться как в одном офисе, так и на разных континентах.

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

Производители как железа, так и софта, стараются решить эту проблему. Для Яндекса она тоже актуальна, потому что наши сервисы — это то, что должно быть под рукой у человека в любой момент. Мы по-разному над этим работаем и в рамках эксперимента создали устройство для измерения тока, который потребляется телефоном с батарейки. Теперь мы умеем мерить мгновенные значения тока с батарейки телефона (Nexus, iPhone и др.) в миллиамперах 500 раз в секунду, сохранять эту метрику на диск и считать по ней среднее потребление.

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

Декораторы — это невероятно круто. Они позволяют описывать мета информацию прямо в объявлении класса, группируя все в одном месте и избегая дублирования. Ужасно удобно. Однажды попробовав, вы уже никогда не согласитесь писать по-старому.

Однако, несмотря на всю полезность, декораторы в TypeScript (заявлены также на стандарт) не так просты, как хотелось бы. Работа с ними требует навыков джедая, так как необходимо разбираться в объектной модели JavaScript (ну, вы поняли, о чем я), API несколько запутанный и, к тому же, еще не стабильный. В этой статье я немного расскажу об устройстве декораторов и покажу несколько конкретных приемов, как поставить эту темную силу на благо front-end разработки.

Помимо TypeScript, декораторы доступны в Babel. В этой статье рассматривается только реализация в TypeScript.

Я работаю с MFF и GH. Дружат ли другие браузеры с WebRTC, можно узнать, зайдя на sipjs.com — там без регистрации можно полюбоваться на себя в двух экземплярах (если есть веб-камера), послать себе сообщение или файл. И все это на одной странице. Неинтересно. Интересно, когда я на одной странице, а мой визави на другой. Демо-пример нужно чуть-чуть подправить...

Разработчик Робин Линус на своей странице на GitHub Pages (визит по следующей ссылке небезопасен и его не рекомендуется выполнять с рабочего места, так как кроме видимой части сервисов страница проверяет, залогинены ли вы на сайтах для взрослых, а это останется в логах файрволла как попытка перехода прим.) продемонстрировал, как сайты могут снимать с вас «медийный отпечаток», то есть вести учет того, в каких популярных сервисах залогинены посетители даже без какой-либо авторизации на посещаемой странице.

Для автора публикации «медийный отпечаток» выглядит следующим образом и является абсолютно верным:



И это весьма неприятно.

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.

Javascript – это странный и прекрасный язык, который позволяет писать безумный, но все еще валидный код. Он пытается помочь нам, конвертируя одни штуки в другие в зависимости от того, как мы работаем с ними.

Если добавить строку к чему-то, то он допустит, что мы хотим получить текст, поэтому сконвертирует все в строку.

Если мы добавляем префикс "плюс" или "минус", то он допустит, что нам нужно числовое представление и сконвертирует строку в число, если сможет.

Если мы отрицаем что-то, то он сконвертирует это в булево значение.

Мы можем использовать эти особенности языка и создать немного магии со всего-лишь шестью символами: [,],(,),! и +. Если вы читаете это на десктопе, то можете открыть консоль в вашем браузере (developer tools, например) и запускать код. Просто копируйте любой код из примеров ниже в консоль, и он должен исполнится и вернуть true.

Давайте начнем с простого. Вот главные правила:

1. Префикс ! конвертирует в Boolean
2. Префикс + конвертирует в Number
3. Добавление [] конвертирует String

Вот они в действии:

![] === false
+[] === 0
[]+[] === ""

Все CSS-селекторы живут в глобальной области видимости.

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

Абсолютно каждый селектор потенциально может вступить в борьбу с другим селектором или стилизовать «посторонний» элемент. В этой «глобальной» борьбе селектор может даже полностью проиграть, в итоге не применив к странице ни одного из своих правил.

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

Так не должно быть. Пора оставить позади эру глобальных стилей. Наступило время закрытого CSS.

Доброго дня, недавно я решал проблему притормаживания скролла на страницах Почты Mail.Ru. Особенно эта проблема была заметна на retina-дисплеях. После простого анализа я пришел к выводу, что одна из основных проблем — это медленная отрисовка страницы.

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

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

Сергей Аверин ( XEK )

Изначально я хотел сделать доклад про сравнение фреймворков, но потом подумал, что закидают помидорами, поэтому доклад — просто адский троллинг, как водится у меня. И он, скорее, не про HighLoad, а про менеджерскую задачу, которая стоит над всем этим делом, включая фронтенд.

Про что же, все-таки, получился доклад? Доклад про то, как выбирали новый фреймворк, почему выбирали, и какие задачи решали.

Давайте сначала разберемся, зачем нужен вебпак (webpack), и какие проблемы он пытается решить, а потом научимся работать с ним. Webpack позволяет избавиться от bower и gulp/grunt в приложении, и заменить их одним инструментом. Вместо bower'а для установки и управления клиентскими зависимостями, можно использовать стандартный Node Package Manager (npm) для установки и управления всеми фронтэнд-зависимостями. Вебпак также может выполнять большинство задач grunt/gulp'а.

Bower это пакетный менеджер для клиентской части. Его можно использовать для поиска, установки, удаления компонентов на JavaScript, HTML и CSS. GruntJS это JavaScript-утилита командной строки, помогающая разработчикам автоматизировать повторяющиеся задачи. Можно считать его JavaScript-альтернативой Make или Ant. Он занимается задачами вроде минификации, компиляции, юнит-тестирования, линтинга и пр.

Допустим, мы пишем простую страницу профиля пользователя в веб-приложении. Там используется jQuery и библиотеки underscore. Один из способов — включить оба файла в HTML:

Наша облачная платформа Voximplant — это не только телефонные и видео звонки. Это еще и набор «батареек», которые мы постоянно улучшаем и расширяем. Одна из самых популярных функций: возможность синтезировать речь, просто вызвав JavaScript метод say во время звонка. Разрабатывать свой синтезатор речи — на самая лучшая идея, мы все-таки специализируемся на телеком бэкенде, написанном на плюсах и способном обрабатывать тысячи одновременных звонков и снабжать каждый из них JavaScript логикой в реальном времени. Мы используем решения партнеров и внимательно следим за всем новым, что появляется в индустрии. Хочется через несколько лет отойти от мема «Железная Женщина» :) Статья, адаптированный перевод которой мы сделали за эти выходные, рассказывает про WaveNet, модель для генерации звука (звуковых волн). В ней мы рассмотрим как WaveNet может генерировать речь, которая похожа на голос любого человека, а также звучать гораздо натуральнее любых существующих Text-to-Speech систем, улучшив качество более чем на 50%.

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

Лицо моей жены, когда она вычитывала эту статью

Я решил написать цикл статей, который и сам был бы счастлив найти где-то полгода назад. Он будет интересен в первую очередь тем, кто хотел бы начать разрабатывать классные приложения на React.js, но не знает, как подступиться к зоопарку разных технологий и инструментов, которые необходимо знать для полноценной front-end разработки в наши дни.

Я хочу с нуля реализовать, пожалуй, наиболее востребованный сценарий: у нас есть серверная часть, которая предоставляет REST API. Часть его методов требует, чтобы пользователь веб-приложения был авторизован.

Меньше трех месяцев прошло с HolyJS 2016 Piter, шутка ли, даже лето еще не кончилось, а доклады с конференции уже лежат в открытом доступе. Под катом вы найдете 5 лучших докладов, куда вошли как хардкорные вещи о JS-компиляторах, так и «антихипстерский» soft talk о трудностях выбора инструмента JS-разработчиком.

Кроме того, появились трое новых докладчиков в программе HolyJS 2016 Moscow.

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

Что такое Horizon?

Horizon — это продукт содержащий в себе NoSQL базу данных RethinkDB, консольную утилиту horizon (hz), авторизацию и ACL, клиентскую JS библиотеку horizon.js для работы с БД на клиенте.

Другими словами: Horizon — это тонкий бэкэнд: БД и правила доступа пользователей к базе на уровне запросов.

Была у пользователей Эльбы мечта — вставлять изображения печатей и подписей в счета, акты, накладные и прочие серьезные документы. Отчего бы не порадовать мечтателей, подумали мы. Оглядевшись по сторонам, мы поняли, что обычно в таких случаях всю грязную работу сваливают на пользователя (ну, вы знаете: «картинка должна быть 300 на 400 пикселей, с высоким контрастом, хорошим разрешением и идеально белым фоном»). Но судя по опыту нашей команды, которая бывает в колл-центре, даже простая загрузка изображения с фотоаппарата повергает пользователей в глубокую депрессию, и вызволять их приходится богопротивными способами, а-ля «вставьте картинку в Ворд». Конечно, не может быть и речи о том, чтобы заставлять пользователей чистить печати в фотошопах — пусть фотографируют как умеют, а Эльба выполнит за них все остальное!



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