JavaScript *

Преобразуем картинку с черным фоном в прозрачный фон без хитрых наложений слоёв в Photoshop'е и сохраним в прозрачный PNG. Пример кода на JavaScript.

Меня зовут Алексей Новохацкий, я – Software Engineer. Сейчас работаю над архитектурой высоконагруженных систем, провожу технические собеседования, воплощаю в жизнь собственные проекты.

Как известно, Node.js хорошо справляется с I/O intensive задачами. А вот для решения CPU bound мы имеем несколько вариантов – child processes/cluster, worker threads. Также есть возможность использовать другой язык программирования (C, C++, Rust, Golang) в качестве отдельного сервиса/микросервиса или через WebAssembly скрипты.

В данной обзорной статье будут описаны подходы к использованию Golang в разработке Node.js приложений для запуска некоторых CPU intensive задач (простой суммы чисел, последовательности Фибоначчи, а также для таких хеш-функций как md5 и sha256).

Какие у нас есть варианты?

1. Попытаться решить CPU bound задачи только с помощью Node.js

2. Создать отдельный сервис, написанный на Golang и "общаться" с нашим приложением с помощью запросов/брокера сообщений и т.д. (в данной статье будут использованы обычные http запросы)

3. Использовать Golang для создания wasm файла, что позволит использовать дополнительные методы в Node.js

Меня зовут Михаил Сахнюк и я разрабатываю фронтенд уже более шести лет. Сейчас я фронтенд разработчик в Miro. 

В статье рассмотрим:

• как оптимизировать веб-приложение и ускорить его загрузку;

• почему это важно;

• какие инструменты помогут в работе над оптимизацией, замерами и контролем результатов;

• преимущества работы с загружаемыми модулями в приложениях.

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

Статья — конспект моего доклада на конференции Mergeconf 2021 в Иннополисе. 

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

— поделиться с Хабром видеозаписями общедоступной части (суммарно по всем конференциям это более ста часов видео!)

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

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

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

На днях прочитал интересную статью, в которой демонстрируется возможность использования WebAssembly-модулей (далее — Wasm), скомпилированных из Rust, в React-приложении.

Так вот, статья интересная, но автор толком ничего не объясняет, видимо, исходя из предположения, что читатели, как и он, владеют обоими языками программирования (JavaScript и Rust).

Поскольку я не отношусь к этой категории (пока не знаю Rust), но люблю как следует разбираться в интересующих меня вещах, представляю вашему вниманию собственную версию.

Исходный код проекта.

Если вам это интересно, прошу под кат.

Привет ?, это статья про progressive enchancement с помощью petite-vue. Тут я расскажу про его прикольные фичи (как отдельного инструмента, так и в составе Vue).

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

В общем (и целом), всё круто ?

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

В этой статье мы рассмотрим виды анимаций в веб приложениях. Паттерны UI анимаций в дизайн системах и их реализацию на Angular. Также будет показан способ организации анимаций в библиотеках с учетом переиспользования и кастомизации.

Деструктурирующее присваивание в JavaScript — это изящный способ извлечения значений из массивов и объектов, при котором в полной мере реализуется принцип DRY (англ. Don’t repeat yourself — «Не повторяйся»).

Цель этой статьи — продемонстрировать, как именно работают деструктурирующие присваивания массивов и объектов в JavaScript.

Поэтому без лишних слов предлагаю приступить к деструктуризации массивов.

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

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

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

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

Мы разработаем простой Express-сервер, способный обрабатывать стандартные CRUD-запросы, с фиктивной базой данных, реализованной с помощью lowdb.

Затем мы подробно опишем наше API, сгенерируем JSON-файл с описанием и визуализируем его.

Так, например, будет выглядеть описание POST-запроса к нашему API:

Исходный код проекта.

Если вам это интересно, прошу под кат.

Привет, Хабр! Меня зовут Павел, я фронтэнд-архитектор в компании Itransition. Вот уже более 8 лет я работаю во фронтэнде. В течении этого времени мне довелось поработать с приложениями, как полностью основанными на бэкенд технологиях, так и с классическими сайтами, написанными с использованием нативного JS и различных библиотек и фреймворков. В данной статье я хотел бы провести в некотором роде ретроспективу тех решений, с которыми сталкивался на практике.

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

С развитием интернета всё больше приложений перебираются на мобильные устройства и в браузер. Сегодня мы рассмотрим именно последний способ создания приложений – в виде сайтов – при этом учтем как современные приложения, так и enterprise-приложения, которые должны работать со старыми версиями браузеров. 

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

Привет! Подошел к концу двенадцатый набор в Школу Программистов hh.ru. Самое время рассказать, как Петр Васильевич раздавал премии менеджерам, кто вышел победителем из "Релиза до выходных" благодаря ролевому помощнику, и как впервые в истории Школы нам пришлось облегчить условия вступительного задания прямо во время набора. 

В этой статье будет подробный разбор заданий свежего набора в Школу Программистов hh.ru.

Экспериментальная поддержка HTTP/3 уже встроена в основные браузеры и начинает потихоньку пробираться на сервера. А это значит, что уже можно полностью отказаться от использования в своих nodejs-приложениях от http-библиотеки и переключиться на http2. Насколько же отличается реализация http2-сервера от обычного http-сервера?

Под катом пример простого web-приложения, выполняющего типовые задачи (получение статики GET'ом, upload файлов, POST-запросы, server sent events) на серверах HTTP/1 и HTTP/2. HTTP/2 Server Push в данном примере не затрагивался. Приложение не использует внешних зависимостей (npm-пакетов), всё сделано при помощи собственного функционала nodejs.

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

Привет, эта статья - "перевод документации и часто используемых примеров" для petite-vue + ещё немного приколов и одна интересная практика (с которой не всё так очевидно, как могло бы казаться).

Зачем нужен petite-vue?

Petite-vue это 6-ти килобайтное подмножество Vue, основной задачей которого, по словам Эвана, является Progressive Enchancement.

На сайте https://showroom.hyundai.ru/ можно заказать машину без переплат, напрямую с завода Hyundai, но проблема в том, что машины уходят очень быстро. При этом новые автомобили появляются нечасто, и, чаще всего, можно наблюдать на сайте сообщение об отсутствии машин.

Чтобы успеть забронировать машину, напишем парсер-мониторинг для «Hyundai Showroom» с выгрузкой в телеграм-канал, который будет уведомлять о том, появились ли машины в шоуруме.

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

Изначально в качестве API для программы был выбран Forex Oanda. На тот момент это был единственный найденный нами брокер с Open API и кое-какой документацией. В планах сервер который работает с API и фронт для отображения работы
(на тот момент) индикатора, поэтому пишем на Node JS. Проект был доведен до логического завершения, он исправно находил похожие комбинации и собирал их в кластеры, был сделан интерфейс который изображал полу-статичную информацию. Однако протестировать все это мы так и не успели, забросив все после сдачи проекта.

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

Поддерживаемые регулярные функции: