Articles / Bookmarks / Profile of raven / Habr

How to become an author

User

ProfileArticlesPostsNewsComments29

aio350 Oct 1 2021 at 09:33

JavaScript: разрабатываем приложение для записи звука

12 min

14K

Timeweb Cloud corporate blogJavaScript*Website development*Programming*

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

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

Функционал нашего приложения будет следующим:

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

Основная технология, которую мы будем использовать, это MediaDevices. Данная технология входит в состав глобального объекта Navigator. Основным методом, предоставляемым указанным интерфейсом является getUserMedia(). Запись данных (в простых случаях вроде нашего) выполняется с помощью интерфейса MediaRecorder.

Интерфейс MediaDevices на сегодняшний день поддерживается всеми современными браузерами.

Для небольшой стилизации нашего приложения мы будем использовать Sass.

Выглядеть приложение примерно так:

Исходный код приложения.

Основным источником вдохновения для меня послужила эта замечательная статья.

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

Вы готовы? Тогда вперед!

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

+18

nikolayshabalin Jun 23 2021 at 05:38

Что можно положить в тег <head>

14 min

35K

HTML Academy corporate blogWebsite development*Semantics*HTML*

Tutorial

Translation

Рекомендуемый минимум

Ниже приведены основные элементы для любого веб-документа (веб-сайта/приложения):

meta charset — определяет кодировку веб-сайта, стандартом является utf-8.

meta name="viewport" — настройки viewport, связанные с мобильной отзывчивостью

width=device-width — физическая ширина устройства (отлично подходит для мобильных устройств!)

initial-scale=1 — начальный масштаб, 1 означает отсутствие масштабирования

Элементы

Допустимые элементы <head> включают meta, link, title, style, script, noscript и base.

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

Читать далее

+35

ru_vds Dec 26 2020 at 09:05

CSS: о выводе коротких и длинных текстов

8 min

49K

RUVDS.com corporate blogCSS*Website development*

Translation

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

Есть много ситуаций, в которых изменение некоего текстового фрагмента путём добавления или удаления всего одного слова способно заметно изменить внешний вид страницы, или, что ещё хуже «поломать» макет и сделать невозможной нормальной работу с сайтом. Когда я только начинал изучать CSS, я недооценивал последствия, к которым может привести добавление единственного слова в некий элемент или удаление из него всего одного слова. Здесь я хочу поделиться различными способами обработки текстов разной длины средствами CSS.

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

+30

MagisterLudi Dec 14 2020 at 19:18

Бесполезный паттерн в полярных координатах, открывающий полезное свойство простых чисел

2 min

21K

Popular scienceMathematics*Entertaining tasksData visualization*

Началось всё с обсуждение на математическом StackOverflow: Meaning of Rays in Polar Plot of Prime Numbers

«Недавно я начал экспериментировать с gnuplot и быстро сделал интересное открытие. Я построил все простые числа ниже 1 миллиона в полярных координатах, так что для каждого простого p (r, θ) = (p, p). Ничего особенного не ожидал, просто пробовал. Результаты впечатляют».

Если посмотреть на простые числа ниже 30000, можно увидеть спиральный узор.

+78

aio350 Nov 24 2020 at 07:26

Детальный обзор Well-known Symbols

12 min

8.8K

JavaScript*Programming*Website development*

Translation

Доброго времени суток, друзья!

Символ (Symbol) — это примитивный тип данных, представленный в ECMAScript2015 (ES6), позволяющий создавать уникальные идентификаторы: const uniqueKey = Symbol('SymbolName').

Вы можете использовать символы в качестве ключей для свойств объектов. Символы, которые JavaScript обрабатывает особым образом, называются хорошо известными символами (Well-known Symbols). Эти символы используются встроенными алгоритмами JavaScript. Например, Symbol.iterator используется для перебора элементов массивов, строк. Его также можно использовать для определения собственных функций-итераторов.

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

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

В данной статье речь пойдет о хорошо известных символах с примерами их использования.

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

+24

istishev Nov 2 2020 at 15:56

Как выбрать HDMI-кабель? — Разбор

5 min

152K

Droider.Ru corporate blogElectronics for beginnersWorking with video*GadgetsVideo equipment

Вы когда-нибудь задавались вопросом что за странная ситуация с ценой на HDMI-кабели? На Яндекс.Маркете за трехметровый HDMI-кабель цена стартует с 131 рубля, а заканчивается проводом почти за полмиллиона! Понятно, что кабель за пол ляма — это какая-то единичная дичь.

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

Так всё же. Влияет ли цена кабеля на качество изображения? Какие бывают стандарты HDMI кабелей? И какой HDMI-провод выбрать для 4K телевизора и консолей нового поколения?

Сегодня вместе с вами разбираемся в HDMI кабелях.

Давайте сразу расставим точки над i. HDMI — это цифровой интерфейс High Definition Multimedia Interface.

+58

xnim Sep 3 2020 at 10:52

Оптимизация производительности фронтенда. Часть 2. Event loop, layout, paint, composite

11 min

65K

CSS*Client optimization*JavaScript*Website development*

Tutorial

Ночь. Стук в дверь. Открыть. Стоят двое. "Верите ли вы в Event loop, нашу главную браузерную цепочку?" Вздохнуть. Закрыть дверь. Лечь досыпать. До начала рабочего дня еще 4 часа. А там уже ивент лупы, лейауты и прочая радость…

В первой части мы говорили о первой загрузке и работе с ресурсами. Сегодня я расскажу о второй части оптимизации производительности фронтенда. О том, что происходит с нашей страницей, когда она загружена, на что уходит процессорное время и что с этим делать. Ключевые слова: event loop, paint \ repaint, layout \ reflow, composite.

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

+20

EddyLan Aug 5 2019 at 11:07

Телега для датасайентиста

15 min

55K

Open Data Science corporate blogPython*Machine learning*Configuring Linux*System administration*

Tutorial

How to deploy Python Telegram bot using Webhooks on Google Cloud Platform

Вместо предисловия

— Напиши телеграм-бота. Сейчас даже школьники пишут, — сказала она.
— А почему бы и нет, — подумал я тогда ( — Ну, ну, — сказал бы я сейчас).

Мы сидели в Бине и за чашкой кофе обсуждали возможности тестирования идей с моделями искусственного интеллекта на близком и не очень круге друзей. Лена, моя бывшая коллега, и во всех отношениях не блондинка, только что закончившая магистратуру, рассуждала так. Создав бота, можно сэкономить силы и время на интерфейсе, сосредоточившись на ядре с машинным обучением. Согласитесь, что устоять против такой логики “спортсменки, комсомолки и просто красавицы” в то прекрасное воскресное утро было невозможно. Решено. Телеграм-бот, значит телеграм-бот.

Первым делом я залез в гугл и нашел большое число ссылок “как сделать бот за 30 минут”. Это меня настолько воодушевило, что дальше названий я не пошел и занялся созданием ядра. В самом первом приближении мне предстояло написать систему обработки поисковых запросов с использованием NLP (natural language processing). Написание ядра заняло некоторое, вполне разумное, время (все же опыт кока-колой не пропить). И через несколько дней я был готов к тому, чтобы за пару часов обернуть первую тестовую версию ядра в пару другую команд send-receive, запустив все это в Телеграме на благо моим друзьям. Но не тут-то было.

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

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

+41

Advantech Jul 19 2019 at 07:01

Безвентиляторные производительные компьютеры MIC-7000

5 min

21K

Advantech IIoT corporate blogComputer hardware

Компьютеры серии MIC-7000 — это компактные и одновременно высокопроизводительные промышленные компьютеры с полностью пассивным охлаждением, при этом оснащенные полноценными процессорами Intel восьмого поколения и современными чипсетами. Отличительной чертой компьютеров MIC-7000 является массивный радиатор, занимающий всю верхнюю часть корпуса и обеспечивающий рассеивание тепла без использования вентиляционных решеток и вентиляторов.

Для решения разнообразных ресурсоемких задач, конфигурация компьютеров может расширяться. Фирменные модули расширения i-Module позволяют установить любые платы PCI-e x16, в том числе полноразмерные GPU, для построения систем машинного обучения и запуска нейронных сетей.

MIC-7000 применяются в беспилотных автомобилях в качестве центрального сервера обработки данных, одновременно обрабатывая видео высокого разрешения с помощью плат видеозахвата, выполняя вычисления нейронной сети, и управляя периферией с помощью портов I/O и промышленных интерфейсов.

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

+17

HotWaterMusic Jul 1 2019 at 17:48

Google открывает исходный код парсера robots.txt

2 min

33K

IT Standards*Open source*Search engines*

Сегодня компания Google анонсировала черновик RFC стандарта Robots Exclusion Protocol (REP), попутно сделав доступным свой парсер файла robots.txt под лицензией Apache License 2.0. До сегодняшнего дня какого-либо официального стандарта для Robots Exclusion Protocol (REP) и robots.txt не существовало (ближайшим к нему было вот это), что позволяло разработчикам и пользователям интерпретировать его по-своему. Инициатива компании направлена на то, чтобы уменьшить различия между реализациями.

Черновик нового стандарта можно просмотреть на сайте IETF, а репозиторий доступен на Github по ссылке https://github.com/google/robotstxt.

Парсер представляет собой исходный код, который Google используют в составе своих продакшн-систем (за исключением мелких правок — вроде убранных заголовочных файлов, используемых только внутри компании) — парсинг файлов robots.txt осуществляется именно так, как это делает Googlebot (в том числе то, как он обращается с Юникод-символами в паттернах). Парсер написан на С++ и по сути состоит из двух файлов — вам потребуется компилятор, совместимый с C++11, хотя код библиотеки восходит к 90-ым, и вы встретите в ней «сырые» указатели и strbrk. Для того, чтобы его собрать, рекомендуется использовать Bazel (поддержка CMake планируется в ближайшем будущем).

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

+46

derprimus May 28 2019 at 16:18

Советские мечты о будущем

9 min

94K

Madrobots corporate blogScience fiction

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

+134

MarcusAurelius May 22 2019 at 16:29

Асинхронное программирование (полный курс)

2 min

104K

JavaScript*Node.JS*Programming*Website development*Studying in IT

Tutorial

Асинхронное программирование за последнее время стало не менее развитым направлением, чем классическое параллельное программирование, а в мире JavaScript, как в браузерах, так и в Node.js, понимание его приемов заняло одно из центральных мест в формировании мировоззрения разработчиков. Предлагаю вашему вниманию целостный и наиболее полный курс с объяснением всех широко распространенных методов асинхронного программирования, адаптеров между ними и вспомогательных проемов. Сейчас он состоит из 23 лекций, 3 докладов и 28 репозиториев с множеством примеров кода на github. Всего около 17 часов видео: ссылка на плейлист.

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

+48

sergeevii123 May 16 2019 at 12:59

Как мы боремся с копированием контента, или первая adversarial attack в проде

7 min

59K

AvitoTech corporate blogAlgorithms*Machine learning*Image processing*Programming*

Привет.

Вы знали, что платформы для размещения объявлений часто копируют контент у конкурентов, чтобы увеличить количество объявлений у себя? Они делают это так: обзванивают продавцов и предлагают им разместиться на своей платформе. А иногда и вовсе копируют объявления без разрешения пользователей. Авито — популярная площадка, и мы часто сталкиваемся с такой недобросовестной конкуренцией. О том, как мы боремся с этим явлением, читайте под катом.

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

+204

AloneCoder May 10 2019 at 17:42

HTTP-заголовки для ответственного разработчика

15 min

106K

VK corporate blogHTML*High performance*Client optimization*Website development*

Translation

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

Разработчики соединяют людей.
Разработчики помогают людям.
Разработчики дают людям возможности.

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

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

+88

m1rko Apr 4 2019 at 16:03

Почему я отказался от Disqus и вам тоже пора

2 min

53K

Open source*Website development*

Translation

Замена Disqus на Commento снизила размер страниц в 10 раз

Когда я завёл блог, то установил Disqus для комментариев. Это был естественный выбор: сайты по всему интернету ставили Disqus, его легко настроить, и есть бесплатный вариант использования. Я спокойно интегрировал движок комментариев и двинулся дальше.

Но вот в чём дело: я всегда знал, что Disqus немного раздувает страницы. Я ведь писал о веб-производительности и обычно старался оптимизировать страницы. Но я просто предположил, что Disqus прибавляет немного лишних килобайт. Логика: если он сильно раздувает страницы, все бы уже давно отказались от него. Очевидно, Disqus старается не увеличивать трафик, верно?

Я ошибался.

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

+144

GlobalSign_admin Mar 26 2019 at 06:34

Ловушка (тарпит) для входящих SSH-соединений

4 min

39K

GlobalSign corporate blogSoftwareSystem administration*Information Security*Python*

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

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

Чаще всего тарпиты применяют для защиты. Технику впервые разработали для защиты от компьютерных червей. А сейчас её можно использовать, чтобы испортить жизнь спамерам и исследователям, которые занимаются широким сканированием всех IP-адресов подряд (примеры на Хабре: Австрия, Украина).

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

+82

TIMOHIUS Mar 25 2019 at 10:33

Консольный плеер cmus для Linux

2 min

27K

Доброго времени суток.

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

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

+26

m1rko Mar 24 2019 at 13:46

Как я пишу конспекты по математике на LaTeX в Vim

9 min

132K

LaTeX*VIM*Mathematics*

Tutorial

Translation

Некоторое время назад на Quora я отвечал на вопрос: как успевать записывать за лектором конспект по математике на LaTeX. Там я объяснил свой рабочий процесс по конспектированию в LaTeX с помощью Vim и Inkscape (для рисунков). Но с тех пор многое изменилось, так что я хочу опубликовать несколько постов в блоге с описанием нового процесса. Это первая из статей.

Я начал использовать LaTeX для конспектирования во втором семестре курса математики, и с тех пор написал более 1700 страниц. Вот несколько примеров, как выглядит конспект:

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

+216

Kyrie1965 Mar 13 2019 at 13:55

Следим за качественными цифровыми релизами фильмов без суеты

8 min

90K

Decentralized networks*

Tutorial

В большинстве случаев качественные нелегальные раздачи какого-то фильма начинают появляться только после цифрового релиза (не путайте цифровые релизы с премьерами в кинотеатрах), т.е. в VOD-сервисах или на Blu-ray. Под качественными подразумеваются BDRip 1080p, BDRemux и UHD BDRemux, самый минимум — это WEB-DL 1080p (чаще всего из iTunes), с русскоязычными звуковыми дорожками от лицензионного издания Blu-ray или из iTunes. А до этого с раздачами фильма творится чехарда с комбинацией мха и опилок, которая может ввести в заблуждение зрителя, желающего смотреть новинки с хорошим качеством.

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

+75

rssdev10 Feb 10 2019 at 08:01

Julia. Генераторы отчётов и документации

13 min

11K

Julia*Data visualization*Programming*

Tutorial

Одной из актуальных проблем во все времена, является проблема подготовки отчётов. Поскольку Julia — язык, пользователи которого непосредственно связаны с задачами анализа данных, подготовки статей и красивых презентаций с результатами расчётов и отчётов, то эту тему просто нельзя обойти мимо.

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

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

+20

2

3 4 ...