Обновить
205.32

JavaScript *

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

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

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

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

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

Читать далее

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

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

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

Читать далее

SRE на Frontend`е

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

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

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

Читать далее

Как я начал писать unit-тесты для Vue. Part deux: год спустя…

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

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

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

Читать далее

Claude Code за $3/месяц и 2 новые «стелс» модели: потестил за вас

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

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

Во-первых, на 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 (в веб-чате их не включают).

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

Читать далее

Google Chrome исполнилось 17 лет: история браузера и его будущее

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

Команда JavaScript for Devs подготовила перевод статьи Адди Османи к 17-летию Google Chrome. За эти годы браузер прошёл путь от «минималистичного проекта с комиксом» до полноценной платформы для приложений с ИИ. Скорость, безопасность, стабильность и простота остаются его основными принципами, а впереди — новая эра с локальными AI-API и встроенным ассистентом Gemini.

Читать далее

Деструктуризация в JavaScript

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

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

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

Читать далее

Пет-проект с AI-помощником: мой первый опыт вайбкодинга

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

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

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

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

Читать далее

Next.js меня окончательно достал

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

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

Предыстория

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

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

Читать далее

Делегирование событий в JavaScript: когда обычного всплытия недостаточно

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

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

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

Читать далее

Safe-fetch 1.0: от библиотеки к экосистеме за 72 часа

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

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

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

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

Что нового в релизе

Как работать с ECharts в React: от простого графика до интерактивного дашборда

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

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

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

Читать далее

TMH: как создать музыкальный хаб на PHP, Telegram и виртуальном хостинге

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

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

👉 github.com/tcse/php-TMH

Читать далее

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

Не доверяй и проверяй, или как я валидировал ссылку в JavaScript

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

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

Читать далее

Искусство проектирования URL: Роутинг, Query и Hash параметры

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

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

Читать далее

It's a match

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

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

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

Читать далее

Настройка ESLint и Prettier в веб-приложении на Next.js и TypeScript

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

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

В данной статье мы рассмотрим пошаговую настройку ESLint и Prettier на примере нашего веб-приложения, построенного на Next.js и TypeScript.

Читать далее

Обработка исключений на JS – неудобная, но не безнадежная

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

Ситуация: пишешь код на JS, хочешь обработать исключение, пробрасываешь throw, ловишь его с помощью try‑catch. Но добавим нюанс: пусть это нужно сделать для setTimeout. Эта функция использует окружения браузера — не JS‑функция, асинхронная.

Загвоздка: catch не сможет поймать ошибку.

Этот пример — одна из нескольких особенностей JS, из‑за которых я считаю обработку исключений «из коробки» на этом языке неудобной. Но есть и хорошие новости — для JS существуют альтернативные способы работы с исключениями, с которыми дела обстоят получше; например, паттерн «контейнерный тип».

Давайте разбираться.

Читать далее

Календарь домашних тренировок — 10 улучшений в пет-проекте

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

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

Самим приложением пользуюсь регулярно. На главной странице для незарегистрированных пользователей в качестве примера как раз показывается моя статистика. Помимо меня есть ещё 53 зарегистрированных пользователя с подтверждённым email.

https://github.com/dergunovs/fit - исходный код приложения
https://vkvideo.ru/playlist/15313879_11 - видео про разработку

Frontend: Typescript, Vite, Vue, Tanstack Query, Vitest, Vue I18n, Tauri
Backend: Typescript, Fastify, Mongoose, MongoDB, Swagger

Публикация приложения в RuStore

С помощью Tauri добавил генерацию формата APK. Зарегистрировался в RuStore в качестве разработчика, заполнил поля с описанием, сделал скриншоты. Модерация прошла очень быстро. Теперь приложение можно удобно скачивать и обновлять. Сам APK файл весит около 10 мегабайт. За 4 месяца с момента публикации в RuStore оттуда было 65 установок приложения.

Читать далее

Хватит писать try/catch вокруг fetch: история о том, как я устал ловить ошибки

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

Каждый фронтендер знает эту боль: пишешь запрос через fetch - и автоматически добавляешь try/catch. Где-то ловишь TypeError, где-то 500-й статус, где-то подвисший запрос с AbortController. В итоге половина кода в проекте - это обработка ошибок, а не бизнес-логика.

Я прожил с этим годами. Чем больше становился проект, тем больше росла копипаста: таймауты, ретраи, проверки на res.ok, костыли для разных браузеров. Одно и то же, снова и снова.

И вот в какой-то момент я понял: проблема не в том, что ошибки случаются. Проблема в том, что сам fetch вынуждает нас ловить их вручную, каждый раз, в каждом запросе.

Так появилась библиотека @asouei/safe-fetch. Маленькая (3kb), без зависимостей, но с тем, чего нет у самого fetch: общий таймаут, умные ретраи, нормализованные ошибки и поддержка Retry-After.

🌟 Библиотека добавлена в Awesome TypeScript — один из крупнейших мировых списков лучших TypeScript-проектов

Как я решил проблему

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