JavaScript *

С самого начала разработки курьерки мы генерировали много идей по улучшению алгоритмов. Мы не стеснялись выкатывать кучу фичей и проверять их работоспособность А/Б тестами. Не было ни дня, когда у нас не крутились эксперименты в продакшене. Что-то мы выкидывали, что-то оставляли, но не хардкодили, чтобы иметь гибкость. Страна большая и у каждого региона свои особенности, которые влияют на плотность заказов, логистику и потребность в курьерах. Поэтому наборы фичей и их значения различаются. Мы поняли, как отдельная фича влияет на продуктовые метрики, но как набор фичей в совокупности влияет на итоговый результат?

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

При разработке веб-приложений не все задумываются о том, сколько памяти потребляет их код. О производительности наших сайтов мы вспоминаем гораздо чаще. К тому же не каждому разработчику интересно «экономить на спичках». Разве может наш код на языке JavaScript требовать много памяти? «Много» — это вообще сколько? 100 мегабайтов — это много?

Меня зовут Антон Непша. Я работаю в Сбере, разрабатываю сайт СберБанк Онлайн и веду Telegram-канал Антон Непша.js. Недавно я выступил на HolyJS с докладом о том, сколько ресурсов потребляют наши сайты, как эти ресурсы распределяются, где хранятся, и как связать информацию о них из снимка памяти с конкретным местом в своём коде.

Если смотреть видео вам удобнее, то доклад есть на YouTube и ВК Видео. В статье вас ждёт текстовый вариант и ссылки на используемые материалы:

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

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

Обратите внимание, что я акцентировал внимание на бесплатных решениях для написания кода клиентской части веб-приложений.

Список протестированных инструментов:

• Сodeium
• Devv_
• V0
• ChatGPT
• GPT4All
• Cursor
• OpenHands
• Aider
• Cody
• Tabnine
• Mutable
• Pieces
• Codex

Далее я подробнее расскажу о первых трех (Codeium, Devv, V0) и немного о двух следующих за ними (ChatGPT, GPT4All) решениях из представленных в списке, как наиболее "выдающихся" с моей точки зрения. Остальные сервисы (начиная с cursor и ниже) в той или иной степени похожи на codeium и `devv`, но показывают более плохие результаты генерации кода по запросу, исправления ошибок и документирования кода, а также менее удобны в использовании и иногда требуют дополнительных настроек, например, указания ключа OpenAI, установки лишних инструментов (тулкитов), являются условно бесплатными и т.п.

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

Привет, Хабр! Меня зовут Артём Елизаров, я руковожу отделом разработки фронтальных решений в R-Style Softlab. Значительную часть рабочего времени я посвящаю подбору специалистов и в общей сложности занимаюсь этим уже более 5 лет. В этой статье я хотел бы поделиться опытом проведения собеседований, их спецификой и дать рекомендации тем, кто ищет работу фронтенд-разработчиком. 

Привет! Я Света, фронтенд-разработчик в отделе рекламных спецпроектов в KTS.

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

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

Если вы ищете способы внедрить AR в свои проекты, эта статья поможет вам сориентироваться и составить общее представление о возможностях соответствующих библиотек.

Привет!

Хочу поделиться инструментом для визуализации данных Мосбиржи, Nasdaq, NYSE и AMEX. Графики можно посмотреть на странице finmap.org. Сейчас я занимаюсь этим проектом один, а планов много, например, добавить данные торгов стран Европы, Азии и Латинской Америки. Исходный код опубликован на GitHub. Очень надеюсь, что хабр-эффект всё ещё работает и здесь найдутся те, кто готов присоединиться к разработке. Пожалуйста, расскажите о проекте друзьям и знакомым.

Данные торгов представлены в виде treemap и histogram. В карточке каждой компании отображается краткое описание и новостная лента. В будущем я планирую добавить ленту микроблогов.

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

Меня зовут Артур Иванов, я тимлид B2B Product Design департамента Design & Research Office (DRO) «Лаборатории Касперского», и именно перед нашей командой встал вызов по внедрению дизайн-системы под названием Hexa UI в уже существующие рабочие процессы отдела дизайна.

Тот, у кого из всех инструментов есть только молоток, склонен на любую проблему смотреть, как на гвоздь.
Абрахам Маслоу

Мы склонны использовать знакомые решения. Когда речь заходит о переключении контента, мы обычно используем свойства display: none или opacity: 0 с добавлением JavaScript. Однако современный веб стремительно развивается, и, возможно, настало время рассмотреть другие подходы к переключению контента — узнать, какие нативные API на сегодняшний день поддерживаются, их достоинства и недостатки, а также некоторые нюансы, о которых мы могли и не подозревать (включая псевдоэлементы и другие малоизвестные вещи).

Безумные штуки иногда можно найти в интернете. Листая 2024 JavaScript rising stars (https://risingstars.js.org/2024/en#section-all) обнаружил там удивительного зверя - Postgres скомпилированный через emcc в WASM версию, и допиленный до состояния, когда его можно запустить внутри JS-процесса (браузер/Node.js/Bun/etc).

Как он устроен, как им пользоваться, и, самое главное, зачем? Добро пожаловать под кат :)

JSON - наш повседневный помощник, но вместе с другими текстовыми форматами он может преподнести неприятные сюрпризы: потеря точности чисел, громоздкие файлы, путаница с датами. Рассказываю, как этих проблем избежать и повысить эффективность с помощью стриминга в Node.js, а также MessagePack и Protobuf. Узнайте, где подводные камни и как их обходить на практике!

Если хотите понять, в чём именно проблема на иллюстрации, загляните в статью — там всё разобрано :-)

Сложно внедрить DDD в NestJS, не запутавшись в абстракциях? В статье рассмотрены частые ошибки - от комбайна в контроллерах до формальных Value Objects. Разбираем, как выделять слои (Domain, Application, Infrastructure, Interface), правильно использовать Entities и репозитории и создавать поддерживаемую архитектуру.

Узнайте, почему большие TypeScript-проекты начинают "захлёбываться" от рекурсивных типов и обилия импортов, и как с помощью правильной структуры монорепы, настройки tsconfig и диагностики ускорить время компиляции и работу IDE. Рассматриваем инструменты, параллельную сборку, оптимизацию рекурсивных типов и прочие техники, которые помогут сохранить ваш проект быстрым и удобным.

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

В этой статье я попытаюсь разобрать, когда действительно стоит использовать useMemo, useCallback и React.memo, а когда их использование излишне. Мы изучим каждый из хуков, их влияние на рендеринг компонентов в React, а также рассмотрим практические примеры с подробными объяснениями работы каждого из хуков.

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

В этой серии статей я рассказываю о Convex — новом открытом и бесплатном решении BaaS (Backend as a Service — бэкенд как услуга), которое выглядит очень многообещающе и быстро набирает популярность среди разработчиков.

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

Эта третья и завершающая часть серии, в которой мы поговорим о планировании задач, хранилище файлов и поиске.

В конце мы также рассмотрим расширенный пример использования Convex для разработки полноценного веб-приложения.

• Первая часть
• Вторая часть

Как использовать мощь системы типов TypeScript для вычисления логики ещё на этапе компиляции и автоматической генерации кода. Разбираем условные типы, шаблонные литералы, рекурсивные типы и другие приёмы, чтобы упростить разработку, сократить дублирование кода и снизить вероятность ошибок на runtime.

Асинхронный код часто становится камнем преткновения для начинающих разработчиков. Почему функции выполняются не в том порядке, зачем нужны промисы, и что делает async/await? В статье я простыми словами объясняю:

• Как работает Event Loop и почему это важно.
• Какие ошибки чаще всего допускают джуны при работе с асинхронностью.
• Как научиться писать понятный и предсказуемый асинхронный код.

Если асинхронность вызывает больше вопросов, чем ответов, загляните в статью - там всё по шагам. 🙂

Поздравляю Хабр и Хаброжителей с Новым 2025 годом! Несколькими годами ранее я писал о том, как сделать ёлку из функций, в этот раз сказ пойдёт о ёлке из Unicode символов. Ограничение - должна быть музыка, а результат должен помещаться в QR код.

Vue 3 уже давно в строю, но его "прокси-движок" и особенности Composition API по-прежнему раскрывают себя всё глубже. В статье мы разберём, как Track/Trigger помогают отслеживать изменения, зачем нужны customRef и как грамотно использовать <Suspense> для асинхронных компонентов. Всё это - на примерах и с советами по оптимизации в крупных проектах.
Приступаем к деталям!