Плохой URL путает пользователей, хороший — работает как швейцарский нож. Разбираем анатомию, правила построения иерархичных путей, мощь Query-параметров и истинное назначение Hash. Практика на JavaScript и чеклист готовых решений.
С ростом сложности фронтенда разработчики начали уделять больше внимания архитектуре. Кто-то предпочитает «чистую», кто-то — её производные, например, FSD. В той или иной степени этот вопрос волнует многих. В данной статье я предлагаю присмотреться повнимательнее к аспекту, который часто остаётся в тени при обсуждении архитектуры, — к маршрутизации.
Давайте вспомним как мы строим роутинг в наших приложениях. В примере ниже – react-router-dom, но в других фреймворках/библиотеках все примерно также:
Когда команда разработчиков начинает активно расти, неизбежно возникают вопросы консистентности кода. Разные стили написания, различные подходы к форматированию и отсутствие единых стандартов могут серьезно замедлить разработку и усложнить поддержку проекта.
В данной статье мы рассмотрим пошаговую настройку ESLint и Prettier на примере нашего веб-приложения, построенного на Next.js и TypeScript.
Ситуация: пишешь код на JS, хочешь обработать исключение, пробрасываешь throw, ловишь его с помощью try‑catch. Но добавим нюанс: пусть это нужно сделать для setTimeout. Эта функция использует окружения браузера — не JS‑функция, асинхронная.
Загвоздка: catch не сможет поймать ошибку.
Этот пример — одна из нескольких особенностей JS, из‑за которых я считаю обработку исключений «из коробки» на этом языке неудобной. Но есть и хорошие новости — для JS существуют альтернативные способы работы с исключениями, с которыми дела обстоят получше; например, паттерн «контейнерный тип».
Давайте разбираться.
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 установок приложения.
Каждый фронтендер знает эту боль: пишешь запрос через fetch - и автоматически добавляешь try/catch. Где-то ловишь TypeError, где-то 500-й статус, где-то подвисший запрос с AbortController. В итоге половина кода в проекте - это обработка ошибок, а не бизнес-логика.
Я прожил с этим годами. Чем больше становился проект, тем больше росла копипаста: таймауты, ретраи, проверки на res.ok, костыли для разных браузеров. Одно и то же, снова и снова.
И вот в какой-то момент я понял: проблема не в том, что ошибки случаются. Проблема в том, что сам fetch вынуждает нас ловить их вручную, каждый раз, в каждом запросе.
Так появилась библиотека @asouei/safe-fetch. Маленькая (3kb), без зависимостей, но с тем, чего нет у самого fetch: общий таймаут, умные ретраи, нормализованные ошибки и поддержка Retry-After.
🌟 Библиотека добавлена в Awesome TypeScript — один из крупнейших мировых списков лучших TypeScript-проектов
Всем привет! Я являюсь создателем распределённого поисковика rats-search на базе DHT ( GitHub ). Его принцип работы довольно прост: поисковик собирает торренты у всех участников сети и формирует большую распределённую базу для поиска, включая метаданные (например, описания и прочую информацию).
В этой статье я хочу рассказать о своей новой библиотеке для построения распределённых приложений (p2p), где знание IP-адресов участников не обязательно, а поиск ведётся через различные протоколы — DHT, mDNS, peer-exchange и другие. Думаю, с учётом постоянных неприятностей, которые происходят вокруг, это может оказаться полезным ;-).
В этой статье, Я рассказываю, как сделал приложение для сопоставления резюме с вакансиями, используя tRPC, TypeScript и Google Vertex AI. Проект принимает PDF-резюме и описания вакансий, извлекает из них текст, применяет базовое NLP для выявления навыков, а затем обращается к Gemini 1.5 Flash для более глубокого анализа. По ходу статьи я объясняю, почему tRPC показался мне быстрее и чище, чем REST или GraphQL для MVP, показываю примеры кода из репозитория и обсуждаю как преимущества, так и ограничения такого подхода.
Недавно я провёл небольшой эксперимент: проверил, как разные модели от OpenAI справляются с одной и той же задачей — создать красивую симуляцию «жидкостей в стакане» с помощью HTML5 Canvas и JavaScript.
На словах всё звучит просто, но на деле это проверка и кода, и физики, и UX.
Результаты получились очень показательные, а кое-где даже удивительные. Делюсь наблюдениями и видео 👇
Рассуждаю о проблеме регулярного создания файлов и о том, как поддержать архитектуру и автоматизировать рутину.
Написал утилиту на Go для генерации структур файлов по шаблонам, которая, думаю, будет полезна многим.
Записки одного QA. Вспомогательная часть автотестов: советы и практики (Playwright + Typescript)
В статье рассматриваются подходы к организации вспомогательной части для автотестов на Playwright: структура проекта, Page Object, helpers, constants и шаги. Приведены практические примеры того, какие решения помогают поддерживать автотесты читаемыми и масштабируемыми, а каких стоит избегать. Материал будет полезен QA-инженерам и разработчикам, начинающим работать с Playwright.
Хочу поделиться компактной функцией для очищения лишних, повторяющихся пробелов и пробельных символов в строках. Не считайте это призывом, но если можно привести строковые данные в красивый вид без лишних хлопот, то почему бы и не воспользоваться. Те, кто не знаком с регулярными выражениями (regular expressions, RegExp, regex), может приоткроет форточку в этот славный и замороченный мир (Регулярные выражения (regexp) — основы)
Привет, Хабр!
Сегодня рассмотрим флаг регулярных выражений v в JavaScript. Флаг поддержан в современных движках и Node 20+, а для старых окружений есть транспиляция через Babel. Начнём с краткой ориентации где это уже работает и почему синтаксис отличается, а потом пойдём в практику.
Привет! Меня зовут Никита, я старший фронтенд-инженер в Ozon Tech и я разрабатываю кабинет рекламодателя. Однажды мы попытались обновить версию Node.js и нашли баг, который затянулся на два года и вовлёк в себя команды Jest, Node.js и V8.
Этот настраиваемый хук особенно полезен в сценариях, где вам нужно обрабатывать вводимые пользователем данные, такие как строки поиска или поля формы, и где вы хотите отложить выполнение действия до тех пор, пока пользователь не закончит вводить текст или взаимодействовать с пользователем. Это также полезно для оптимизации сетевых запросов, гарантируя, что запросы будут отправляться только после того, как пользователь перестанет печатать или выбирать параметры.
Привет, Хабр!
Не раз ловил себя на том, как в код-ревью всплывает одна и та же проблема: часть наших функций синхронные, часть асинхронные, а часть ведут себя как шрёдингеровские коты и делают вид, что синхронны, пока не дотронешься. В итоге в одном месте у нас try/catch, в другом .catch, где-то внезапно падает исключение, а в соседнем модуле молча утекает Promise. С появлением нативного Promise.try стало проще навести порядок и избавиться от разнобоя. Фича прошла процесс стандартизации в TC39 и включена в спецификацию ECMAScript 2026, при этом уже с января доступна в актуальных движках. Можно перестать спорить про обёртку из Promise.resolve().then и получить единый вход для sync/async с нормальной обработкой ошибок.
Привет! Я — Александр Дудукало, автор базового курса по JavaScript. Продолжаем погружение в этот язык — на этот раз поговорим про циклы. Обсудим, зачем они нужны, какими бывают и как с ними работать.
Привет, Хабр! Меня зовут Александр Митин. Я Java разработчик в компании ИТ-холдинг Т1 с 15 летним опытом, из которых последние 5 лет работаю в финтехе. Мой любимый стек — Java Spring. Я хочу рассказать такое AsyncAPI, как работать со спецификациями, какие есть инструменты и поделюсь нашим опытом перехода на подход API First в наших системах.
В прошлой статье я рассмотрел самый простой вариант кастомизации целей, когда мы начинаем собирать не просто факт отправки, например, формы, но и смысл, с какими доп параметрами эта форма отправлялась.
Сегодня рассмотрим вариант, когда события произошедшие уже офлайн, отправляются обратно в онлайн статистику Яндекс Метрики и обогащают ее. Это позволит делать рекламу и собирать аудитории в Яндекс Директе точнее еще на 30-35%
Привет, я Сергей Маркизов, разработчик диджитал-продакшна Далее. В наших проектах часто использую Drizzle — современную, типобезопасную ORM для TypeScript, которая не усложняет базовую задачу: читать и писать данные. В этой статье расскажу, чем библиотека отличается от других и как с ней работать.
