Обновить
201.87

JavaScript *

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

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

Ускорение крупномасштабной миграции тестов с помощью LLM

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

Airbnb недавно завершила первую крупномасштабную миграцию кода под управлением LLM: мы обновили почти 3,5 тысячи файлов тестов React-компонентов, переведя их с Enzyme на React Testing Library (RTL). По первоначальным оценкам ручная работа заняла бы 1,5 года инженерного времени, но — используя сочетание передовых моделей и надёжной автоматизации — миграция завершилась всего за 6 недель.

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

Читать далее

Zod-valid. Безопасная валидация API данных

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

Zod-valid — это Typescript библиотека, зависимая от другой известной библиотеки zod, для безопасной валидации API данных. API редко гарантирует идеальные данные: поля могут быть пропущены, типы не совпадать, структуры меняться. Без проверки этих данных приложение рискует вызвать runtime-ошибки или ломать бизнес-логику. Валидировать данные заранее — значит обеспечить предсказуемое поведение и защитить приложение от неожиданных значений.

Читать далее

Вам больше не нужен JavaScript

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

Команда JavaScript for Devs подготовила перевод статьи о том, как CSS и HTML могут заменить значительную часть JavaScript. Автор делится взглядом на веб как на искусство, показывает возможности современных фич CSS — от вложенности и @starting-style до динамических viewport-единиц, — и доказывает, что сайты могут быть быстрыми, красивыми и интерактивными даже без JS.

Читать далее

Пишем переиспользуемые инпуты для реактивных форм с ControlValueAccessor + NgControl/Injector

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

ControlValueAccessor - это то, что отделяет профессиональную дизайн‑систему от набора костылей. Но как грамотно связать его с состоянием контрола (invalid, touched), не создав циклических зависимостей? Эта статья - не просто «ещё один туториал». Это пошаговое руководство по созданию универсального инпута на современном стеке: SignalsOnPush и безопасный инжект NgControl. Разбираем раз и навсегда.

Освоить CVA раз и навсегда

Как я стал официальным переводчиком книги издательства O'Reilly про Web Audio API

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

Хочу поделиться своим необычным достижением: я стал официальным переводчиком книги издательства O’Reilly. Я перевёл на русский язык книгу Бориса Смуся Web Audio API (O’Reilly, 2013). В процессе работы над собственным образовательным проектом на тему синтеза и обработки цифрового звука, я начал изучать API и наткнулся на эту книгу на английском языке. Сначала я просто её конспектировал, но полезной информации было так много, что постепенно мои конспекты превратились в полноценный перевод. Тогда у меня появилось желание довести работу до конца — чтобы у русскоязычных разработчиков тоже был доступ к этим знаниям. В итоге я смог получить официальное разрешение на публикацию перевода от главы отдела по правам издательства O’Reilly и делюсь переводом с вами.

Читать далее

Leaflet, роутинг и тонна JavaScript: создаем свой планировщик маршрутов с нуля

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

Всем привет! Я, как и многие здесь, не только программист, но и большой любитель активного отдыха. Велосипед, походы, горы — все это требует тщательного планирования. И хотя существует множество отличных сервисов, мне всегда хотелось чего-то большего: платформы, которая объединяла бы в себе гибкий инструмент для создания маршрутов, базу знаний о интересных местах и сообщество единомышленников.

Так я начал в одиночку создавать The Peakline — свой большой проект для аутдор-энтузиастов. Одной из центральных и самых сложных частей этой системы должен был стать планировщик маршрутов. Я решил сделать его максимально функциональным и открытым, чтобы он стал витриной возможностей всего проекта.

Читать далее

Подставляем TOTP в Chrome c помощью Yubikey

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

Надоело каждый раз подставлять TOTP на сайтах и у вас есть yubikey? Тогда добро пожаловать под кат. Поделюсь самописным расширением, которое позволяет автоматизировать эту рутину.

Читать далее

Nextjs SSR vs SSG. Приготовить заранее или испечь по заказу? Гайд по рендерингу для пиццерий и разработчиков

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

Cowabunga, друзья!

На связи Игорь, frontend разработчик компании fuse8. Даже если вы не застали легендарный мультсериал 90-х, вы наверняка слышали о четырех черепашках-мутантах в цветных банданах, которые мастерски владеют мечом, нунчаками, парой сай и бо… и которые без ума от пиццы. Но проходят дни, пролетают года и вот уже Шреддер повержен, Крэнг изгнан, и что остаётся делать нашим уже далеко не подросткам мутантам-черепашкам-ниндзя. Правильно! Открывать свою пиццерию. Казалось бы — идеальный план, однако управление пиццерией — это не менее сложное задача, чем битва с силами зла.

Так их одержимость пиццей превратилась в идеальную метафору для главного вызова в современной веб-разработке: как мгновенно накормить «голодных» пользователей свежим контентом, не заставляя их томиться в ожидании у экрана? И здесь наша задача, как «разработчиков-поваров» — выбрать правильную стратегию готовки, чтобы не подвести своих клиентов в решающий момент.

Читать далее

Как мы вшили нагрузочное тестирование в CI/CD, чтобы не хоронить фичи в проде глубокой ночью

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

Привет Хабр! Я Дима, DevOps-инженер в IT-компании.

Эпик-фейлы бывают разные. Можно забыть закоммитить config.json. А можно так упаковать новый эндпоинт, что всё апи ляжет костьми в час-пик и будет тихо плакать под лавиной реквестов. Ручные нагрузочные тесты — это как проверять тормоза на уже летящем с горы автомобиле. Сегодня говорим о том, как автоматизировать эту магию — вшивать проверку производительности прямо в CI/CD, чтобы не краснеть перед продом и спокойно спать по ночам.

Запускайте свои пайплайны, щупальцы в руки — погнали!

Читать далее

Напердолил целую игру

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

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

Старый добрый монохромный экран, тетрис, мультиплеер и редактор карт для каждого. С другой стороны — всё на канвасе, с вручную отрисованными пикселями, без всяких ассетов и движков. Python на бэке, PostgreSQL для карт и Redis для игровых комнат. Обо всём этом — в статье.

Читать далее

Как мы обманули Mozilla и почти взломали коллег

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

Привет, Хабр!  Я Ксюша, младший специалист по безопасности конечных устройств в Selectel. Мы с командой ежегодно проверяем наших сотрудников на внимательность с помощью фишинг-тестов. В этот раз решили отойти от формулы привычного фишинга и сделать что-то новое. Написали браузерное расширение на JavaScript, убедили Mozilla  в своей честности, запустили весьма правдоподобную рассылку для сотрудников и немного поиграли на чувствах тех, кто верит, что ИИ будет работать за нас. Подробности под катом!

Читать далее

Выжимка самого полезного о библиотеке Motion для React из англоязычной документации

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

Когда я начал разбираться с Motion для React, то оказалось, что свежих обзорных статей почти нет — нашёл только несколько старых постов про framer-motion. Поэтому я решил написать свой обзор: перевёл и разобрал документацию (ссылки в конце), попробовал библиотеку в деле и собрал всё в одном месте.

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

Читать далее

Почему браузеры ограничивают JavaScript таймеры?

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

Команда JavaScript for Devs подготовила перевод статьи о том, почему браузеры намеренно замедляют выполнение setTimeout и других таймеров. Автор объясняет, как это связано с защитой пользователей, рассказывает о своём бенчмарке разных подходов (setTimeoutMessageChannelscheduler.postTask) и делает прогноз, какие таймеры будут использоваться в будущем.

Читать далее

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

Push-Notifications в PWA и браузере: полная реализация без сторонних сервисов

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

Полная реализация push-уведомлений в PWA без сторонних сервисов

Разбираем архитектуру: Service Worker, Push API, VAPID ключи и Notifications API. Показываем, как настроить PWA для работы на всех платформах, включая iOS.

В статье:
• Теория всех компонентов системы
• Готовый код Service Worker и клиентской части
• Backend на Express с отправкой уведомлений
• Настройка PWA для iOS 16.4+
• Детекция платформы и предложение установки

Все работает из коробки! 🎯

Читать далее

Создание интерактивного макета. Задача упаковки кругов в круг. Метод отжига

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

Я разработала интерактивный макет для создания композиций цветов. Проблема свелась к задаче упаковки кругов в круг и её автоматизированному решению методом отжига. Расскажу теорию и математически обосную практику с визуальными пояснениями.

Читать далее

Big O

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

Нотация Big O («О» большое) — это способ описания производительности функции без измерения времени ее выполнения. Вместо того, чтобы засекать, сколько секунд выполняется функция от начала до конца, Big O показывает, как меняется время ее выполнения по мере увеличения размера входных данных. Этот подход помогает понять, как программа будет вести себя при разных объемах входящей информации.

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

Читать далее

Как настроить пиксель в Telegram Ads: отслеживаем заявки, конверсии и действия пользователей на сайте

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

Теперь в рекламном кабинете Telegram Ads появился пиксель - инструмент для отслеживания действий пользователей на сайте после перехода по рекламе. Это значит, что можно:

видеть заявки, покупки и другие действия прямо в Telegram Ads,

автоматически считать CPL и CPA,

больше не сводить вручную статистику из Метрики, GA4 и других систем.

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

Отследить все заявки с TG рекламы!

Кэширование DNS в NodeJS

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

Команда JavaScript for Devs подготовила перевод статьи о том, как кэширование DNS в NodeJS помогает ускорить работу приложений. На примере инфраструктуры крупного онлайн-сервиса автор показывает, как незаметные на первый взгляд DNS-запросы могут превратиться в узкое место и как простое решение на уровне кода способно повысить стабильность и отклик системы.

Читать далее

Один из крупнейших взломов NPM: более 18 пакетов были скомпрометированы

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

8 сентября в 13:16 UTC система мониторинга Aikido зафиксировала подозрительные действия: в npm начали публиковаться новые версии популярных пакетов, содержащие вредоносный код.

Читать далее

SRE на Frontend`е

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

На Хабре уже есть статьи про качество кода (линты, хинты, хорошие практики), стратегии обработки ошибок (feature toggle, request retry) и UX/UI их отображения.

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

Читать далее

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