Open Academy — это Telegram mini app для обучения финансам (в будущем и другим направлениям) прямо внутри Telegram и в удобном формате слайдов. В этой статье я разбираю доступность интерфейса Open Academy с точки зрения незрячего пользователя и показываю, какие элементы можно улучшить.
Привет, я Дима, senior frontend разработчик в компании Doubletapp.
В этой статье я расскажу о том, как составить идеальное тестовое для фронтендера, которое покажет не навыки прохождения интервью и умения пользоваться нейронкой, а реальные скиллы инженера. Статья будет полезна и тем, кто нанимает, и тем, кто готовится к собеседованиям, и тем, кто хочет честно проверить свой уровень.
В тексте:
- Почему стандартные тестовые задания не работают
- Как должен выглядеть адекватный технический этап
- Почему этот подход даёт лучший результат
Салют, Хабр!
Я Паша, вхожу в группу обеспечения производительности интерфейсов. Эту статью мы написали с Сергеем @TrueNort — руководителем группы. В SberDevices её называют командой «Скорость». Под надзором «Скорости» более двадцати веб-сервисов, каждый из которых должен работать быстро и точно. А значит, нужна система мониторинга производительности с гибкими настройками, чуткой реакцией на изменения и оперативными сообщениями о проблемах.
В статье расскажем, зачем мы нормируем метрики логарифмами, как скрипт превращает данные из ClickHouse в алёрты и как удобнее отображать данные. Словом, поделимся нашим опытом контроля производительности веб-ресурсов.
Сегодня начинаем рассказывать о полезных штуках, которые можно добавить в свой портал в веб-приложении, чтобы вести бизнес было удобнее и проще.
Для проекта я буду использовать нашу подготовленную ИИ-базу — шаблон проекта с инструкциями-промптами для искусственного интеллекта. В статье расскажу, насколько это было сложно, где агенты ошибались самостоятельно, а где — из-за меня.
Короче, если хотите начать оптимизировать работу в CRM через кастомные приложения и посмотреть, с чего начинать и что бывает в результате — вам сюда.
В 2026 году выбор инструмента для стилизации — это не вопрос вкуса, а вопрос архитектуры. Мы разберём, где Tailwind CSS v4 выигрывает у признанных лидеров: компонентных библиотек (MUI, Ant Design) и CSS-in-JS решений (Styled Components).
Хочу поделиться проектом, который может оказаться полезным тем, кто всё ещё разрабатывает/поддерживает десктопные .NET Framework приложения на WinForms.
В моей организации - как, наверное, и во многих других - среда разработки Microsoft Visual Studio оказалась под запретом, причём как её коммерческие версии, так и Community Edition. Всем было рекомендовано перейти на VS Code, которая хороша во всём, кроме полноценной поддержки WinForms-приложений. А именно - VS Code, в отличие от "обычной" Visual Studio, не имеет встроенного редактора (дизайнера) форм, без которого вёрстка сложных форм становится как минимум неудобной. Если с редактированием "code behind" файла проблем нет (Form1.cs, UserControl1.cs), то с файлом, описывающим «визуальщину» (Form1.designer.cs, UserControl1.designer.cs) - беда: в VS Code его можно править только на уровне кода, "WYSIWYG experience" тут недоступен.
Недавно, в одной из соцсетей, наткнулся на короткий пост, в котором автор написал:
«СКАМИНА ДЛЯ АЙТИШНИКОВ
Выглядит так —
Приглашают на интервью, в конце говорят, что вот проект, с которым нужно будет работать, и кидают ссылку на GitHub.
Говорят: склонируй, расскажу, что там по архитектуре.
Ну и если склонировать, там внутри таски для VS Code, которые качают и запускают обфусцированный код.
Берегите себя.»
Я решил поискать информацию по похожим случаям: единичный ли это случай или уже схема. И да — это оказался не единичный случай, а вполне оформленный и уже задокументированный тип атак на разработчиков по крайней мере за бугром. Причём атака направлена именно на людей, которые привыкли запускать код, доверять репозиториям и IDE.
Давайте разберемся, как это работает.
Всем привет! Знаете это чувство, когда ты ищешь решение какой-то конкретной проблемы, а находишь целое новое хобби? Вот у меня примерно так и вышло.
Как значит было дело. Сидел я, как обычно, никого не трогал, починял примус... а если конкретнее - делал небольшую игру-платформер. Задумка была в том, чтобы она была процедурно-генерируемой, причем я хотел чтобы все уровни генерировались через большую...
Сайт Словарус 2.0 – это вторая улучшенная версия сайта с русской заменой иностранных слов, который я ранее делал по заказу Love Media и лично господина Маркелова.
Задача. Восстановить сайт из веб-архива и сделать его лучше.
Это первая часть цикла статей о разработке системы публикации структурированных интерактивных постов через Telegram Bot API. В следующих частях — архитектура, рендеринг шаблонов и управление доступом к закрытым чатам.
С чего всё начинается
Представьте типичную задачу: пользователь вашего сервиса хочет опубликовать в своём Telegram-канале структурированный пост. Не просто текст — а пост с заголовком, многострочным описанием, блоком реквизитов, динамическим индикатором прогресса и интерактивными кнопками. Пост, который после публикации будет обновляться в реальном времени по мере поступления новых данных. Пост, под которым есть кнопка, открывающая отдельный диалог в боте — и всё это происходит без перехода в браузер, без форм, без лишних шагов.
На первый взгляд — ничего сложного. Telegram Bot API умеет отправлять текст, прикреплять медиа, рисовать inline-кнопки. Но именно в этот момент начинается то, что разработчики называют «дьявол в деталях».
На практике задача немедленно разбивается на несколько инженерных проблем, каждая из которых требует отдельного решения. И если пропустить хотя бы одну — система либо ломается при первом же граничном случае, либо создаёт такой UX, что пользователи просто не понимают, что происходит.
Виджеты в Windows — один из самых странных элементов пользовательского интерфейса. Они регулярно появляются, исчезают, переизобретаются и вызывают споры. Их позиционируют как быстрый доступ к информации, но на практике они часто воспринимаются как лишний слой интерфейса, который пользователи либо игнорируют, либо отключают. Почему так происходит — вопрос одновременно технический, исторический и культурный.
Чтобы понять, зачем вообще нужны виджеты и почему компании продолжают их развивать, несмотря на прохладную реакцию пользователей, нужно выйти за пределы интерфейсных решений и посмотреть на более широкую идею — философию ambient computing. Это одна из самых влиятельных концепций в истории взаимодействия человека с технологиями, и виджеты Windows — лишь ее частное, пока несовершенное проявление.
Давно хотели «потрогать» IT своими руками, но боялись утонуть в сложных терминах, математике и алгоритмах? Давайте начнем с самого простого.
В этой статье мы без скучной теории и академичного снобизма разберем, как работает HTML — фундамент любого сайта в интернете. Спойлер: это не язык программирования, и здесь невозможно ничего сломать! А главное — всего за 20 минут мы с абсолютного нуля напишем вашу первую настоящую веб-страницу (сайт-визитку). Если вы искали идеальную песочницу для старта в веб-разработке — добро пожаловать под кат.
Собрал production‑ready Next.js boilerplate для self‑hosted проектов: один репозиторий, один VPS, Docker + nginx + Let’s Encrypt, GitHub Actions, опциональный MongoDB, авторизация и небольшой UI‑кит. Это кейс про инфраструктуру вокруг Next.js без Vercel и прочих managed‑платформ для большего контроля и экономичного старта.
В настоящее время на рынке представлено несколько решений для работы с картами, многие из них конкурируют друг с другом, а также существует большой выбор инструментов и библиотек, которые позволяют реализовать различные функции картографирования в веб-приложениях. Эти решения постоянно совершенствуются и обновляются, что создает здоровую конкуренцию между ними и мотивирует разработчиков внедрять новые возможности.
В этой статье мы рассмотрим две самые популярные библиотеки для работы с картами — MapLibre и Leaflet. Обе библиотеки получили широкое распространение и часто используются разработчиками для интеграции карт в веб-проекты различного уровня сложности. Мы разберем основные сценарии использования этих библиотек, а также рассмотрим их сильные и слабые стороны. Это позволит понять, какая из них лучше подходит для конкретных задач и на какой библиотеке остановить свой выбор в каждом отдельном случае.
Обе библиотеки представляют из себя дополнительный слой, который отображается поверх любой карты, такой как Open Street Map (OSM), Google Maps, Яндекс.Карты и многие другие популярные платформы. По сути, библиотека предоставляет инструменты для визуализации, манипулирования и взаимодействия с картографическими данными непосредственно внутри вашего приложения, не ограничиваясь каким-либо одним провайдером карт.
Всю работу с тайлами берут на себя сами библиотеки — они автоматически подгружают необходимые фрагменты карты, обеспечивают их отображение в нужном масштабе и позволяют реализовать различные слои с динамическими эффектами. Таким образом, мы как разработчики можем сконцентрироваться на использовании многофункционального и гибкого API, который способен закрыть множество повседневных потребностей.
Связка React+MobX хорошо себя зарекомендовала при работе с формами, в то время как за реактивность модели данных в Angular обычно отвечает библиотека RxJS. Но что делать, если вы хотите воспользоваться преимуществами Angular в React или Node.js? В этой статье речь пойдет о новой библиотеке от Cloud X, которую мы разработали для того, чтобы проложить “мостик” из мира Angular, где всё богато, но дорого в мир React, где все дешево, но скудно. В этой статье я описываю применение ядра @cloudx/react-ui-kit-forms, которое отвечает за структуру модели данных, реактивность модели данных и контроль состава данных (валидацию), позволяя “скрестить” плюсы React и Angular на одном проекте.
Перед тем как писать наш будущий мессенджер нужно определиться с технологией на которой будем его разрабатывать. Явными фаворитами среди инструментов web разработки для SPA являются Angular и React. Я не буду акцентировать преимущества каждого из этих инструментов, а остановлюсь сразу на Angular, т.к. ранее проводил ресёрч по не классическим виртуализированным спискам и выявил, что для данной задачи он справится эффективнее, чем React.
Обзор на браузерные API, которые стали Widely available в феврале 2026. Раз в месяц я буду вам напоминать, что вы уже можете использовать в проде. В этом месяце всё довольно скучно и одиноко.
Каждый месяц выходят новые CSS-свойства, HTML-атрибуты, JavaScript-методы и WebAPI, но применять в проде мы их конечно же не будем. 2.5 года назад также каждый месяц выходили новые фичи в браузере, а вот их уже пора начинать применять.
Автор создал курс по JavaScript. И первое, что он хочет сказать: не надейтесь на курсы.
Ни на этот, ни на любой другой. Индустрия онлайн-образования продаёт ощущение прогресса вместо самого прогресса.
Ниже — почему, и что автор предлагает взамен.
ChatGPT умирает на длинных разговорах. Не AI-часть — модель отлично держит тысячи сообщений. Умирает фронтенд. Таб зависает, скролл лагает, иногда браузер просто крашится.
Самое обидное — именно длинные разговоры самые ценные. Чем дольше обсуждаешь, тем больше контекста у модели, тем полезнее ответы. А продукт ломается ровно в тот момент, когда начинается максимальная отдача.
Мне это надоело и я полез разбираться.
Синхронизация атрибутов элемента с DOM-свойствами
Очевидно, что нашему компоненту потребуются атрибуты, через которые пользователь сможет контролировать его поведение. Наш компонент должен вести себя как стандартный элемент ввода типа «input», поэтому обязательно должен поддерживать такие атрибуты как disabled и required – и это самый минимум. Поэтому важно разобраться (ну или вспомнить) что такое «content vs IDL attributes», и как с этим работать.
Документация по веб-компонентам мало говорит об атрибутах, разве что рекомендует использовать attributeChangedCallback() для наблюдения за ними, но этого недостаточно. Хотя это полезное API, нам оно не подходит, потому что оно уведомляет нас о уже совершенном действии (изменении атрибута), а нам нужно контролировать этот процесс, то есть – синхронизировать атрибуты и свойства с нормализацией значений.
Так как наш компонент наследует базовый класс HTMLElement, а в нем уже реализовано большое количество разных методов, то мы можем переопределить некоторые из них чтобы получить нужный нам результат. Для начала определим наши свойства в виде пар get/set и значения в приватном поле: