JavaScript *

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 В этой серии мы поговорим интеграции с mock service worker (msw). Так же опишу, что пытался внедрить в борьбе за живучесть, что из этого получилось, а что — не очень.

На выходных вышли сразу две громкие ИИ-новости, которые захотелось пощупать руками.

Во-первых, на OpenRouter тихо появились две стелс-модели: Sonoma Dusk Alpha и Sky Alpha. Обе заявлены с окном контекста 2 млн токенов, поддержкой изображений на входе и параллельным вызовом инструментов, и сейчас бесплатны; Dusk заявляется как быстрая модель на каждый день, Sky - как максимально интеллектуальная для сложных задач.

Во-вторых, z.ai запустили API совместимый с Claude Code с доступом к своей флагманской модели GLM-4.5 по за $3/мес (план GLM Coding Lite) — с лимитом ~120 промтов на каждые 5 часов. Есть и Pro за $15/мес (~600 промтов/5 ч). Эти планы работают только внутри инструментов кодинга вроде Claude Code (в веб-чате их не включают).

Ну как не потестить? Потестим.

Без сомнений, JavaScript — крайне популярный язык программирования. И разработчики постоянно создают обновления, которые позволяют писать код проще, короче и понятнее. Одним из таких инструментов стала деструктуризация — способ получения данных

Привет, Хабр! Меня зовут Александр Дудукало, я автор базового курса по JavaScript. В этом тексте на примерах разберемся, как работает синтаксис и как деструктуризировать массив. Подробности под катом!

Как и многие начинающие разработчики, я давно мечтал сделать свой первый pet-проект — чтобы почувствовать себя «настоящим программистом» и перестать бояться собеседований. В итоге решился: буду писать веб-приложение для личных заметок.

На самом деле я не совсем новичок. Раньше у меня уже были попытки освоить разные языки программирования, но дальше пары строчек кода дело редко заходило. Умение «гуглить правильно» и искать ответы на StackOverflow пока давалось тяжело, поэтому довести что-то до результата было сложно.

В этот раз я решил пойти по трендам и подключить в процесс AI. Спасибо Хабру, что в нужный момент подкинул статью про Koda. С неё и начался мой эксперимент. А команде Koda хочу выразить респект за то, что всё бесплатно.

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

Предыстория

Я приглашаю вас в путешествие, но сначала нужно расставить декорации. Представьте, что вы работаете в некой компании X, и один из ваших сервисов на Next.js крякнулся. Ну и поскольку это Next.js, то мы понятия не имеем, что конкретно произошло, так как логирование процессов по умолчанию включено только при разработке.

И теперь перед нами квест — найти и настроить механизм логирования для продакшена. Будет нелегко, но нам как бы не привыкать.

По мере роста фронтенд-приложений управление пользовательскими взаимодействиями становится все более важным. Добавление обработчика событий на каждый интерактивный элемент — плохая практика: это усложняет код, увеличивает расход памяти и снижает производительность. Здесь на помощь приходит делегирование событий (event delegation).

Каждая интерактивная веб-страница опирается на Document Object Model (DOM) и ее систему событий. Когда мы нажимаем кнопку, вводим текст в поле или наводим курсор на изображение, возникает событие. Но оно не происходит само по себе — событие проходит по дереву DOM в процессе, который называется распространением события (event propagation).

Продолжение статьи о safe-fetch — библиотеке без try/catch для HTTP.

Через день после первой публикации произошла эволюция: stable релиз 1.0 + экспериментальный адаптер для React Query.

Рассказываю, как фидбек сообщества превратил простую обертку в экосистему с монорепо.

Показать данные красиво и понятно бывает сложнее, чем написать саму бизнес-логику. Нужно не просто вывести цифры, а сделать так, чтобы ими было удобно пользоваться: масштабировать, сравнивать, фильтровать. Можно ли совместить мощь, интерактивность и гибкость в одной библиотеке визуализации — и при этом без боли интегрировать ее в React? Спойлер: да, и это ECharts.

Привет, Хабр! Меня зовут Ольга Китова, я разработчик в IBS. Эта статья — про ECharts, один из самых сильных и гибких инструментов для визуализации данных. Я покажу, какие возможности дает эта библиотека, как она устроена «под капотом», в чем ее плюсы и минусы и как использовать ECharts в React-приложениях, на практике.

Telegram Music Hub (TMH) — это open-source решение, которое превращает ваш Telegram-канал в единое цифровое пространство для музыки, блога и сообщества.
И всё это — на самом обычном виртуальном хостинге, без баз данных, без сложных зависимостей, без дорогих серверов.

👉 github.com/tcse/php-TMH

Всем привет! На связи Сергей, ведущий фронтенд-разработчик в команде привлечения Центрального университета. Расскажу историю, как валидировал ссылку и попал впросак. Я использовал браузерный URL API для своих целей и думал, что знаю, как он работает. И прежде чем кидать в меня помидоры, как в разработчика, который не читает документацию, дайте шанс рассказать свою историю.

Плохой URL путает пользователей, хороший — работает как швейцарский нож. Разбираем анатомию, правила построения иерархичных путей, мощь Query-параметров и истинное назначение Hash. Практика на JavaScript и чеклист готовых решений.

С ростом сложности фронтенда разработчики начали уделять больше внимания архитектуре. Кто-то предпочитает «чистую», кто-то — её производные, например, FSD. В той или иной степени этот вопрос волнует многих. В данной статье я предлагаю присмотреться повнимательнее к аспекту, который часто остаётся в тени при обсуждении архитектуры, — к маршрутизации.

Давайте вспомним как мы строим роутинг в наших приложениях. В примере ниже – react-router-dom, но в других фреймворках/библиотеках все примерно также: