Обновить
227.14

JavaScript *

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

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

Как я устал путаться в вакансиях на hh.ru и написал расширение для Chrome

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

Маленькое open source-расширение для Chrome, которое делает поиск работы на hh.ru удобнее: выделяет уже просмотренные вакансии и резюме, чтобы не тратить время на дубли.

Читать далее

Как я шахматного бота писал

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

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

Читать далее

Оцениваем «естественность» изображений по первой цифре

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

Cowabunga, друзья!

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

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

Читать далее

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

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

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

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

Читать далее

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

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

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

Читать далее

Big O

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

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

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

Читать далее

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

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

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

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

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

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

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

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

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