VueJS *

Каждый, кто использует Vue для разработки, так или иначе встречается с необходимостью выполнить какое‑либо побочное действие при изменении значений, и сразу в голове возникает мысль о двух методах‑наблюдателях — Watch и WatchEffect.

Как работают эти 2 метода можно узнать из великолепной документации Vue, а в этой статье мы посмотрим на примеры самых часто используемых компонентов вместе с наблюдателями — по 2 компонента на каждый метод — а заодно вы сможете больше понять принцип их работы.

По ходу статьи также будут приведены некоторые полезные библиотеки Vue, которые часто используются в разработке.

Важность надежной обработки запросов в оффлайн-режиме невозможно переоценить, особенно для приложений, которые должны функционировать и в отсутствии интернет-соединения. Workbox - это мощный инструмент для управления Service Worker в браузерах, он как раз призван решать подобную задачу при помощи соответствующего плагина, но поддержка Background Sync API не универсальна. В этой статье я покажу, как расширить Workbox, чтобы Background Sync корректно работал даже на платформе iOS/Safari.

Wails - это легковесный фреймворк, предназначенный для создания кросс-платформенных GUI приложений рабочего стола на golang и стандартных веб технологиях (Svelte, React, Preact, Vue, Lit, Vanilla JS). Ближайшие аналоги это естественно Electron (JS), Tauri (Rust), хочется добавить Qt (С++), но это уже другой уровень. Сразу скажу, что Wails не идеален, имеет множество ограничений и в целом не подойдёт для чего-то крупного, Tauri к примеру более зрелый проект, больше функций, быстрее развивается, больше и живее сообщество, но это уже на rust, а это не наш стэк.

Еще в бытность джунни, я наткнулся на милейшую интерактивную обучалку по селекторам CSS: CSS Diner. Кто не знает — обязательно посмотрите, эстетический кайф гарантирован. Прошел ее минут за 15 на одном дыхании и подумал: а почему бы не сделать что‑то подобное с аналогичной механикой «допиши правильное слово в пропуск в бойлерплейте», только по другой теме? Сходу на ум ничего не пришло, но идею я запомнил.

Три года спустя я решил изучить React, написав на нем какой‑нибудь пет‑проект (имхо, лучший способ изучить новую технологию/язык). Тут‑то я и вспомнил про CSS Diner. Осталось только найти подходящую тему, где эта механика бы зашла.

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

Web Vitals — набор метрик от Google, которые показывают, насколько быстро и стабильно загружается ваш сайт, как плавно отображается контент и насколько оперативно интерфейс реагирует на действия пользователя.

В этой статье вы найдёте пошаговую инструкцию по интеграции Web Vitals в проект, отправке метрик в Яндекс.Метрику и настройке отчётов для оперативного мониторинга. Благодаря этому вы сможете своевременно выявлять и устранять «узкие места» в работе приложения ещё до появления жалоб пользователей.

Вообще, я менеджер.

Но когда-то писал код и всегда любил это занятие. Серьезно прогал мобильные приложения, и даже заработал за один из ответов на SO больше 100 звездочек.

Но с тех пор прошла куча времени.

И последнее время меня вновь увлекла эта тема. А как она может увлечь современного человека, измученного миллиардом фреймворков и отставшего от прогресса лет на 15?
Конечно-же курсором и вайб-кодингом.

И я начал кодить.

Собрал несколько ботов, потом замахнулся на CMS. Сейчас даже делаю свою тулзу для запуска LLM-пайплайнов с импортом их из n8n.

Но в процессе всего этого неизменно сталкивался с двумя проблемами

1) Cursor (и брат его Windsurf) паршивейшим образом обходится с нетипизированными и слабо-типизированными языками. Изобретает названия переменных, меняет их по ходу, и вообще, забивает на это огромный и толстый... За пределами этого кодит он неплохо. Но данная штука лично у меня порождает 90% багов.
2)...

Фронтендеры, постоянно в поиске идеальной архитектуры. Слои, фича-слайсы, атомарный дизайн, фрактальность... Все эти подходы имеют право на жизнь. Но сегодня я хочу поделиться способом мышления, который сделает любой ваш код лучше, а любую архитектуру – яснее.

Сегодня мы продолжим разбирать базовые концепции реактивности, изложенные Райаном Карниато (Ryan Carniato), автором SolidJS. Если ранее мы затрагивали производные и их планирование, то сегодня разберём более сложную тему — асинхронность в контексте реактивного программирования. Эта концепция добавляет новый уровень сложности, поскольку требует учёта динамических процессов, выходящих за рамки синхронных операций.

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

В этой статье мы проведём подробный анализ современных практик frontend-разработки, сравним состояние React и Vue 5 лет назад и на текущий момент, а также попробуем спрогнозировать их перспективность в обозримом будущем с учётом развития LLM моделей и AI агентов. Посмотрим их экосистемы (Next.js и Nuxt, Redux и Pinia), использование в бэкенде, популярность решений в энтерпрайзе, а так же понимание разработчиками и LLM моделями.

👋 Привет, Habr!

Вы когда-нибудь пытались найти качественный open-source клон Pinterest — с real-time функционалом, полноценной архитектурой, удобным UI и современной технологической основой? Я — да. И не нашёл. Поэтому решил создать свой.

Представляю вам Pinterest Clone — мой pet-проект, над которым я работал в одиночку 4 месяца, чтобы воссоздать не просто копию, а полнофункциональную платформу с реальным пользовательским опытом, максимально приближённым к оригиналу.

Пытаясь подражать слогу классика, можно сказать, что "все чаты в целом одинаковы, но каждый реализует что-то свое".

так ли это? посмотрим.

TL, DR: далее рассказываю, что мы делаем свой UI набор компонентов для чата, даю ссылки и приглашаю присоединяться к проекту.

Книга «Изучаем Vue: основные концепции и практические паттерны для современных и масштабируемых пользовательских интерфейсов» — это сжатое практическое руководство по Vue.js, ориентированное на уже практикующих разработчиков, работающих над созданием интерфейсов. Автор книги, Майя Шавин — старший инженер-программист в Salesforce (ранее в Microsoft), специализирующаяся на JavaScript и frontend-фреймворках. Наличие примеров и акцента на переиспользуемость компонентов дает разработчикам подсказки как строить масштабируемые и поддерживаемые интерфейсы.

***

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

Сколько раз вы сталкивались с ситуацией, когда сделали аккуратный Vue-компонент на <script setup>, вроде всё красиво, а потом... вам внезапно нужно из родительского компонента сфокусировать инпут, сбросить фильтр, открыть модалку, валидировать форму. Казалось бы, задача тривиальная, но script setup не даёт просто так вынуть методы наружу.

Сегодня рассмотрим одну из самых неочевидных, но крайне полезных возможностей Vue 3 — функцию defineExpose().

В декабре 2023 я впервые задумался о похудении. Тогда при росте 194 см я весил 116 кг. Раньше я только играл в мини-футбол, вообще не следил за едой и даже не заглядывал в спортзал.

Начал нормально питаться, поменял привычки, добавил силовые тренировки, к сентябрю 2024 скинул около 30 кг. Это был рекорд по минимальному весу.

Сейчас, через полгода, вешу 89 кг. Оказалось, что нарастить мышцы намного труднее, чем избавиться от жира. Надеюсь, что эти +3 кг в основном мышцы. Почему так: теперь могу подтянуться 11 раз вместо 9, и на фото видны изменения — делаю такие сравнения каждые пару месяцев.

В первой части мы построили бэкенд на FastAPI, Aiogram, Redis и Centrifugo, заложив основу для анонимного чата в Telegram. Теперь пришло время развернуть фронтенд и создать стильный и отзывчивый интерфейс с использованием VueJS 3 в формате Telegram MiniApp.

В этой статье мы:

• Разработаем интерактивный UI с фильтрами поиска, анимациями загрузки и real-time чатом.
• Настроим мгновенный обмен сообщениями через Centrifugo без лишних запросов к серверу.
• Интегрируем монетизацию для заработка на рекламе в приложении.
• Выполним деплой на удаленный сервер и подготовим проект к продакшену.

Если вы хотите создать быстрый, удобный и монетизируемый анонимный чат в Telegram, который работает без задержек и перезагрузок, — эта статья для вас!

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

Если вы тоже ищете способы сделать свой код чище и поддерживаемым, или просто хотите обсудить разные подходы к архитектуре, — добро пожаловать в комментарии. Давайте разбираться вместе!

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

В этой статье мы продолжим разбирать базовые концепции реактивности на основе идей и примеров, изложенных Райан Карниато (Ryan Carniato), автором SolidJS. Сегодня рассмотрим, как в реактивных системах планируется выполнение изменений производных значений.

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