Все потоки
Поиск
Написать публикацию
Обновить
216.33

JavaScript *

Прототипно-ориентированный язык программирования

Сначала показывать
Порог рейтинга
Уровень сложности

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

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров24K

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

Читать далее

Дополненная реальность в Web: какие библиотеки актуальны в 2025?

Уровень сложностиПростой
Время на прочтение10 мин
Количество просмотров5K

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

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

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

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

Читать далее

Визуализация данных Мосбиржи и не только

Время на прочтение3 мин
Количество просмотров6.1K

Привет!

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

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

Читать далее

Унификация, синхронизация, кросс-командность. Как дизайн-система реально улучшает жизнь компании

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров2.5K

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

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

Читать далее

Современные способы переключения контента

Уровень сложностиСредний
Время на прочтение14 мин
Количество просмотров5.2K



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

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

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

PGlite — полноценный Postgres-сервер на WASM. Работает прямо в браузере и Node.js

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров5.8K

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

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

Поехали!

Почему текстовые форматы не идеальны в разработке: пример на JSON

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров13K

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

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

Читать далее

DDD против реальности: распространённые ловушки и их решение в NestJS

Уровень сложностиПростой
Время на прочтение11 мин
Количество просмотров7.5K

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

Читать далее

Performance и оптимизация TypeScript-типов в больших проектах

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров11K

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

Читать далее

Взгляд с другой стороны на useMemo, useCallback и React.memo в React: когда их стоит использовать

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров7.7K

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

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

Читать далее

Руководство по Convex. Часть 3

Уровень сложностиСредний
Время на прочтение33 мин
Количество просмотров1.2K


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


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


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


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


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


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

Type-level программирование в TypeScript: практические кейсы и обзор возможностей

Уровень сложностиСредний
Время на прочтение9 мин
Количество просмотров3.8K

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

Читать далее

Почему джуны путаются в асинхронном коде (и как научиться с ним работать)

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров45K

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

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

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

Читать далее

Ближайшие события

Как сделать ёлку, если ты Unicode

Уровень сложностиСредний
Время на прочтение12 мин
Количество просмотров5K

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

Читать далее

Vue 3 под капотом и тонкости Composition API: Reactivity, Provide/Inject, Suspense

Уровень сложностиСредний
Время на прочтение9 мин
Количество просмотров9.8K

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

Читать далее

Работаем с асинхронностью в Nuxt 3: сравниваем хуки из коробки и кастомный fetch

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров5.9K

Nuxt 3 — это мощный фреймворк на основе Vue, который упрощает разработку серверно-рендерируемых и статически генерируемых веб-приложений. Одна из его особенностей — возможность работы с асинхронными данными с помощью специальных хуков. Они обеспечивают эффективное взаимодействие с API, динамическую загрузку данных и подгрузку контента. Многие знают про эти хуки, но далеко не все используют их потенциал в полной мере. 

Меня зовут Леша Смолыгин, я разработчик в Lamoda Tech. Разберемся, как использовать популярные хуки запроса из коробки useFetch, useAsyncData, $fetch, useLazyAsyncData и реализовать кастомный fetch. Эти инструменты решают задачи, связанные с загрузкой данных из API, при этом каждый из них имеет свои особенности и ограничения. Разберём их и сравним, чтобы понять, какой инструмент лучше подходит для той или иной ситуации в вашем приложении.

Читать далее

Оптимизация React-приложений: Используем useTransition, useDeferredValue и useOptimistic для плавного UI

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров14K

Сделайте интерфейс React-приложения более отзывчивым и плавным с помощью хуков useTransition, useDeferredValue и useOptimistic. Управляйте приоритетами рендеринга, избегайте подвисаний при работе с большими данными и реализуйте оптимистичные обновления для мгновенной реакции интерфейса. Практические примеры и полезные советы ждут вас! 🚀

Читать далее

«Непонятки» в изучении программирования

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров13K

Однажды, в ходе очередной попытки освоить программирование, мне попалась переводная книга, где автор на первых страницах обещал научить программировать даже тех, кто никогда этого не делал. И в качестве примера приводил собственного сына 8 лет, которого он как бы научил тоже.

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

И в эту минуту я чувствую как начинают шевелиться волосы на моей голове. От шока, что не понимаю, чтоэто такое.

Потом подумал, что он, наверное, это где‑то объяснил, а я пропустил. Проверил предыдущие страницы, не нашёл. Может он потом объяснит, бывают же такие преподы, сначала что‑то скажет, а потом разберёт. Посмотрел вперёд, не нашёл тоже.

В общем, сильно загрустил. Мечта стать программистом разбилась о стену как хрустальный шар. И далее, по цепочке, знакомые всем мысли о собственной непригодности.

С тех пор, если встречается в книге, что автор научит всех, даже тех, кто «никогда не программировал», то невольно вздрагиваю, как от легкого удара электрическим током.

И самое смешное, что недавно, на современном курсе по изучению программирования, услышал то же самое. Преподаватель, как только зацепился за тип Int, тут же начал рассуждать все о тех же Int16, Int32, Int64 и т. д. Как будто он попадает в разъезженную колею и уже не может из нее выбраться.

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

Читать далее

Используем всю мощь JavaScript для написания счётчика. Разбор от Олега Иванова, фронтенд-разработчика WMT Group

Уровень сложностиСредний
Время на прочтение11 мин
Количество просмотров9.2K

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

Вместо этого мы напишем функцию-счётчика на JavaScript. Несколько раз, причём всякий раз по-разному с пользой.

Казалось бы, задача простейшая, даже старый-добрый to-do list куда сложнее и заковыристее. Предложение написать функцию-счётчика на собеседованиях уже классика, которая делается на автомате. Уверен, что большинство опытных воинов фронтенда либо помнят традиционное решение, либо по памяти накатают его в течение 30 секунд. Традиционно эту задачу решают замыканием. Однако, почему именно им? А если попробовать сделать это как-то иначе? Я попробовал и реализовал счётчик несколькими разными (подчас неочевидными) способами, попутно спросив совета у нейросетей, а также подключив тяжёлую артиллерию в лице Babel, TypeScript и даже WebAssembly. Давайте посмотрим, что получилось!

Читать далее

useActionState: новый герой в мире React

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров10K

Привет, React-энтузиаст! Случалось ли тебе писать логику для форм, где нужно не только обработать кучу полей, но и синхронизировать их с асинхронными действиями (запросы, загрузка данных, показ успеха или ошибок)? Если да, то, возможно, ты уже слышал об экспериментальном хуке useFormState в React. Однако на смену ему пришёл более мощный инструмент - useActionState. В статье обсуждается, почему прежний подход ушёл на пенсию, чем хорош новый, и как он может упростить жизнь каждому фронтенд-разработчику.

Читать далее

Вклад авторов