Веб-разработка *

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

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

Решаем общую проблему всех команд — перегруженность задачами при ограниченных ресурсах на примерах:

Учимся интуитивно отделять важное от второстепенного.

Решаем общую проблему всех команд — перегруженность задачами при ограниченных ресурсах на примерах:

Составляем беклог продукта. 

Планируем спринт.

Решаем личные задачи.

Сравниваем MoSCoW другими методами, RICE, ICE, Kano и Buy a Feature.

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

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

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

На днях обнаружил, что в русскоязычной сети нет перевода этой раритетной статьи, которая положила начало разработке самого известного архитектурного паттерна MVC. Восполняем пробел.

Содержание этого документа интересно и с исторической точки зрения (а как там “деды” воевали программировали), так и в плане уточнения некоторых современных представлений об этом паттерне и программной архитектуре в целом.

Иллюстрации по максимуму сохранены как в оригинале. По ходу есть сноски с подробностями и ассоциации редактора в конце.

СУЩНОСТЬ-МОДЕЛЬ-ВЬЮ¹-РЕДАКТОР

на примере из системы планирования²

Кому: LRG³

От: Тригве Реенскауг⁴

Файл: [IVY]<Reenskaug>SMALL>TERMINOLOGY2.DOC

Дата: 12 мая 1979⁵

Цель данной заметки - исследовать метафоры thing-model-view-editor через последовательный набор примеров. Все примеры взяты из моей системы планирования и иллюстрируют вышеуказанные четыре понятия. Все примеры были реализованы, хотя и не в рамках чистой структуры классов, описанной здесь. Метафоры соответствуют real world-Model-view-Tool, предложенным в заметке о требованиях DynaBook ([Ivy]<Reenskaug>DynaBook.doc).

THING (СУЩНОСТЬ)

ОПИСАНИЕ ТЕРМИНА

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

ПРИМЕР: КРУПНЫЙ ПРОЕКТ

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

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

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

Тема безопасности в эпоху LLM всплывает всё чаще. И речь идёт не о самой модели — а о пользователях, которые доверяют ей без оглядки.

Сегодня многие разработчики и админы спрашивают у GPT не только совета, но и готовые команды. Результат выглядит правдоподобно — и команда уходит в терминал. Иногда прямо на прод.

Обзор развития проекта Boson PHP — платформы для создания десктопных приложений на веб-технологиях. Новый сайт, обновленная документация, веб-компоненты (главная фишка проекта), и технические особенности разных ОС.

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

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

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

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

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

Всем привет! Я Артём Седых, ведущий разработчик и тимлид проекта банковского сопровождения. Наш сервис — 8-летний монолит на PHP с командой из 39 человек. В цикле статей рассказываю об опыте разработки и внедрения альтернативы pinba: гибкого инструмента мониторинга, который позволяет увидеть живую систему как на ладони и понять, из‑за чего именно проседают определенные экшены. Сегодня, в продолжение первой статьи, закрываем архитектурную часть — поговорим об отправке и хранении метрик. А главное, перейдём к самому интересному: получившимся дашбордам Grafana. На конкретных примерах покажу, какие проблемы удалось обнаружить и какие рекомендации по оптимизации можно извлечь из каждого элемента.

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

👉 github.com/tcse/php-TMH

В начале 2025 года мне в голову пришла идея запустить свой проект.

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

Я тоже несколько месяцев жил именно так. И даже радовался тому, что вкладываю в это свои собственные деньги.

Но однажды наступает момент, когда понимаешь: всё сделал неправильно. Сил и желания начинать с нуля уже нет. Ты ловишь себя на мысли, что будешь счастливее всего просто бросив всё это. И бросаешь.

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

Ситуация: пишешь код на 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-проектов

«Сторонние куки больше не нужны», — заявили разработчики Google Chrome и в январе 2024 года начали принудительно отключать их у каждого сотого пользователя браузера. Однако уже в июле последовало осторожное: «Ну, с другой стороны...» — и отмена кук была отменена.

Многие даже не заметили, что произошло. Но на самом деле речь шла о том, как должен работать интернет в целом: отказ затронул бы почти каждый сайт из тех, что ты посещаешь,%USERNAME%.

На связи Артём из команды Яндекс Браузера. В этой статье расскажу о том, как технологии, изначально созданные для упрощения жизни, со временем стали инструментом манипуляций, и о контрасте разных подходов к борьбе с этим. Поговорим о масштабных системных решениях и простых прикладных методах, сравним их эффективность, сложности внедрения и неожиданные подводные камни. И заодно разберёмся, почему проблема трекинга — это не только про сторонние куки.

Сегодня мы разработаем с 0 собственный геймтон и запустим соревнования среди хабравчан и всех желающих just for fun. А также дадим возможность запустить свой геймтон локально по своим правилам Под катом вас ждет разработка геймтона на стеке nodejs + prisma + vuejs + fastify. А также пример разработки фулстек приложения с различными тонкостями построения API.

Привет, Хабр!

Общаясь с фронтендерами, я заметил, что многие не знают новые классные возможности HTML и CSS. Мне от этого грустно. Надо это исправлять!

Я подумал и составил список, состоящий из наиболее рекомендуемых мной новых фишек. Они поддерживаются в большинстве современных браузеров. Решают старые проблемы. Упрощают разработчикам жизнь. В общем суперполезные!

И да, это поверхностный обзор. Я не буду рассказывать все нюансы. Моя цель — проинформировать вас о новых возможностях. Дальше вы уже сами решите, что изучать детальнее.

Больше не буду тянуть. Давайте посмотрим, что я вам подготовил.