Обновить
128K+

JavaScript *

Прототипно-ориентированный язык программирования

258,74
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Свой сервер обложек на Python для интернет-радио

Время на прочтение12 мин
Охват и читатели11K
image

Я перфекционист который любит во всём порядок. Больше всего меня радует когда вещи работают именно так, как они должны работать (в моём, разумеется, понимании). А ещё у меня уже давно есть своё персональное интернет-радио на базе IceCast-KH + LiquidSoap. И много лет мне не давал спокойно спать тот факт, что сервера потокового радиовещания не умеют отдавать обложки (artwork) проигрываемых треков в потоке. Да и не только в потоке — вообще никак не умеют. Я и на IceCast-KH (форк от IceCast2) перешёл только из-за одной его убер-фичи — он умеет отдавать mp3-тэги внутри flv потока (это нужно для отображения исполняемого трека при онлайн воспроизведении на сайте через флэш-плеер). И теперь пришло время закрыть последний вопрос — отдачу обложек проигрываемых треков — и успокоиться. Поскольку готовых решений не нашлось, я не придумал ничего лучше, чем написать свой сервер обложек для .mp3 файлов. Как? Добро пожаловать под кат.
Читать дальше →

Используем PubNub: эмоциональный говорящий чат своими руками

Время на прочтение7 мин
Охват и читатели10K
image

На удивление, в русскоязычном сегменте интернета (и на Хабре в том числе) до сих пор крайне мало информации о PubNub. Между тем, основанный в 2010-м году калифорнийский стартап успел за последние семь лет вырасти в то, что сама компания называет Global Data Stream Network (DSN), а по факту – IaaS-решение, направленное на удовлетворение нужд в области передачи сообщений в реальном времени. Наша компания – Distillery – является одним из на данный момент четырех development-партнеров PubNub, но сказано это не пустого бахвальства ради, а чтобы поделиться с сообществом вариантом использования PubNub на примере demo-проекта, который требовалось создать для получение оного статуса.

Те, кому не терпится посмотреть на код (C# + JavaScript), могут сразу пройти в репозиторий на GitHub. Тех же, кому интересно, что умеет PubNub, и как это работает, прошу под кат.
Читать дальше →

FrontFest ❄️ Из Сибири с любовью

Время на прочтение3 мин
Охват и читатели3K


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

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

От мыслей к делу: 18 ноября мы проводим фронтенд-конференцию FrontFest в Москве. 30 докладов в трёх потоках, квартирники (особый формат дискуссионной панели) и воркшопы.

Любовь, принципы и программа

Ускоряем разработку с помощью интерактивных блоксхем

Время на прочтение4 мин
Охват и читатели18K
С тех пор как я перешел к работе над крупными, комплексными проектами, я продолжаю утверждаться в том что есть два типа программистов – назовем их логики и визуалы.

  • Логики – это программисты с классическим флёром. Чтобы познакомиться с новой технологией они идут и читают документацию. Четкость кода – повышенная, ни шага влево, ни шага вправо. От забора и до обеда. Непритязательность к удобству работы с кодом пугает – кажется, что они могут работать и с минифицированным кодом, пользуясь одной только функцией поиска.
  • Визуалы – это люди, подходящие к коду более творчески, абстрактно. Чтобы изучить технологию они идут в youtube и смотрят видео про дельфинов уроки. В коде им важно разделение на осязаемые блоки, отсутствие простыней на 1000+ строк, возможность реализовать по-новому. Выполняя новую задачу они будут пристреливаться и искать свой вариант решения вместо поисков уже имеющегося на просторах интернета.

Речь в этой статье пойдет об инструменте разработки, без которого я, как представитель второго типа, уже не мыслю разработку проектов размером больше 250 строк и который, я уверен, будет полезен нашим коллегам из классического типа – он сделан в сотрудничестве с одним из вас – восходящей звездой мира программирования Степаном! Итак!
Читать дальше →

DI для полностью переиспользуемых JSX-компонентов

Время на прочтение11 мин
Охват и читатели10K

Dependency inception


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


DI как основа для построения фреймворка, применительно к вебу, довольно молодой подход. Что бы тут было понятней о чем идет речь, начну c привычных для react-разработчиков вещей.

Читать дальше →

HR-робот обзванивает тысячи людей одновременно: рассказываем, как

Время на прочтение5 мин
Охват и читатели18K
Хабр, привет. Период отпусков закончился, так что вливаемся в работу. Мы работаем и пишем, вы — читаете и тоже работаете (надеемся, и с нашей помощью тоже). Сегодня хотим поделиться еще одним кейсом – расскажем о нашем сотрудничестве с Роботом Верой. Эта компания помогает подбирать персонал для тех, кому нужны новые кадры. Частичная (и эффективная) автоматизация процесса рекрутинга не отменяет того, что нужно много звонить. Здесь на помощь Вере приходим мы – на Voximplant компания автоматизирует телефонный дозвон кандидатам.

Развертывание кода ES2015+ в продакшн сегодня

Время на прочтение7 мин
Охват и читатели20K
Большинство веб-разработчиков, с которыми я общаюсь сейчас, любят писать JavaScript со всеми новейшими функциями языка — async/await, классами, стрелочными функциями и т.д. Однако, несмотря на то, что все современные браузеры могут исполнять код ES2015+ и изначально поддерживают упомянутый мной функционал, большинство разработчиков по-прежнему транспилируют свой код на ES5 и связывают его с полифиллами, чтобы удовлетворить небольшой процент пользователей, все еще работающих в старых браузерах.

Это отвратительно. В идеальном мире мы не будем развертывать ненужный код.
Читать дальше →

Библиотека быстрого поиска путей на графе

Время на прочтение8 мин
Охват и читатели36K

Привет, Друзья!


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


Пример использования на огромном графе:



Поиграться с демо можно здесь


В библиотеке используется мало-известный вариант A* поиска, который называется NBA*. Это двунаправленный поиск, с расслабленными требованиями к функции-эвристике, и очень агрессивным критерием завершения. Не смотря на свою малоизвестность у алгоритма отличная скорость сходимости к оптимальному решению.


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

Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №281 (18 — 24 сентября 2017)

Время на прочтение4 мин
Охват и читатели17K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Читать дальше →

Скрытый JS-майнинг криптовалюты на сайте: альтернатива рекламе или новая чума

Время на прочтение4 мин
Охват и читатели148K

image
Буквально недавно промелькнула новость про Pirate Bay, который начал тестировать криптомайнер на JavaScript как альтернативу традиционной рекламной модели. Теперь же, судя по всему, нас ждет волна интеграции подобных скриптов в каждый мелкий магазинчик по продаже швейных принадлежностей. Только сегодня наткнулся на аналогичный скрипт, встроенный в код сайта zveruga.net — небольшой сети по продаже товаров для животных.

Читать дальше →

Еще один нюанс JavaScript, о котором все знают, но не все задумываются

Время на прочтение3 мин
Охват и читатели17K
В последнее время вышло много статей о Javascript. Как холиварных, рассказывающих о том, какой он плохой, или какой он хороший, так и полезных рассказывющих о некоторых странных особенностях и разжевывающих «почему так», как например вот эта.
И я решил сделать свой микровклад в эту тему.

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

let a = {
  'myKey': 'myValue'
}
let key = 'constructor'; // comes from outside source
let b = a[key] || 'defaultValue';
expect(b).to.be.equal('defaultValue'); // fails

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

Типичное использование Observable объектов в Angular 4

Время на прочтение5 мин
Охват и читатели79K

Представляю вашему вниманию типичные варианты использования Observable объектов в компонентах и сервисах Angular 4.



Подписка на параметр роутера и мапинг на другой Observable


Задача: При открытии страницы example.com/#/users/42, по userId получить данные пользователя.


Решение: При инициализации компоненты UserDetailsComponent мы подписываемся на параметры роутера. То есть если userId будет меняться — будер срабатывать наша подписка. Используя полученный userId, мы из сервиса userService получаем Observable с данными пользователя.


// UserDetailsComponent

ngOnInit() {
  this.route.params
    .pluck('userId') // получаем userId из параметров
    .switchMap(userId => this.userService.getData(userId))
    .subscribe(user => this.user = user);
}

Читать дальше →

Cоздаём компонент карт Google Maps API с помощью VueJs2

Время на прочтение5 мин
Охват и читатели24K
Google Maps API — это сервис геолокации. С помощью этого сервиса мы можем отобразить карту и места на карте.

В статье я опишу способ создания простого компонента карты с отображением мест (маркеров), который будет сделан на vuejs.

Чтобы создать компонент на основе статьи, нужно самостоятельно подготовить «hello word» приложение на VueJs2 с использованием es6. Итак по порядку:
Читать дальше →

Ближайшие события

Вышла первая версия SignalR для ASP.Net Core 2.0

Время на прочтение7 мин
Охват и читатели23K

Привет, Хабр! 14 сентября было объявлено о выпуске первой версии SignalR для ASP.Net Core, в связи с чем я решился перевести заметку, посвященную даному событию, немного её дополнив. Оригинал заметки доступен в блоге на MSDN.


Что нового?


SignalR для ASP.Net Core является переписанной с нуля версией оригинального SignalR. Новый SignalR проще, более надёжен и легче в применении. Несмотря на эти внутренние изменения, мы старались сделать API библиотеки наиболее близким к предыдущим версиям.

Читать дальше →

ECMAScript 6. Регулярные выражения с поддержкой Unicode

Время на прочтение5 мин
Охват и читатели11K

В ECMAScript 6 представлены два новых флага для регулярных выражений:


  1. y включает режим «липкого» сопоставления.
  2. u включает различные связанные с Unicode опции.

В данной статье объясняется влияние флага u. Эта статья будет Вам полезна, если Вы знакомы с Unicode-проблемами в Javascript.

Читать дальше →

Области видимости и замыкания в JavaScript

Время на прочтение7 мин
Охват и читатели40K
Данная публикация представляет собой перевод материала «JavaScript Scope and Closures» под авторством Zell Liew, размещенного здесь.

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


Начнем с областей видимости


Область видимости


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


Читать дальше →

Safari 11 и WebRTC: подводные камни видеозвонков

Время на прочтение2 мин
Охват и читатели9.9K
Итак, это свершилось. Кроме iPhone 8, который устарел ровно через полчаса после анонса iPhone 10, Apple обновила свой десктопный и мобильный браузер Safari. Среди прочих улучшений — реализация WebRTC (ходят слухи, что частично позаимствованная у Chromium. «Plan B» на это тоже намекает). Что это значит для разработчиков? Можно звонить через браузер как на десктопе, так и на айфонах. Голосом и видео. Я уже писал про обновленные инструменты разработчика в браузере, а сейчас хочу поделиться, как это все работает в релизе. Мы уже обновили SDK Voximplant, проверили, как Safari звонит в Microsoft Edge, и вот что я хочу рассказать…

It's a (focus) Trap

Время на прочтение5 мин
Охват и читатели18K
Люди которые пишут стандарты — очень хитро устроились. Им достаточно написать как должно все хорошо работать, а дальше уже не их проблемы.

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

В описание к dialog role на MDN все написано очень просто:

  • The dialog must be properly labeled
  • Keyboard focus must be managed correctly

Проблема в том, что MDN забыла еще об одном важном пункте, а все остальные забыли про один из сказанных – про то, что модал не должен выпускать фокус из своих рук. Активный элемент надо посадить под замок. Не дать ему сбежать из нашей ловушки.


Это будет настоящий детектив!

Тайминговая атака на Node.js — когда время работает против вас

Время на прочтение5 мин
Охват и читатели10K
Представьте себе сервис (или веб-приложение), который выдаёт вам сообщение вида «пятый символ введённого вами пароля неверный» в ответ на вашу попытку аутентификации. Выглядит абсурдно, не так ли? Предоставляя потенциальному злоумышленнику информацию подобного рода, мы попросту даём ему шанс «сбрутить» (подобрать, методом перебора) пароль от сервиса.

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


Сама по себе «тайминговая атака» или «атака по времени» — это нападение на систему по открытому каналу доступа, когда атакующий пытается скомпрометировать систему с помощью анализа времени, затрачиваемого на исполнение алгоритмов. Каждая операция (особенно математическая, будь то сложение, вычитание, возведение в степень и т.д.) требует определённого времени на исполнение, и это время может различаться в зависимости от входных данных. Располагая точными измерениями времени, которое расходуется на эти операции, злоумышленник может восстановить данные, необходимые для входа в систему.
Читать дальше →

Постъядерный караван в 35 килобайт

Время на прочтение12 мин
Охват и читатели22K
35 килобайт минифицированного кода на обычном JavaScript, семь городов, пустоши, радиоактивные гекконы, съедобные кактусы, встречные караваны и бандиты. Что это? Это небольшая игра, которая запускается в браузере. Ее принципы довольно просты для повторения и в самой примитивной версии ее можно воссоздать, наверное, на любом устройстве, если там есть устройство вывода и генератор случайных чисел. Но сегодня я хочу рассказать, как я реализовал ее для современных браузеров.

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

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

Читать дальше →