Обновить
152

JavaScript *

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

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

Тайная жизнь домашних V8: как движок JavaScript оптимизирует твой код

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

Всем привет. Меня зовут Виктор Степанов, я frontend chapter lead на платформе СберТеха GitVerse. Хочу рассказать про внутреннюю «механику» V8 и показать, как писать более быстрый код. Поехали!

Читать далее

Темная магия JavaScript: Укрощаем неявное приведение типов

Уровень сложностиПростой
Время на прочтение12 мин
Охват и читатели2.9K

Привет, Хабр! У каждого JS-разработчика есть своя история. История о том, как он впервые встретился с этим. Сидишь, пишешь код, всё логично, всё под контролем. И тут, чтобы проверить одну мелочь, открываешь консоль и из чистого любопытства пишешь:

[] + {} // Получаешь: "[object Object]"
// Хм, ладно, массив привел себя к строке, а объект стал... объектом. Логично.

{} + [] // Получаешь... 0 ???
// ЧТО?!

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

Разобраться с этим!

Telegram Web съел 30% моего 16-ядерного процессора. Расследование странного поведения, или Призрак майнера в браузере

Время на прочтение9 мин
Охват и читатели16K

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

О, нука че там

Сам ты вайб-кодер

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

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

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

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

Читать далее

Кликджекинг по двойному щелчку. Новый приём обманного UI

Время на прочтение4 мин
Охват и читатели2.4K


Кликджекинг (подделка UI) — известный приём обмана пользователей интернета, когда поверх видимой страницы располагается невидимый слой, куда загружается фальшивка. То есть пользователю кажется, что он вводит пароль на доверенной странице, но на самом деле вводит его в стороннюю форму, которая принадлежит злоумышленнику.

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

Однако несколько месяцев назад в Сети впервые замечены случаи кликджекинга по двойному щелчку. Вредоносные действия выполняются в промежутке между первым и вторым кликами незаметно для жертвы. Более продвинутая версия атаки работает практически на всех сайтах и в любых браузерах.
Читать дальше →

Представляю @vue-dnd-kit/components: Готовые компоненты для быстрой разработки интерфейсов с перетаскиванием

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

Представляю vue-dnd-kit/components — готовые компоненты для быстрой разработки drag & drop интерфейсов в Vue 3!

📋 Сортируемые таблицы
📊 Канбан-доски
🌳 Древовидные структуры
🧩 Интерактивные дашборды

CLI работает как shadcn/ui — компоненты клонируются в ваш проект, давая полный контроль над кодом. Проект в активной разработке, но уже готов к использованию!

Готовые компоненты: Table, Kanban, Tree, Dashboard.

Статус: бета, API может изменяться. Подходит для прототипов и активной разработки.

Читать далее

Я устал от ограничений Strava и написал свой «швейцарский нож» для анализа тренировок на Python и FastAPI

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

Всем привет! Я — разработчик и велосипедист, которому надоели ограничения Strava. Знакомы боли: GPS‑треки с «телепортами», платный анализ по зонам и неудобная загрузка сегментов на Garmin? Я решил исправить это и написал свой «швейцарский нож» для анализа тренировок.

Под катом — история создания pet‑проекта Peakline на Python, FastAPI и Vanilla JS. Расскажу, как устроен продвинутый FIT‑генератор для гонок с «призраком», как визуализировать исправление «сломанных» GPX‑треков и как заставить график и карту работать в связке. Поделюсь фрагментами кода, архитектурными решениями и подводными камнями при работе с API Strava.

Узнать, как это сделано

Postman + Newman: быстрый старт API-автотестов на практике

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

Автоматизация тестирования API — задача, с которой сталкиваются даже опытные инженеры, но многие всё ещё предпочитают полагаться на ручные запросы в Postman, а затем переносят их в код — и так годами. Но можно ли избежать этого лишнего шага? В этой статье мы покажем, как настроить эффективную автоматизацию тестов API с Postman и Newman, интегрируя их в процессы CI/CD, чтобы избежать ошибок и повысить производительность.

Читать далее

Как мы распилили монолит на микрофронтенды с Vite и не сошли с ума

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

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

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

После изучения разных вариантов мы остановились на подходе микрофронтендов. Хотелось разграничить зоны ответственности между командами и ускорить разработку, не теряя гибкости. В качестве сборщика решили остаться на Vite — он быстро развивался, предлагал отличную DX и поддержку модульной федерации через плагин. Кроме того, важно было сохранить единый репозиторий, чтобы упростить CI/CD и управление зависимостями.

Читать далее

document.currentScript: что такое и с чем едят

Уровень сложностиПростой
Время на прочтение9 мин
Охват и читатели2.2K


Сначала я недооценил document.currentScript, но оказалось, что он отлично подходит для передачи параметров конфигурации прямо в теги <script> — и это далеко не все.


Порой я натыкаюсь на давно существующие браузерные API в JavaScript, о которых, по идее, я должен был узнать гораздо раньше. Например, window.screen или метод CSS.supports(). К счастью, я понял, что не один такой. Помню, как однажды упомянул window.screen в посте и получил неожиданно много комментариев от людей, которые тоже впервые о нем слышали. Это меня немного приободрило — я почувствовал себя не таким уж глупым.


Видимо, дело не в том, как давно существует API, а в том, насколько он полезен в реальных задачах. Если window.screen почти нигде не используется, о нем легко забыть.


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

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

Virtual Mirror Library — Библиотека виртуального макияжа и онлайн примерки аксессуаров

Уровень сложностиСредний
Время на прочтение38 мин
Охват и читатели788

Виртуальное зеркало: Создала сама, делюсь с вами!

Привет! Меня зовут Аня, и я фанат e-commerce. В прошлый раз мы говорили о визуальном поиске, а сегодня я хочу рассказать о своей гордости — библиотеке виртуального зеркала.

Ещё год назад, когда готовые решения были редкостью, я решила выяснить, как работает виртуальная примерка. Результат? Моя собственная библиотека, которая позволяет примерить косметику и аксессуары в реальном времени или на фото.

Читать далее

JS SDK Битрикс 24: что под капотом и какие планы

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

Привет! Меня зовут Сергей Востриков, я руковожу направлением Маркет и интеграций в Битрикс. Моя команда развивает решения для разработчиков тиражных решений и индивидуальных кастомизаций. Сегодня я хочу рассказать про наш новый официальный SDK под JavaScript для работы с REST API Битрикс24. Он опубликован в виде отдельного репозитория на Github и распространяется на условиях лицензии MIT. 

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

Читать далее

Краткая история JavaScript

Уровень сложностиПростой
Время на прочтение27 мин
Охват и читатели3.5K



В этом году JavaScript исполняется 30 лет.


За три десятилетия он прошел путь от забавного и непритязательного скриптового языка, созданного за 10 дней, до самого популярного языка программирования в мире. Ниже — ключевые моменты истории JavaScript, которые помогут понять, как он менялся и куда идет.

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

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

Практическая инструкция для чайника по использованию нейросетей в разработке

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

Статья написана для юзверя (в том числе разработчика) с базовыми знаниями работы в операционной системе, консолью, IDE и браузером.

В статье рассматривается инструкция для установки LLM локально на ПК юзверя для обхода проблем работы с удаленными серверами. Также статья поможет в совсем базовом понимании работы с LLM.

Здесь будет рассматриваться IDE VSCode, однако всё нижеописанное актуально и для JB Webstorm или Pycharm (и др).

Читать далее

Vue. Watch и WatchEffect на практике

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

Каждый, кто использует Vue для разработки, так или иначе встречается с необходимостью выполнить какое‑либо побочное действие при изменении значений, и сразу в голове возникает мысль о двух методах‑наблюдателях — Watch и WatchEffect.

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

По ходу статьи также будут приведены некоторые полезные библиотеки Vue, которые часто используются в разработке.

Читать далее

Что происходит с вашим JavaScript-кодом внутри V8. Часть 1

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели4.6K

В этой серии статей мы пройдемся по каждому этапу работы V8: лексическому и синтаксическому анализу, построению AST, интерпретации и оптимизациям. Затронем Ignition, Sparkplug, Maglev и Turbofan; разберемся с hidden classes, байт-кодом, и много чем еще. Углубимся во все этапы достаточно, чтобы понимать, за что отвечает каждый из них.

В этой части посмотрим на лексический и синтаксический анализ.

Читать далее

React Native тормозит? Проверь эти 8 узких мест в производительности, прежде чем винить фреймворк [ЧЕК-ЛИСТ]

Время на прочтение14 мин
Охват и читатели3.2K

Идея этой статьи родилась во время задушевных разговоров на кухне и за утренним кофе с коллегами. Началось все с вопроса: «Что ты сказал бы себе прошлому, чтобы релизы стали легче, а спринты прекраснее?» Конечно, в тот момент я ничего дельного не ответил, но, кажется, наконец‑то сформулировал идеальную фразу: «Настоящий разработчик, Слав, это не тот, кто с сияющим макбуком и вкусным смузи. Разработчик — тот, кто делает то, что нужно сделать. И в легаси покопаться приходится, и memory leak дебажить, а он всё равно делает, потому что так надо».

Привет, Хабр! Меня зовут Вячеслав Чащухин, я — разработчик в МойОфис. Занимаюсь мобильной версией Squadus — цифрового рабочего пространства для совместной работы и деловых коммуникаций.

Обращаю ваше внимание на то, что эта статья — не инструкция по решению всех проблем. Скорее, чек‑лист причин, которые, по моему мнению, чаще всего приводят к тем или иным проблемам. Поэтому в некоторых пунктах будут ссылки или упоминания возможных решений. Я объединил проблемы по группам. Если вы обнаружили в своем приложении подлагивания или не хотите их обнаружить в будущем, рекомендую пройтись по пунктам :)

Читать далее

Форматирование без боли: ESLint Stylistic вместо Prettier

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

Привет, Хабр! Меня зовут Никита Ли, я Frontend-разработчик в группе Рунити. Так тяжело бывает удержаться от того, чтобы не усложнить себе жизнь, не так ли? Все любят смотреть на чистый и понятный код, но не все его таким пишут. Сделать его таким помогают наши друзья — форматировщики и линтеры. О них и пойдет речь в этой статье, а конкретно о ESLint Stylistic.

Любой автор хочет, чтобы его кто-то читал, даже на JavaScript, но просматривать читателю хочется грамотный и красивый текст. ESLint анализирует код, выявляя ошибки, чтобы программы выходили из под клавиатуры чистыми и без ошибок. Prettier, в свою очередь, как инструмент форматирования делает текст исходного кода программ единообразным. Оба этих инструмента являются практически стандартом, когда речь заходит о качестве кода. Думаю, что многие сталкивались в проектах с их одновременным применением, что в целом логично — форматирование != линтинг. Однако это решение не всегда обосновано, а зачастую излишне. В качестве альтернативы я предлагаю рассмотреть ESLint Stylistic. В этой статье разберемся, что это, откуда появился инструмент и почему с ним стоит познакомиться.

Читать далее

Чек-лист по оптимизации, с которым мы вышли в зелёную зону

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

Привет! Меня зовут Андреева Саша, я веб-разработчик в компании iSpring. Два года назад мы столкнулись с тем, что всё больше и больше страниц нашего ведущего сайта начали падать в выдаче, а рост органического трафика заметно уменьшился. Основной причиной было то, что просели показатели сайта — мы постоянно обновляли страницы, но не уделяли должное внимание оптимизации. Мы проанализировали показатели, выбрали инструмент для отслеживания данных по всем страницам, в нём же настроили алерты и взялись за активную работу по оптимизации.

Перед вами рабочий чек-лист, в нём собраны основные наработки и советы по оптимизации, которые мы реализовали и продолжаем применять. Если вы работаете с CMS, то помимо перечисленных, есть дополнительные способы улучшить показатели  — спрашивайте в комментариях :)

Читать далее

Angular 20: Большое обновление для современного веба

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

Angular 20 — это мощное обновление, которое делает разработку веб-приложений быстрее, удобнее и современнее. Новые возможности шаблонов, стабильные сигналы, поддержка zoneless режима и интеграция с AI позволяют создавать высокопроизводительные приложения с минимальными усилиями. В этой статье разберём ключевые нововведения Angular 20 и покажем, как их использовать в ваших проектах.

Читать далее

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