Pull to refresh
1
0
Игорь «InoY» Звягинцев @inoyakaigor

Frontend-developer

Send message

Выключаем компьютер через Wake-on-Lan

Level of difficultyEasy
Reading time6 min
Views28K

Wake-on-Lan (WoL) — технология, которая используется (как и следует из названия) для включения компьютера посредством отправки специального пакета на адрес требуемого хоста. Но что если при помощи WoL хочется ещё и выключать компьютер?
По сути весь дальнейший текст — это ещё один способ превратить буханку хлеба в троллейбус. Но если очень хочется, то почему нет?

Достать хлеб и инструменты
Total votes 47: ↑46 and ↓1+61
Comments54

Как мемоизация влияет на производительность React-приложения

Reading time11 min
Views8.2K

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

Привет, Хабр! Меня зовут Нугзар Гагулия. У меня 10 лет коммерческого опыта в компаниях различного масштаба, в том числе в Яндекс и Альфа-банк. Я выступаю на Google I/O и Google Dev Fest, пишу статьи на Хабре, контрибьючу и менторю. Эта статья написана по мотивам моего доклада для FrontendConf 2022. Чтобы найти и задать вопросы об этой и других статьях, меня легко можно найти по нику NookieGrey в соцсетях и Телеграм. Я с удовольствием на них отвечу.

Читать далее
Total votes 6: ↑6 and ↓0+6
Comments1

Обзор схемотехнических решений BMS для литиевых батарей

Level of difficultyEasy
Reading time17 min
Views30K
Давно ушли те времена, когда для контроля за состоянием аккумуляторной батареи было достаточно стрелочного амперметра. Литиевые аккумуляторы вполне заслуженно обрели популярность в современных автономных устройствах. Они обладают достаточно высокими характеристиками при весьма доступной стоимости, но очень капризны в эксплуатации.

image

В этой статье представлен краткий обзор на специализированные микросхемы мониторинга и защиты для литиевых аккумуляторов. Давайте вместе попробуем разобраться, как максимально эффективно и безопасно использовать эти аккумуляторы в своих устройствах и какие схемы для этого лучше подойдут.
Читать дальше →
Total votes 73: ↑73 and ↓0+73
Comments80

Редактирование и подпись PDF в браузере локально

Reading time3 min
Views7.7K


За последние месяцы появилось несколько полезных инструментов для подписи и редактирования PDF. Опенсорсные веб-приложения работают через браузер, но локально на компьютере клиента, то есть без передачи документов на сервер. Вся «установка» таких приложений сводится к сохранению HTML с сайта и запуску из кэша.

В некоторых случаях эти современные приложения могут составить альтернативу платным нативным программам, таким как Adobe Acrobat Pro и DocuSign.
Читать дальше →
Total votes 12: ↑11 and ↓1+15
Comments1

Утечки памяти, которые не утечки

Level of difficultyMedium
Reading time10 min
Views20K

Что случилось? Авария, ужас-ужас

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

В один прекрасный день боевое сопровождение приходит с ужасной проблемой — память в контейнерах Node.js течёт, сервисы падают с OOM каждый день, все пропало!

Да, картинка действительно удручающая. Всё время, когда есть нагрузка, память в контейнере прирастает и почти не очищается при снятии нагрузки. Все остальные метрики, которые мы собирали были в норме: event loop lag, использование CPU, active request, open handles. Прирастала только используемая память и незначительно увеличивалось время отклика сервиса.

Что-ж, выглядит как классическая утечка, надо искать источник.

Читать далее
Total votes 95: ↑94 and ↓1+106
Comments15

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

Level of difficultyMedium
Reading time18 min
Views6.8K

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

Читать далее
Total votes 14: ↑14 and ↓0+14
Comments5

4k @ 144Hz: DP, HDMI, USB-C Alt-Mode & cables…

Reading time11 min
Views60K

Я недавно сделал себе небольшой апгрейд и у меня появился монитор 4k@144Hz. Разумеется, на 144Hz он не заработал. Потому что нюансы. Мне пришлось в это нырнуть глубже, чем хотелось бы...

Спойлеры: DP, USB-C Alt-mode, Thunderbolt, USB4 3x2, 40Gbps, HDMI.
Оглавление: кабели, протоколы, режимы.

Лыдыбр: Моя старая видеокарта на компьютере сумела завести его на 4k @ 60Hz с помощью Display Port. (Либо 2k @ 144Hz). Это её техническое ограничение, больше она не может. Дальше я попытался воткнуть в монитор ноутбук (все 5 шт, какие нашлись у меня и знакомых) и обнаружил, что всё настолько сложно, что мне потребовалось несколько заходов чтения спецификации, пока я "это завёл". Выписываю свои наблюдения и эксперименты. Актуальность - первая половина 2022 года. Монитор under study - Gigabyte M32U, хотя, в принципе, это не существенно для обсуждаемого вопроса. У монитора разъёмы HDMI, DP, USB-C.

Разбирать проблему я буду слоями. Начём с физики.

Читать далее
Total votes 143: ↑143 and ↓0+143
Comments135

Webpack vs esbuild — уже можно использовать в production?

Level of difficultyMedium
Reading time12 min
Views12K

Периодически я пробую разные инструменты, и если они стабильно покрывают все необходимые сценарии - включаю в свою экосистему для коммерческих проектов. С третьего подхода за последние 3 года esbuild, наконец, приблизился по функционалу к Webpack. В статье привожу проблемы, с которыми я столкнулся при миграции, и пути их решения.

Читать далее
Total votes 24: ↑24 and ↓0+24
Comments26

Снятие с воинского учета. Дистанционно. Пакет документов

Level of difficultyEasy
Reading time6 min
Views46K

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

Если вкратце, то рабочий кейс, это когда: (А) имеется основание для снятия: уже живете зарубежом полгода, либо имеется иностранный ВНЖ, (B) грамотно составлено заявление на снятие с учета и подписано вашей подписью, (C) в военкомат идет ваш представитель по доверенности, которая оформлена у российского нотариуса или в зарубежном консульстве РФ.

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

Читать далее
Total votes 72: ↑62 and ↓10+72
Comments83

Явное управление ресурсами: пробуем новую фичу JavaScript и TypeScript

Level of difficultyHard
Reading time13 min
Views17K

Одной из самых интересных грядущих новинок JavaScript и TypeScript для меня является явное управление ресурсами. Новый синтаксис using foobar = … реализует идиому RAII, позволяя писать намного менее многословный код, управляющий какими-либо ресурсами.

В этой статье я хочу на примерах разобрать эту фичу — в том виде, в котором она сейчас доступна в TypeScript 5.2.0-beta с полифиллом disposablestack. Я рассмотрю синхронные и асинхронные ресурсы, DisposableStack/AsyncDisposableStack, а также приведу пример неочевидного бага, в который попался я сам. По пути я также коснусь нескольких других нововведений Node.js, про которые, возможно, ещё знают не все. Весь код доступен в репозитории.
Читать дальше →
Total votes 65: ↑65 and ↓0+65
Comments6

Как упростить импорт JavaScript модулей с помощью Node.js Subpath Imports

Level of difficultyEasy
Reading time14 min
Views9.1K

Существует множество библиотек для настройки алиасов в Node.js, таких как alias-hq и tsconfig-paths. Однако однажды, изучая документацию Node.js, я обнаружил возможность настройки алиасов без использования сторонних библиотек. Более того, данный подход позволяет использовать алиасы без сборки кода. Знакомо ли вам поле imports в package.json? В этой статье мы рассмотрим, что такое Node.js Subpath Imports, узнаем о тонкостях настройки и разберемся с поддержкой в актуальных инструментах разработки.

Читать далее
Total votes 21: ↑21 and ↓0+21
Comments12

Рисуем верёвку в формате SVG при помощи JavaScript

Level of difficultyMedium
Reading time8 min
Views7.2K

Сегодня я расскажу о процессе, который я придумал для преобразования SVG‑контура в векторный рисунок верёвки.

Вы узнаете, как превратить показанный слева контур в верёвку справа:

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

Стоит учесть, что это не туториал по кодингу, а подробный обзор каждого из этапов. Но не беспокойтесь, код полностью доступен.

Замысел

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

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

Читать далее
Total votes 50: ↑49 and ↓1+61
Comments2

Полное понимание асинхронности в браузере

Reading time24 min
Views101K
Про асинхронность JavaScript написано много статей, документации и книг. Но вся информация сильно распределена по интернету, поэтому сложно быстро и полностью разобраться, что к чему, и составить цельную картину в голове. Не хватает одного исчерпывающего гайда. Именно эту потребность я и хочу закрыть своей статьёй.

Читать дальше →
Total votes 78: ↑78 and ↓0+78
Comments25

Термодатчик из звуковой карты

Reading time6 min
Views6.9K

Всем привет!

Как-то раз зимой у меня сгорел греющий кабель в водопроводе (он не даёт замёрзнуть воде в трубах, проложенных близко к поверхности). Кабель конечно пришлось заменить, водопровод отогрелся и снова заработал, однако возникло жгучее желание "что-то с этим сделать". Хотя бы узнавать о его неисправности заранее, а в лучшем случае - ещё и автоматически отогревать. Идея в общем-то несложная: надо мерять температуру трубы и включать обогрев (при помощи любого электрического обогревателя), если она мёрзнет. Всё просто, но датчика температуры под рукой нет. Конечно, можно его заказать на всем известном китайском сайте, или на не менее известном российском, но это совершенно неспортивно. Потому попробуем изготовить датчик из имеющихся под рукой компонентов. Для этого нам понадобится: звуковая карта (наверняка найдётся в компьютере), два jack-разъёма (от наушников или микрофонов), один терморезистор и пара резисторов.

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

Читать далее
Total votes 25: ↑23 and ↓2+29
Comments22

Все ли вы знаете о useCallback

Reading time7 min
Views120K

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

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

Read more
Total votes 10: ↑8 and ↓2+12
Comments70

Scrollbar в современном CSS

Reading time6 min
Views61K

Начнем с того что scrollbar – это самый обыденный элемент, присутствующий на всех веб-сайтах и в каждом приложении. Исторически сложилось так, что стилизовать scrollbar-ы было очень сложно и многие из разработчиков помучились с ними и стараются избегать работы с ними, но все же, как мне кажется, мы должны уделять им немного больше внимания. Давайте посмотрим, что мы можем сделать в 2022 году, чтобы улучшить возможности прокрутки для наших пользователей.

Читать далее
Total votes 6: ↑6 and ↓0+6
Comments9

JavaScript: ускоряем загрузку изображений с помощью Imgproxy, Cache API и Service Worker API

Reading time12 min
Views10K



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


В этой статье я хочу поделиться с вами результатами небольшого эксперимента, связанного с ускорением загрузки изображений с помощью Imgproxy, Cache API (далее — кеш) и Service Worker API (далее — СВ).


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


Обратите внимание: в части, касающейся imgproxy, особых препятствий на пути использования рассматриваемого в статье подхода к загрузке изображений в продакшне нет, но в части, касающейся СВ, следует проявлять крайнюю осторожность, поскольку данная технология является экспериментальной — это означает, что поведение СВ во многом определяется конкретной реализацией (браузером), что в ряде случаев делает его довольно непредсказуемым. Возможно, для кеширования изображений лучше предпочесть старые-добрые HTTP-заголовки Cache-Control и Etag. Но эксперимент на то и эксперимент, чтобы, в том числе, искать новые ответы на старые вопросы.


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


Остальных прошу под кат.

Читать дальше →
Total votes 13: ↑13 and ↓0+13
Comments13

Уроки компьютерного зрения на Python + OpenCV с самых азов. Часть 4

Reading time8 min
Views20K

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

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

Превратить в цепочки точек и уже их отдельно анализировать.

Описать как граф и применять к нему алгоритмы на графах.

Продолжим изучать методы предобработки. Например, изображением можно сделать контрастным:

Читать далее
Total votes 8: ↑8 and ↓0+8
Comments3

Таиланд. Пхукет. Документы, банки. 2022

Reading time4 min
Views46K

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

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

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

Читать далее
Total votes 26: ↑25 and ↓1+34
Comments72

Разработка графических приложений в WSL2

Reading time3 min
Views9.8K

Данная статья будет неким дополнением опубликованной ранее (не мной) статьи. Чтобы не повторять написанное, по ссылке выше есть информация о требованиях к работе wsl2 на windows 10, как его включить, настроить, обновить и запустить графическую среду. В текущей статье я расскажу о том, как вести разработку графических приложений в wsl используя не только visual studio code со спец. плагином, а любую среду разработки.

Читать далее
Total votes 8: ↑7 and ↓1+6
Comments8
1
23 ...

Information

Rating
Does not participate
Location
Yerevan, Yerevan, Армения
Date of birth
Registered
Activity