Pull to refresh
-5
0

Преобразование Фурье в действии: точное определение частоты сигнала и выделение нот

Reading time 12 min
Views 230K
последняя редакция статьи доступна на сайте makeloft.xyz

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

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

image

Читать дальше →
Total votes 74: ↑72 and ↓2 +70
Comments 52

Производительность анимаций на сайтах

Reading time 14 min
Views 20K

image


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

Total votes 14: ↑14 and ↓0 +14
Comments 3

Продвинутый Three.js: шейдерные материалы и постобработка

Reading time 10 min
Views 23K


В сети довольно много введений в основы работы с Three.js, но можно заметить нехватку материалов по более продвинутым темам. И одна из этих тем – это объединение шейдеров и сцены с трехмерными моделями. В глазах многих начинающих разработчиков это как будто несовместимые вещи из разных миров. Сегодня на простом примере “плазменной сферы” мы посмотрим, что такое ShaderMaterial и с чем его едят, а также что такое EffectComposer и как можно быстро сделать постобработку для отрендеренной сцены.

Total votes 19: ↑18 and ↓1 +17
Comments 2

Малоизвестные возможности JavaScript

Reading time 11 min
Views 54K
JavaScript часто называют самым простым языком для новичков, в программировании на котором сложнее всего достичь мастерства. Автор материала, перевод которого мы публикуем, говорит, что не может не согласиться с этим утверждением. Всё дело в том, что JS — это по-настоящему старый и по-настоящему гибкий язык. Он полон таинственных синтаксических конструкций и устаревших возможностей, всё ещё им поддерживаемых.

image

Сегодня мы поговорим о малоизвестных возможностях JavaScript и о вариантах их практического применения.
Читать дальше →
Total votes 60: ↑51 and ↓9 +42
Comments 42

Руководство по JavaScript, часть 1: первая программа, особенности языка, стандарты

Reading time 8 min
Views 286K
Недавно мы провели опрос, посвящённый целесообразности перевода этого руководства по JavaScript. Как оказалось, около 90% проголосовавших отнеслись к данной идее положительно. Поэтому сегодня публикуем первую часть перевода.



Это руководство, по замыслу автора, рассчитано на тех, кто уже немного знаком JavaScript и хочет привести свои знания в порядок а также узнать о языке что-то новое. Мы решили немного расширить аудиторию этого материала, включить в неё тех, кто совершенно ничего не знает о JS, и начать его с написания нескольких вариантов «Hello, world!».

Часть 1: первая программа, особенности языка, стандарты
Часть 2: стиль кода и структура программ
Часть 3: переменные, типы данных, выражения, объекты
Часть 4: функции
Часть 5: массивы и циклы
Часть 6: исключения, точка с запятой, шаблонные литералы
Часть 7: строгий режим, ключевое слово this, события, модули, математические вычисления
Часть 8: обзор возможностей стандарта ES6
Часть 9: обзор возможностей стандартов ES7, ES8 и ES9

Читать дальше →
Total votes 33: ↑31 and ↓2 +29
Comments 10

Быстрый способ протестировать сайт в разных десктопных браузерах

Reading time 3 min
Views 268K
Всё больше достойных поводов находится у веб-разработчиков для того, чтобы отказаться от полнокровной поддержки IE6 в создаваемых проектах.

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

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

Самый надёжный способ — поднять несколько виртуальных машин, где всё можно будет досконально протестировать (в том числе потаскать границу окна, поскроллить и уж тем более посмотреть, как работает JS). Но ведь часто требуется просто взглянуть на сайт и понять, всё ли с ним в порядке в целом. Либо предоставить такую возможность заказчику.

Классикой жанра для решения поставленной задачи является веб-сервис:

Универсальный, но долгий browsershots.org


Он позволяет получить скриншот не только из конкретного браузера, но и выбрать его версию и ОС, в которой браузер запущен.

Недостаток один — очередь. Скриншотов нужной страницы можно прождать полчаса и даже больше.
Читать дальше →
Total votes 67: ↑55 and ↓12 +43
Comments 54

Анимации в мире состояний

Reading time 16 min
Views 17K
Многие уже научились строить чистые интерфейсы и писать «undo-redo» в несколько строчек. Но как быть с анимациями? Часто их обходят стороной, и они не всегда вписываются в подход (state) ↦ DOM. Есть отличные решения вроде React Motion, но что если вам нужно делать сложные анимации или работать с Canvas, используя физический движок?

В нашем тексте рассказывается, как работать с анимациям в React-приложениях, и сравнивается несколько подходов (D3, React-Motion, «грязные компоненты»). А также о том, как «запускать» анимации в Redux-приложениях. Материал основан на расшифровке доклада Алексея Тактарова с нашей декабрьской конференции HolyJS 2017 Moscow. Прилагаем заодно видеозапись этого доклада:


Осторожно, трафик: под катом много картинок и гифок (сами понимаете, материал про анимации).
Total votes 35: ↑35 and ↓0 +35
Comments 1

πfs — революционная файловая система без хранения данных­

Reading time 2 min
Views 176K

Что это?


πfs это революционная файловая система, которая вместо того, чтобы тратить место на вашем жестком диске, хранит все данные в π. Вам никогда больше не придется заботится о свободном месте! Вам говорили, что 100% сжатие невозможно? Да вот же оно!

Как собрать?


πfs собирается элементарно:
./configure
make


Да и использовать его не сложнее:
πfs -o mdd=<metadata directory> <mountpoint>

Где metadata directory — каталог с метаданными (названия файлов, смещение в π), а mountpoint ­— каталог монтирования.

Что же π делает с моими данными?


π — одна из самых важных констант математики, и у нее есть куча интересных свойств (о которых можно прочесть в статье на википедии)
Одним из таких свойств числа π предположительно является нормальность, что означает, что все его числа распределяются равномерно, при условии, что это дизъюнктивная последовательность, т.е. все конечные числовые последовательности находятся внутри него. Если мы рассмотрим число π по основанию 16 (HEX), то это предположение верно. Первая запись об этом была в 2001 году.
Ну а если так, то зачем нам хранить все эти эксабайты данных на винчестерах, если мы можем найти их в π?
Читать дальше →
Total votes 395: ↑300 and ↓95 +205
Comments 230

Node.js + face-recognition.js: простое и надёжное распознавание лиц с помощью глубокого обучения

Reading time 5 min
Views 26K


Перевод статьи Node.js + face-recognition.js: Simple and Robust Face Recognition using Deep Learning.

В этой статье мы расскажем, как реализовать надёжную систему распознавания лиц с использованием face-recognition.js. Мы искали подходящую Node.js-библиотеку, которая умела бы аккуратно распознавать лица, но ничего не нашли. Пришлось писать самостоятельно!

В этом npm-пакете используется библиотека dlib, предоставляющая Node.js-биндинги для очень хорошо зарекомендовавших себя инструментов распознавания внутри этой библиотеки. Dlib использует методы глубокого обучения и поставляется с уже обученными моделями, которые продемонстрировали точность распознавания на уровне 99,38% при прогоне бенчмарка LFW.
Total votes 24: ↑24 and ↓0 +24
Comments 5

Жизнь разработчика (в картинках)

Reading time 1 min
Views 65K
Взято отсюда специально для хабра. Возможно, в некоторых из ситуаций вы узнаете себя.

Когда я показываю босу, что окончательно пофиксил баг



Когда проджект-менеджер входит в офис



Читать дальше →
Total votes 884: ↑700 and ↓184 +516
Comments 132

Внедряем безопасность в процесс разработки крупного проекта

Reading time 21 min
Views 21K



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

Читать дальше →
Total votes 46: ↑43 and ↓3 +40
Comments 6

Обзор наушников Bluedio: разрыв шаблона от создателей Beats

Reading time 15 min
Views 106K
Принято считать, что разработчики смартфонов и прочей мобильной электроники (планшетов, ноутбуков, смарт-часов и пр.) наживаются на бедных потребителях. Видели новости с заголовком вроде «айфон нам продают за 500 баксов, а цена его комплектующих всего 250»? Я как раз об этом. Однако Apple со своими смартфонами – это ещё относительно честный производитель, который делает минимальную наценку. Неужели бывает хуже? Бывает. Пальму первенства в области развода покупателей удерживают – тарам-пам-там – производители наушников!

Всё дело в том, что производство наушников – бизнес крайне высокомаржинальный. Если не считать профессиональные аудиофильские модели ценой в пару тысяч долларов, где действительно применяются уникальные компоненты (вроде моделей STAX или Astell&Kern), подход к созданию «ушей» у всех производителей примерно такой. Берём старую начинку, слегка подкручиваем звучание (ну чтобы новая модель хотя бы немного отличалась от старой), чуток изменяем дизайн (с той же целью), продаём. Всё! Учитывая, что каких-либо реально дорогостоящих компонентов в массовых серийно выпускающихся наушниках нет, а на разработку «c нуля» тратиться не приходится, стоимость производства (cost of materials) одного флагманского экземпляра практически любого бренда редко превышает 50, ну максимум 70 долларов. Откуда же появляются модели за 500 баксов и дороже? Оттуда и появляются – потребителю впаривают не столько технологии и звучание, сколько бренд. Давайте-ка разберёмся в ситуации поглубже и параллельно обозреем линейку «антипафосных» наушников не так давно появившегося на российском рынке бренда Bluedio. Наушники этого производителя ориентированы как раз на тех, кто не желает выбрасывать даже лишний рубль (пусть даже может себе это позволить) и при этом хочет получить реально клёвые, хорошо звучащие «уши». Без наценки за «пафос».


Читать дальше →
Total votes 41: ↑31 and ↓10 +21
Comments 109

Математика в JavaScript

Reading time 20 min
Views 189K

Введение


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

От переводчиков


Всем привет, с вами Максим Иванов и Дмитрий Сергиенков, и сегодня мы решили, что мы не будем говорить о модных и полезных штуках типа ReactJS, Angular, TypeScript и других. Сегодня мы уделим внимание математике в JavaScript. Если вам нравится математика, вы можете заниматься ей всё свободное время, но если вашей целью являются не научные изыскания, а работа программистом, математика вряд ли станет лучшим объектом для изучения.
Читать дальше →
Total votes 61: ↑55 and ↓6 +49
Comments 20

Information

Rating
Does not participate
Registered
Activity