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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• React Tech Stack в 2025 году

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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