JavaScript *

Сегодня я раскажу про модуль Hardware в Voximplant Web SDK. Этот модуль пришел на смену старой системе управления аудио- и видеоустройствами. Но сначала – немного об управлении устройствами в WebRTC-стеке и зачем все это нужно.

Редко, но у конечных пользователей бывает несколько микрофонов. Или бывает несколько динамиков: например обычные динамики и bluetooth-наушники; или динамик телефона и громкая связь для смартфона.

А вот две камеры в современном мире бывают очень часто. На планшетах и телефонах: обычная и фронтальная. На ноутбуках: встроенная и получше внешняя. И так далее и тому подобное. Пользователь может сильно растроиться, если по дефолту будет выбран не тот набор устройств и он никак не сможет их изменить. Это первое применение управлению медиа в WebRTC.

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

Привет, Хабр!

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

Всем кому интересна данная тема или просто любопытно посмотреть на новый фреймворк, который может и в SmartTV, просим под кат.

В Google Play есть одно приложение, разработанное Chilango Lab, у которого больше миллиона загрузок и довольно высокий рейтинг. Называется оно Nothing, что можно перевести как «Ничто», и замечательно оно тем, что не делает абсолютно ничего. В нём, правда, спрятана приятная пасхалка, но это не меняет дела. Если проанализировать это приложение, то окажется, что его размер — 14 Мб, при установке оно занимает 19,24 Мб.

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

Ему это удалось. А именно, он воссоздал функционал Nothing, используя HTML, CSS и JavaScript, оформив его в виде прогрессивного веб-приложения (PWA, Progressive Web App). Оно работает без подключения к интернету, вызывать его можно, как и обычное приложение, с главного экрана. Основная разница между обычным Android-приложением и его PWA-копией заключается в размерах. Первое, напомним, занимает на устройстве 19,24 Мб. Второе — 205 Кб.

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

Мысль перевести фронт на какой-либо js фреймворк появилась одновременно с возможностью писать React на Kotlin. И я решил попробовать. Основная проблема: мало материалов и примеров (постараюсь эту ситуацию поправить). Зато у меня полноценная типизация, безбоязненный рефакторинг, все возможности Kotlin, а главное, общий код для бека на JVM и фронта на Javascript.

В этой статье будем писать страницу на Javasript + React параллельно с её аналогом на Kotlin + React. Чтобы сравнение было честным, я добавил в Javasript типизацию.

Сегодня снова пятница, и мы публикуем очередную подборку бесплатных вебинаров. Тематика — разработка: обзор языков программирования, путь программиста, основы JavaScript. Если вам интересно — вперед!

Пока первые early adopters примеряют в свои проекты наши новые видеоконференции (до 100 человек!) мы продолжаем рассказывать об интересном из мира передачи голоса и видео с участием браузера. Про видеоконференции тоже расскажем, но позже — когда накопится критическая масса пользователей и соберется интересная статистика. А сейчас я перевел и адаптировал для нас рассказ Dr. Alex о месте разных протоколов при передаче видео с низкими задержками. Рассказ по сути является ответом на другую статью, и автор вместе с рассказом указывает на ошибки и неточности, которые допустили его коллеги по цеху.

Прошло 2.5 года после публикации первой версии подробного туториала по основам Redux. За это время gitbook насчитал 200 000+ уникальных посетителей.

Под катом подробнее об учебнике и список изменений.

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

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

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

Все это побудило создать введение в те аспекты работы с шейдерами, которые наиболее вероятно пригодятся в работе именно верстальщику для создания различных 2d-эффектов с картинками на сайте. Конечно с поправкой на то, что сами по себе в дизайне интерфейсов они у нас применяются относительно редко. Мы сделаем стартовый шаблон на чистом JS без сторонних библиотек и рассмотрим идеи создания некоторых популярных эффектов, основанных на сдвиге пикселей, которые сложно сделать на SVG, но при этом они легко реализуются с помощью шейдеров.

Автор статьи, перевод которой мы публикуем сегодня, говорит, что создал свой первый веб-сайт когда ему было 14 лет, в виде школьного проекта. Тогда перед ним стояла простая задача: разработать сайт, содержащий некий текст, изображения и таблицу. Обычно к школьным проектам он относился так: сначала о них забывал, а когда подходил срок сдачи, делал их в самый последний момент. Однако в тот раз всё было совсем не так. Особенно его интересовало то, как будет выглядеть его первый сайт. Тогда, для того, чтобы сделать всё так, как надо, он приложил все усилия. Автор материала говорит, что, ещё с тех давних времён, он стремился к тому, чтобы то, что он делает, выглядело бы как можно более привлекательно. Это стремление живо в нём до сих пор. Здесь он хочет поделиться советами по дизайну веб-страниц.

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

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

Сегодня я расскажу вам, как мы делали микросервисный фронт в нашем SaaS-решении и с какими проблемами столкнулись.

Материал, перевод которого мы сегодня публикуем, посвящён исследованию объектов — одной из ключевых сущностей JavaScript. Он рассчитан, преимущественно, на начинающих разработчиков, которые хотят упорядочить свои знания об объектах.



Объекты в JavaScript представляют собой динамические коллекции свойств, которые, кроме того, содержат «скрытое» свойство, представляющее собой прототип объекта. Свойства объектов характеризуются ключами и значениями. Начнём разговор о JS-объектах с ключей.

TypeScript 3.0! Да, он вышел, и в нем по-настоящему много нововведений. Под катом вы найдете подробное описание всех новинок последней версии, среди которых режим build, новый тип unknown, значительные изменения в API, улучшения производительности и многое другое. Присоединяйтесь!

Закрываем летний сезон! UralJS #9 пройдёт в субботу 25 августа в офисе Контура на Широкой речке. Обсудим, зачем фронтендерам микросервисная архитектура, научим тесты по-настоящему жать на кнопки и разберёмся, как поймать ошибку на компьютере пользователя раньше, чем он позвонит в техподдержку.

Вот подробное описание докладов:

Большое спасибо всем участникам конкурса по программированию! Мы рады объявить окончательные результаты конкурса.

В конкурсе участвовали 186 решений. Мы провели между ними турнир в два раунда, как объявляли ранее. Поздравляем победителей:

1. Asta — приз 3000 USD.
2. Silent Bob — приз 2000 USD.
3. Robert Speed — приз 1000 USD.

Специальный приз 400 USD получает участник под псевдонимом indutny за разработку альтернативной арены для онлайн-тестирования решений с большей пропускной способностью, чем у предоставленной нами. Спасибо!

Официальную таблицу результатов вы найдёте на GitHub.

Можно ли по-простому рассказать фронтенд-разработчикам о работе «безоблачной» архитектуры Serverless в рамках AWS (Amazon Web Services)? Почему бы и нет. Давайте отрендерим React/Redux-приложение в архитектуре AWS, а после этого поговорим о плюсах и минусах AWS-лямбд.


В основе материала — расшифровка доклада Марины Миронович с нашей весенней конференции HolyJS 2018 в Санкт-Петербурге.

njs — это JavaScript-интерпретатор в легковесном веб-сервере, с помощью которого можно создавать новые nginx-переменные и обработчики стадий запроса. Чем njs хорош? Чего не умеет? И зачем вообще его сделали? На эти и другие вопросы ответит Дмитрий Волынцев (xeioex), разработчик nginx и основной разработчик интерпретатора njs.

— Дмитрий, зачем понадобился скриптинг в конфигах nginx?

— Первая причина — директива if. Люди, которые первый раз ее увидели, думают, что можно использовать ее императивно. На самом деле это не так — конфигурация nginx является декларативной. В примере ниже можно подумать, что в ответе будут два header: X-First и X-Second. Но в ответ попадет только второй header, потому что так устроен nginx: если мы напишем две if-директивы, то выберется самая последняя.

location /only-one-if {
    set $true 1;

    if ($true) {
        add_header X-First 1;
    }

    if ($true) {
        add_header X-Second 2;
    }

В начале года мы опубликовали несколько материалов о популярных наборах компонентов для React, Angular и Vue. Сегодня мы представляем вашему вниманию перевод статьи из той же серии, посвящённой React Native. Учитывая непрекращающийся рост популярности React, и то, что мобильные приложения и PWA становятся всё востребованнее, неудивителен тот факт, что React Native привлекает всё большее внимание сообщества разработчиков.



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

В последнее время набирает популярность тренд «исчезающих фреймворков», локомотивом которого, без сомнения, можно считать SvelteJS — buildtime-фреймворк и компилятор в ванильный javascript.

Несмотря на то, что концептуально Svelte весьма прост, а в использовании еще проще, многие разработчики задаются вопросом, в чем же killer-фича данного фреймворка, да и подхода в целом? Почему это не «yet another javascript framework»?

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

Давайте разберемся, но сначала я расскажу вам одну легенду…