• Сила PWA: Система видеонаблюдения с нейросетью в 300 строчек JS-кода

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

      Веб-браузеры медленно но верно реализуют большинство функций операционной системы, и остается все меньше причин разрабатывать нативное приложение, если можно написать веб-версию (PWA). Кроссплатформенность, богатое API, высокая скорость разработки на TS/JS, и даже производительность движка V8 — все идет в плюс. Браузеры уже давно умеют работать с видеопотоком и запускать нейронные сети, то есть мы имеем все компоненты для создания системы видеонаблюдения с распознаванием объектов. Вдохновленный этой статьей, я решил довести демо-пример до уровня практического применения, чем и хочу поделиться.

      Приложение записывает видео с камеры, периодически отправляя кадры на распознавание в COCO-SSD, и если обнаружен человек — фрагменты видеозаписи порциями по 7 секунд начинают отправляться на указанный емейл через Gmail-API. Как и во взрослых системах — ведется предзапись, то есть мы сохраняем один фрагмент до момента детекции, все фрагменты с детекцией, и один после. Если интернет недоступен, или возникает ошибка при отправке — видеозаписи сохраняются в локальной папке Downloads. Использование емейла позволяет обойтись без серверной части, мгновенно оповестить хозяина, а если злоумышленник завладел устройством и взломал все пароли — он не сможет удалить почту у получателя. Из минусов — перерасход трафика за счет Base64 (хотя для одной камеры вполне хватает), и необходимость собирать итоговый видеофайл из множества емейлов.

      Работающее демо здесь.

      Проблемы возникли следующие:
      Читать дальше →
    • Как мы в Спортмастере выбирали систему кеширования. Часть 1

        Привет! Меня зовут Алексей Пьянков, я разработчик в компании Спортмастер. В этом посте я рассказал, как начиналась работа над сайтом Спортмастер в 2012 году, какие инициативы удалось «протолкнуть» и наоборот, какие грабли мы собрали.

        Сегодня я хочу поделиться мыслями, которые следуют за другим сюжетом – выбор системы кеширования для java-бэкенда в админке сайта. Этот сюжет имеет особое значение для меня – хотя история разворачивалась всего 2 месяца, но эти 60 дней мы работали по 12-16 часов и без единого выходного. Никогда раньше не думал и не представлял, что можно так много работать.

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


        Читать дальше →
      • Интеграция проекта VueJS+TS с SonarQube

        • Tutorial

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



        В данной статье речь пойдет, как писал выше, о платформе SonarQube. Немного теории — что это такое вообще, для тех, кто слышит о ней впервые:


        SonarQube (бывший Sonar) — платформа с открытым исходным кодом для непрерывного анализа (англ. continuous inspection) и измерения качества кода.
        Поддерживает анализ кода и поиск ошибок согласно правилам стандартов программирования MISRA C, MISRA C++, MITRE/CWE и CERT Secure Coding Standards. А также умеет распознавать ошибки из списков OWASP Топ-10 и CWE/SANS Топ-25 ошибок программирования.
        Несмотря на то, что платформа использует различные готовые инструменты, SonarQube сводит результаты к единой информационной панели (англ. dashboard), ведя историю прогонов и позволяя тем самым увидеть общую тенденцию изменения качества программного обеспечения в ходе разработки.

        Более подробно можно узнать на официальном сайте


        Поддерживается большое количество языков программирования. Судя по информации из ссылки выше — это более 25 языков. Для поддержки конкретного языка необходимо установить соответствующий плагин. В community-версию входит плагин для работы с Javascript (в том числе typesсript), хотя в wiki написано обратное. За Javascript отвечает плагин SonarJS, за Typescript SonarTS соответственно.


        Для отправки информации о покрытии используется официальный клиент sonarqube-scanner, который, используя настройки из config-файла, отправляет эти данные на сервер SonarQube для дальнейшей консолидации и агрегирования.


        Для Javascript есть npm-обертка. Итак, начинаем пошаговое внедрение SonarQube в Vue-проект, использующий Typescript.

        Читать дальше →
      • Борьба с утечками памяти в веб-приложениях

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


        Читать дальше →
        • +32
        • 9.3k
        • 2
      • 7 трюков с Rest и Spread операторами при работе c JS объектами

        Привет, Хабр! Представляю вашему вниманию перевод статьи «7 Tricks with Resting and Spreading JavaScript Objects» автора Joel Thoms.

        Всем привет, на днях коллега по работе скинул мне ссылку на статью на английском языке в которой перечисляются разные методы работы с rest и spread операторами. Она оказалась мне полезна и я решил её перевести. Итак, начнем.

        image
        В этой статье вы найдете 7 наименее известных трюков использования rest и spread операторов
      • 10 React-компонентов на все случаи жизни

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



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

        Материал, перевод которого мы сегодня публикуем, посвящён рассказу о 10 React-компонентах.
        Читать дальше →
      • Как немец-хохотун лук (тот, что со стрелами) прокачал

          Увидел тут с утреца статью про пушку Гаусса и сразу вспомнил один замечательный канал на ютубе, где, вовсе не сумрачный, а очень даже жизнерадостный немецкий гений взял и сделал нечто абсолютно новое в такой (казалось бы) абсолютно завершённой области как лучное дело. Простейшее устройство одновременно:

          1. Является магазином (то есть, даёт серьёзный плюс к скорости стрельбы),
          2. Значительно упрощает прицеливание,
          3. Да ещё и в два раза снижает усилие, нужное для натяжения лука!

          Впечатляет? И это вы ещё его смех не слышали! (вот здесь его компиляция на полторы минуты, лучший способ начать понедельник по моему скромному мнению). Ну а под катом краткое пояснение принципов работы, если лень смотреть видео. Как говорит сам Йорг LET ME SHOW ITS FEATURES:


          Читать дальше →
        • Исчерпывающий путеводитель по тегу iframe

          • Translation
          • Tutorial
          iframe tag

          Элемент iframe (сокращение от встроенного фрейма), вероятно, является одним из старейших тегов HTML и был представлен ещё в далеком 1997 году в HTML 4.01 Microsoft Internet Explorer.


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


          Чтобы помочь вам сформировать собственное мнение и отточить свои навыки разработчика, мы расскажем обо всем, что вам нужно знать об этом противоречивом теге.


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


          Читать дальше →
          • +27
          • 14.9k
          • 9
        • Работаем с двумерной графикой в JavaScript

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

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

          Хотите узнать, как эти алгоритмы реализуются в JS?



          Примеры можно посмотреть здесь.

          Исходный код находится здесь.
          Читать дальше →
          • +18
          • 7.8k
          • 8
        • Встречайте чувашский язык в Яндекс.Переводчике: как мы решаем главную проблему машинного перевода

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


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




            Читать дальше →
          • 70 вопросов по JavaScript для подготовки к собеседованию

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

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

            В вопросах, которые показались мне сложнее прочих, приведены ссылки на дополнительную литературу.

            Буду признателен за развернутые комментарии. Все замечания будут учтены при редактировании статьи.

            Итак, поехали.
            Читать дальше →
          • Node.js, Tor, Puppeteer и Cheerio: анонимный веб-скрапинг

            • Translation
            Веб-скрапинг — это метод сбора данных с веб-сайтов. Этот термин обычно используется в применении к автоматизированному сбору данных. Сегодня мы поговорим о том, как собирать данные с сайтов анонимно. Причина, по которой некто может захотеть анонимности в деле веб-скрапинга, заключается в том, что многие веб-серверы применяют определённые правила к подключениям с IP-адресов, с которых за некий отрезок времени выполнено какое-то количество запросов. Здесь мы будем пользоваться следующими инструментами:

            • Puppeteer — для доступа к веб-страницам.
            • Cheerio — для парсинга HTML-кода.
            • Tor — для выполнения каждого запроса с различного IP-адреса.

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


            Читать дальше →
          • Schema.org своими руками: настраиваем микроразметку без программиста

              Schema.org своими руками: настраиваем микроразметку без программиста

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


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

              Читать дальше
            • Чешские программисты бесплатно написали сайт стоимостью 16 миллионов евро? Правда?

                В конце января 2020 г. чешские программисты на безвозмездной основе за два дня разработали портал продажи билетов на право пользования скоростными дорожными магистралями Чехии. На разработку этого портала изначально был выделен 401 миллион чешских крон (около 16 миллионов евро) министерством транспорта Чехии, но энтузиазм сообщества позволил сохранить колоссальные бюджетные средства.

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

                Такое изложение событий было приведено в пересказе издания CNews или, по крайней мере, таким образом было интерпретировано читателями.

                Эта потрясающая история захватила умы всего бывшего СССР, многократно разойдясь по соцсетям. Однако, к сожалению, в оригинальной подаче CNews — вероятно, неумышленно — был опущен и искажён ряд ключевых деталей, вследствие чего исходная ситуация была весьма своеобразно искажена.

                Целью данного поста является устранение этого пробела.
                Читать дальше →
              • У меня нулевая текучка

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

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

                  В сумме я работал руководителем лет 7-10 (точно не знаю, какие периоды сюда включать), но нулевая текучка сохранилась. Никто никогда от меня не уходил, никого никогда я не выгонял. Только набирал.

                  Нулевая текучка, как показатель, никогда не была моей самоцелью. Но я стараюсь делать так, чтобы вложенные в людей усилия не пропадали даром. Сейчас расскажу примерно, как я руковожу так, что люди не уходят – вдруг что полезное для себя найдете. На полноту раскрытия темы не претендую, т.к. основываюсь только на личном опыте. Вполне возможно, что я всё делаю неправильно.
                  Читать дальше →
                • Зарплаты в ИТ во втором полугодии 2019 года: по данным калькулятора Хабр Карьеры

                    image

                    Наш отчёт по зарплатам в ИТ за второе полугодие 2019 года построен на данных из калькулятора зарплат Хабр Карьеры, в котором за этот период было собрано более 7000 зарплат.

                    В отчёте мы посмотрим на текущие зарплаты по основным ИТ-специализациям, а также на их динамику за прошедшее полугодие как в целом по стране, так и отдельно по Москве, Санкт-Петербургу и остальным городам. Как обычно, детальнее изучим специализации разработчиков ПО: посмотрим на их зарплаты в разрезе языков программирования, городов и компаний.
                    Данные, представленные в этом отчёте, а также любые другие, каждый желающий может получить самостоятельно с помощью калькулятора зарплат Хабр Карьеры. Если вам нравится информация, которую мы получаем с помощью калькулятора, и если вы хотите внести свой вклад в формирование более прозрачного рынка труда в ИТ, приглашаем поделиться своей текущей зарплатой, данные о которой мы используем в нашем следующем годовом отчёте.

                    Сервис зарплат запущен на Хабр Карьере в конце 2017 с целью регулярного мониторинга зарплат в ИТ-индустрии. Зарплаты оставляют сами специалисты, мы их собираем и предоставляем всем в открытый доступ в агрегированной и анонимной форме.
                    Читать дальше →
                  • Современный курс по Node.js в 2020

                    • Tutorial


                    Дорогие товарищи инженеры, сообщество Метархия представляет вашему вниманию современный курс по Node.js, который включает глубокий разбор всех возможностей и аспектов платформы. Основной упор делается на то, как создавать надежные высоконагруженные сервера приложений и API без привязки к конкретному фреймворку и даже протоколу, т.е. абстрагировать бизнес-логику в отдельный слой. К лекциям прикреплено множество примеров кода, демонстрирующих гибкую структуру приложений и архитектурные приемы, в том числе работу с СУБД через слой доступа к данным, создание интерактивных приложений на вебсокетах, обеспечение безопасности, Graceful shutdown, межпроцессовое взаимодействие, предотвращение утечек памяти, масштабирование и кластеризацию при помощи процессов и потоков. На текущий момент в курсе 38 лекций (около 35 и ½ часов видео), 37 репозиториев с примерами кода, 4 PDF со слайдами. Перед основной частью курса по Node.js нужно сначала освоить хоть частично курс по асинхронному программированию.

                    Читать дальше →
                  • Как выстроить корпоративную стратегию обучения и развития

                    Всем привет! Я – Анна Хацько, HR-директор Omega-R. Моя работа связана с усилением стратегии обучения и развития в компании, и я хочу поделиться своим опытом и знаниями о том, как управлять профессиональным и карьерным ростом сотрудников таким образом, чтобы поддерживать другие ключевые приоритеты бизнеса.


                    Читать дальше →
                  • Обработка персональных данных для мелкого интернет-магазина

                    Знакомые впечатлились новым штрафом в КоАП в миллион рублей:
                    Статья 13.11. Нарушение законодательства Российской Федерации в области персональных данных
                    8. Невыполнение оператором при сборе персональных данных… обязанности по обеспечению записи, систематизации, накопления, хранения, уточнения… или извлечения персональных данных граждан Российской Федерации с использованием баз данных, находящихся на территории Российской Федерации, — … на юридических лиц (и ИП) — от одного миллиона до шести миллионов рублей.
                    Сервер, на котором сидит их магазин, за границей. Интересуются, что делать, надо ли сильно напрягаться. Сразу оговорюсь, что магазин на самописной системе управления, в которую заложены вещи для соответствия 152-ФЗ «О персональных данных». Из моего текста будет понятно, что придется править другим.

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

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

                      Интро


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


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


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

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