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

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

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

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

Рекомендуемые библиотеки для React

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



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


React позволяет разработчикам создавать пользовательские интерфейсы (user interfaces, UI) на основе функциональных компонентов. Хотя он предоставляет встроенные решения, такие как хуки (hooks), для управления локальным состоянием, обработки побочных эффектов и оптимизации производительности, в конечном итоге все сводится к работе с функциями — как компонентами, так и хуками — для построения UI.


В этой статье мы рассмотрим основные библиотеки React на 2025 год. Эти библиотеки являются строительными блоками для разработки приложений. Независимо от того, новичок вы или опытный разработчик, эта шпаргалка поможет вам сориентироваться в обширной экосистеме React.


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

Как измерить успешность дизайна в техническом продукте? Погружаемся в UX-бенчмаркинг

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

Привет, я Оля Ходаковская — ведущий продуктовый дизайнер облака Selectel. Я отвечаю за проектирование и развитие облачных продуктов: сетей, файрволов, балансировщиков, глобального роутера и логов — и лидирую такие UX-инициативы, как модель UX-зрелости и UX-бенчмаркинг.

В дизайн-процессе Selectel был формально описан этап измерения успешности дизайна, однако никто не знал, как именно ее измерять. В этой статье я расскажу, как мы решили эту задачу с помощью UX-бенчмаркинга. Будет много примеров и внутренней кухни!
Читать дальше →

WebAssembly: Как «невозможное» стало реальностью?

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

Представьте, что вы можете запустить Photoshop в браузере без плагинов. Или обрабатывать 4K-видео на слабом смартфоне. А что, если нейросеть на сайте будет работать в 20 раз быстрее? Звучит как фантастика, но это уже реальность благодаря WebAssembly (Wasm).

В 2017 году WebAssembly представили как «дополнение» к JavaScript. Сегодня же он становится универсальной средой исполнения для любых задач — от игр до серверных приложений. Как это произошло? Давайте разбираться.

Читать далее

Оптимизация работы с REST API: когда и как использовать пагинацию (+ простой пример на Python)

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

Итак, пользователи вашего приложения уже жалуются на долгую загрузку данных, а серверы едва справляются с нагрузкой. Одна из возможных (и частых) причин в том, что API пытается выгрузить тысячи записей за один запрос. Без пагинации базы данных захлебываются под тяжестью SELECT-запросов, а клиенты уходят к конкурентам, не дождавшись ответа.

Почему пагинация — это не опция, а must-have для любого API? Как избежать типичных ошибок при ее внедрении? И почему даже стартапам с небольшим трафиком стоит задуматься о ней уже сегодня? Ответы — в разборе принципов, которые превращают пагинацию из технической детали в инструмент роста бизнеса.
Читать дальше →

Боремся с токсичными комментариями с помощью ИИ, FastAPI и React

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

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

Мы воспользуемся FastAPI для бэкенда, React для фронтенда, заставим их между собой общаться через RESTful API, а бизнес-логику реализуем путём обращения к ИИ через gRPC.

Читать далее

Фундаментальная проблема TLS/SSL или как потерять доверие к доверенным центрам

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

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

Поехали!

Дзен и публикация картинок

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

Привет, Хабр! Сегодня я хотел бы поговорить с тобой о проблеме публикации картинок. Зачем вообще об этом говорить? Ежедневно миллионы людей публикуют миллионы, или даже, миллиарды изображений, что тут можно обсуждать? Наверняка, для веб-разработчика, тем более, опытного - это вообще никакая не проблема.

Эх, как бы не так.

Где выгоднее зарегистрировать домен в Беларуси: сравнение цен у ведущих регистраторов

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

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

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

В этой статье мы сравним цены на 30 популярных доменных зон у ведущих регистраторов Беларуси, чтобы помочь вам выбрать оптимальный вариант.

Читать далее

Импортозамещение для бедных — что нам стоит свою open source Jira построить

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

Внутренние хакатоны — отличный способ протестировать новые идеи. Мы не только экспериментируем, но и получаем практический опыт. Однажды, работая над CRM для управляющей компании (УК) в Дубае, мы задумались:

Мы сделали систему для работы с заявками для УК. А почему бы не создать свою Jira для работы с задачами? Почему еще никто не напилил полноценную Open Source Jira для бедных?

Сначала это звучало как шутка. Но мысль возвращалась снова и снова — особенно когда Jira начинала тормозить или раздражать.

Поэтому мы решили собрать велосипед 🚲 из готовых Open Source решений.

Что из этого вышло? 🚀

TutOn: Нежданное путешествие, или как мы в 11 классе сделали мобильное приложение для помощи учителю

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

Представьте ситуацию: май месяц, экзамены уже на носу, все вокруг готовятся к ЕГЭ... А что, если добавить к этому разработку приложения, победу в конкурсе и публикацию в RuStore? Звучит как безумие? Возможно. Но именно так мы провели последний год перед поступлением. И вот наша история!

Читать далее

Создание анонимного чата в Telegram: Бот с MiniApp интерфейсом. Часть 1 — Бэкенд на FastAPI, Aiogram, Redis и Centrifugo

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

Это первая статья из цикла, посвященного разработке телеграм-бота с MiniApp для случайных чатов. В этой части мы сосредоточимся на создании бэкенда, используя современные технологии: FastAPI для разработки API, Redis для хранения данных в реальном времени и Centrifugo для обеспечения мгновенного взаимодействия между пользователями. Сегодня мы подробно разберем архитектуру проекта, настройку серверов и реализацию логики бота.

В следующей статье мы переключимся на фронтенд и займемся разработкой MiniApp с использованием фреймворка Vue.js. Это позволит создать интуитивно понятный интерфейс для пользователей, где они смогут настраивать параметры поиска собеседника и общаться в режиме реального времени (Real time).

Читать далее

Как интегрировать миниапп (активность) в Discord

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

Привет! Я Егор Стеблин, фронтенд-разработчик в юните спецпроектов KTS.

В этой статье я расскажу о том, каким образом в Discord можно встроить свой миниапп (a.k.a. «активность»). Для тех, кто еще не сталкивался с этим понятием: активности — это интерактивные приложения, которые можно запустить в Discord. Они могут интегрироваться со следующей функциональностью Discord:

получение информации о пользователе;

голосовой и текстовый чаты;

данные профиля и встроенная монетизация.

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

Ниже я опишу процесс создания Discord-активностей от инициализации приложения на портале Discord до написания кода и его тестирования.

Читать далее

Playwright: игра в скриншотные тесты

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

Работа с Playwright всегда доставляет мне удовольствие. «Наиграв» уже десятки, если не сотни часов в библиотеке, решая проблемы, копаясь в исходниках или на просторах сети, я практически всегда находил удачное решение. И это я списываю не столько на свой опыт, сколько на удобство самой библиотеки. Чаще всего удачные решения находились уже в коробке. А то, что приходилось допиливать руками, всегда сопровождалось ощущением игры и веселья – настолько приятно и легко работать с этим инструментом. Вот уже год, как наши тесты работают стабильно без каких-либо значимых изменений. Сегодня я расскажу вам о скриншотных тестах, реализованных на основе Playwright и Storybook.

Читать далее

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

n8n. Создаём AI Telegram agent с установкой и настройкой

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

Всем привет!

В этой статье будет рассматриваться n8n — open source платформа для автоматизации рабочих процессов, которая поддерживает более 400 интеграций, в том числе LMM, векторные базы данных и все, что нужно, чтобы создать ИИ-агентов и RAG-приложений.

Итак, сегодня мы развернем n8n c RAG-агентом и покажем, как им пользоваться на простых примерах, среди которых будет telegram чат-бот для работы с БД PostgreSQL.

Читать далее

Бесплатная система учета торговли и управления интернет магазином Trinion Торговля

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

Всем привет. Меня зовут Рамиль Кинзябулатов, я – опытный бизнес-консультант, автор книг о функциональном и процессном моделировании, а также многочисленных статей по тематике моделирования и автоматизации бизнеса. Ты не И сейчас я хочу познакомить вас с решением, созданным на основе моих знаний, опыта и желания выстроить правильную модель торгового предприятия – система Trinion Торговля.

Читать далее

Как мы строим дизайн-систему в ЮMoney

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

Всем привет! Мы — Полина и Степан, дизайнер интерфейсов и фронтенд-разработчик в ЮMoney. В этом тексте расскажем, как у нас в компании устроена дизайн-система, и посмотрим на неё с двух сторон: глазами команды дизайна и разработки.

Читать далее

Стильный современный «autoindex» в Angie/nginx без sms и сторонних модулей

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

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

Поводом для этой статьи стал вопрос из нашего Telegram‑чата поддержки (присоединяйтесь — он открыт для всех!): «Почему в репозиториях Angie среди множества сторонних модулей отсутствует Nginx Fancy Index?».

Меня удивило, что кто‑то пользуется устаревшим модулем, поскольку ещё в 2014 году я добавил во встроенный в nginx модуль «autoindex» поддержку форматов JSON и XML, что делает сторонние решения избыточными.

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

Читать далее

Переводим пользовательский интерфейс на RTL: быстро, качественно, недорого

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

Всем привет! Меня зовут Арина, я - frontend-разработчик в отделе разработки конструкторов iSpring. Наша команда занимается разработкой и развитием продукта iSpring Page - облачной платформы для создания курсов.

В 2023 году наша компания начала активно развиваться на рынке Ближнего Востока, и поэтому возник вопрос поддержки арабского языка! А это означало, что нам нужно не только внедрить переводы, но и развернуть или «отзеркалить» пользовательский интерфейс всех наших продуктов.

Поэтому в данной статье я расскажу, как мы реализовали поддержку RTL, с какими трудностями столкнулись, как их решили и как поддержка RTL повлияла на работу смежных команд.

Читать далее

Пошаговое руководство для начинающих по разработке SPA на Laravel и Vue.js

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

Привет, Хабр. На связи Артем, Laravel-разработчик, и я написал инструкцию для начинающих разработчиков по созданию полноценного локального приложения с бэкендом на Laravel и фронтендом на Vue.js. 

Одностраничные приложения стали стандартом для создания динамичных и быстрых пользовательских интерфейсов. Одним из популярных стеков для разработки SPA является сочетание Laravel и Vue.js.

Пошагово разберу, как настроить среду разработки, создать API на Laravel, реализовать динамический интерфейс с использованием Vue.js и связать эти две части в единое приложение. 

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

Читать далее

Как внедрить веб-решение для оптимизации процесса закупок для крупного производителя молочной продукции в Беларуси

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

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

В 2019 году к нам обратилась всем известная компания Danone. Задача: цифровать и автоматизировать процесс закупки продукции.

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

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

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

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

То есть простое веб-решение. Но с какими проблемами мы столкнулись.

Читать далее

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