Как стать автором
Поиск
Написать публикацию
Обновить
520.02

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

Делаем веб лучше

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

Создание анонимного чата в Telegram: Бот с MiniApp интерфейсом. Часть 2 — VueJS3 + Centrifugo с монетизацией приложения

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

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

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

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

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

Читать далее

Адаптивная flex-сетка на CSS: разбираем реализацию на атомы

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

Наверное, каждый, кто сталкивался с frontend`ом, хотя бы раз использовал адаптивную flex-сетку на N-ном количестве колонок. В данной статье мы не станем рассматривать область применения такого подхода, его плюсы и минусы, а разберем теорию и напишем собственное решение, с брейкпоинтами и настраиваемым спейсингом!

Данная статья, в первую очередь, будет полезна новичкам, однако надеюсь, что и опытные разработчики найдут в ней что-то интересное. Для упрощения жизни, будем использовать SCSS, продублировав CSS «под спойлер».

Читать далее

Жизненный цикл бина в Spring

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

Если нужно быстро освежить память о жизненном цикле бина в Spring, эта шпаргалка для вас. Здесь коротко и по делу: ключевые этапы — создание, внедрение зависимостей, инициализация, пост-процессинг и уничтожение. Разберем их на понятных примерах, без лишней воды.

Читать далее

Frontend-архитектура, которая работает: как я строю Vue-приложения с минимумом сложностей

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

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

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

Разобраться в архитектуре

Хватит издеваться над чекбоксами

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

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

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

Читать далее

Как мы заработали 2400000 руб на сервисе для создания фотокниг. Наш главный фейл и выводы

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

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

Читать далее

Готовим геотаргетинг на nginx + GeoIP2 и связываем с локализацией в Next.js

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

В этой статье поделюсь быстрым способом настройки геотаргетинга на nginx + GeoIP2 в связке с локализацией Next.js на примере решения реальной задачи.

Вы узнаете как подключить и настроить GeoIP2 к nginx, как приоритизировать и настроить критерии выбора домена и локали, и как подружить это с Next.js

Читать далее

Почему не стоит принимать первый попавшийся оффер джуниору?

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

По итогам голосования под прошлым постом Идеальное рабочее место, эта тема стала наиболее актуальной для обсуждения.
Давайте разберемся, почему джуниору не стоит соглашаться на первый попавшийся оффер от IT-компании. Из-за большого наплыва новичков в сферу появилось множество сомнительных предложений и схем.

Читать далее

Какой формат даты выбрать: практическое руководство для UX/UI дизайнеров

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

Дата — это всего три числа, но даже такой маленький элемент интерфейса может серьезно повлиять на пользовательский опыт.

Подробнее

Авто-генерация типизированных API контроллеров на клиенте из Swagger

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

Зачастую нам приходится описывать API-запросы или переписывать уже имеющиеся ввиду изменения каких-то DTO (Data Transfer Object) или параметров у запросов. Это вполне естественно для разработки, но часто оказывается скучным и однотипным процессом, не требующим размышлений или особых навыков. В этой статье я рассказываю, как автоматизировать всю эту историю.

Читать далее

signals в качестве альтернативы useState в React

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

Привет, хабр! Больше года назад я впервые узнал про сигналы, а три месяца назад @Sin9k записал видео на эту тему. И поскольку сигналы по-прежнему обходят стороной, попробую немного исправить ситуацию)

В материале будет использоваться обёртка signals-react, так как изначально рассматриваемая библиотека написана под Preact.

Читать далее

Полезные библиотеки для React-приложений в 2025 году: на что обратить внимание

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

Привет, Хабрчане! Это Леша Жиряков, техлид backend-команды витрины KION. В прошлый раз я писал о секретах популярности Python, а сегодня будет пост о разработке на React. Расскажу, какие библиотеки стоит добавить в свой набор в 2025 году, приведу плюсы и минусы каждой, данные с GitHub и примеры использования. Начнем!

Читать далее

Какие же они тупые❢

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

В современном мире тема ИИ возникает чуть ли не везде. Что уж говорить про ИТ‑сервисы, которые стремятся бежать впереди паровоза и пихают модную технологию где надо и где не надо. Меня это с самого начала стало раздражать, поскольку к теме ИИ отношусь с изрядной долей критического подхода и даже скепсиса. Я не вижу, что в нужных мне приложениях ИИ приносит хоть какую‑то ощутимую пользу.

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

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

Читать далее

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

Как улучшить доступность сайтов с помощью семантического HTML: стандарты семантики

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

Привет, Хабр. Меня зовут Дмитрий, я Frontend-разработчик в компании Webest. В этой статье расскажу, как эффективно использовать семантический HTML, какие теги (от <header> и <main> до <article> и <aside>) действительно приносят пользу, и в каких ситуациях они работают лучше всего. 

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

Читать далее

Вы не знаете CSS. Мои вопросы о CSS с ответами. Часть 2

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


Хабр, привет! Я стабильно пишу здесь о CSS. Мне радостно, что моя работа вам полезна. Но хочется чего-то нового. Вызывающего споры. В общем, я к формату статей в виде вопрос-ответ. Вопросы будут те, что я спрашиваю на интервью. Так что у вас будет повод сказать: «А зачем это надо?».


При составлении вопросов я хотел проверить понимание базовых моментов, которые есть в вёрстке любого проекта. Ещё будут вопросы на знание более редких аспектов и «новинок» в CSS. В общем, я хочу вас завалить, чтобы казаться супер умным! (здесь ирония).


Пожалуйста, не воспринимайте мои вопросы серьёзно. Давайте просто весело проведём время. Плюс попробуем узнать что-то новое. Ведь у каждого вопроса будет мой ответ. И вы тоже можете оставить свой в комментариях. Я обязательно буду их читать.


Так, вы готовы? Давайте посмотрим, что я вам подготовил.

Читать дальше →

DOM-Scope: создание искусственных областей видимости и управление идентификаторами элементов

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

В процессе работы с HTML-документами часто возникает необходимость получить доступ к конкретным элементам DOM. Обычно это делается с помощью уникальных идентификаторов, которые присваиваются нужным элементам. Однако существует вероятность, что в большом документе может оказаться несколько элементов с одинаковыми идентификаторами, что может привести к путанице.

Чтобы избежать этой проблемы, я разработал библиотеку dom-scope, которая позволяет создавать искусственные области видимости (скоупы) внутри DOM. Я хочу поделиться своим решением с сообществом Хабра.

Читать далее

VPS за 139 рублей — дом для вашего резюме на основе Hugo

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


Привет, Хабр! Сегодня узнаем, на что реально способны бюджетные VPS от RUVDS. Посмотрим, что можно сделать с самыми недорогими серверами, которые так часто мелькают в рекламе.

Для нашего эксперимента я выбрал конфигурацию за 139 рублей в месяц — VPS с 1 ядром процессора 2.2 ГГц, всего 512 МБ оперативной памяти и 10 ГБ на HDD, а ОС привычная CentOS 9. На всём этом добре мы развернём статический сайт-резюме на Hugo, о чём будет подробнее ниже в тексте.
Читать дальше →

Понимая реактивные системы: искусство планирования зависимостей

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

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

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

Читать далее

Перестаньте использовать JWT для сессий

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

К сожалению, в последнее время всё больше и больше людей советуют использовать JWT для управления пользовательскими сессиями в веб-приложениях. Это ужасная идея, и в этом посте я объясню, почему.

Читать далее

Yandex индексация для SPA приложений

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

Год с небольшим назад я проводил здесь испытания, как поисковики индексируют SPA сайты. На тот момент Google справился на отлично, Yandex - не очень

Сейчас Yandex хорошо проиндексировал SPA сайт на Vue 3.

Читать далее

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