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

Всем привет! Меня зовут Саша, и последние 12 лет моя жизнь — это дизайн. Сегодня я руковожу дизайн-командой в KISLOROD, а в прошлом — помогал крупным брендам и миллионным сервисам обрести их уникальный голос и форму.

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

Здравствуйте, товарищи! Недавно мне понадобилось сделать простой бэкенд для онлайн-песочницы в своем open source проекте. Сейчас для таких задач есть много конструкторов и low-code решений, типа n8n. Но я "по старинке" решил взять serverless с лямбдами, поскольку в позапрошлой компании плотно работал с этим стеком.

Вспоминая тему serverless, я обнаружил, что в русскоязычном пространстве, и на Хабре в частности, почти не освещена одна полезная техника. Пришло время исправить ситуацию и заполнить пробел данной статьей!

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

Каждый год я смотрю, какие новые фишки в HTML и CSS стали поддерживаться современными браузерами. Таким образом понимаю, что уже можно использовать. Так как я люблю делиться всем с вами, то я подумал: «А почему бы не рассказать о новинках на Хабре?». Вот я и пришёл.

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

Моё главное правило для отбора фич заключается в том, чтобы она стала «зелёной» в 2025 году на сайте «Can I Use». Смотрю последние версии браузеров Chrome, FireFox, Opera, Edge, Safari, iOS Safari, Samsung Internet и Android Chrome.

Не буду больше тянуть. Давайте посмотрим, что я вам подготовил.

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

Возьмем content-visibility: auto. Он дает тот же эффект, что и React-Window, но без единой строчки JS и без увеличения размера сборки. Аналогичная ситуация с современными единицами высоты окна (dvh, svh, lvh): наконец-то приведена в порядок "мобильная" высота, которую годами пытались компенсировать через window.innerHeight.

Обе технологии в 2024 году получили более 90% поддержки современных браузеров и полностью готовы для продакшна. Однако мы по привычке продолжаем решать такие задачи с помощью JS, просто потому, что CSS незаметно ушел вперед, пока мы спорили о React Server Components.

Эта статья не про «правильную» архитектуру. Здесь я постарался ответить на вопросы «почему микросервисы дороже, какие компромиссы неизбежны и по каким критериям выбирать архитектуру?»

Поговорим про высоконагруженные распределённые системы и почему монолиты — это не плохо. Также поговорим о необходимости рационального использования ресурсов и выборе типа архитектуры.

В Яндекс Практикуме мы постоянно следим за изменениями на рынке и обновляем учебные программы в соответствии с новыми требованиями. Чтобы актуализировать курс «Фронтенд-разработчик», в конце 2025 мы опросили нанимающих менеджеров из Сбера, «МегаФона», VK, «Северстали» и компаний среднего и малого бизнеса. 

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

Авторизация пользователя в Telegram mini-app сейчас как никогда важна. Но что если вам необходимо сделать это в вашей сервисной/микросервисной архитектуре с отправкой смс-кода?

Команда JavaScript for Devs подготовила перевод исследования о новой технике кликджекинга, которая использует SVG-фильтры как полноценную среду выполнения логики. Автор показывает, как с их помощью читать пиксели, строить логические схемы, реализовывать многошаговые атаки и даже эксфильтрировать данные через QR-коды — включая реальный кейс атаки на Google Docs.

Десятки лет robots.txt управлял поведением веб-краулеров. Но сегодня, когда беспринципные ИИ-компании стремятся к получению всё больших объёмов данных, базовый общественный договор веба начинает разваливаться на части.

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

Файл называется robots.txt; обычно он находится по адресу вашвебсайт.com/robots.txt. Этот файл позволяет любому, кто владеет сайтом, будь то мелкий кулинарный блог или многонациональная корпорация, сообщить вебу, что на нём разрешено, а что нет. Какие поисковые движки могут индексировать ваш сайт? Какие архивные проекты могут скачивать и сохранять версии страницы? Могут ли конкуренты отслеживать ваши страницы? Вы сами решаете и объявляете об этом вебу.

Эта система неидеальна, но она работает. Ну, или, по крайней мере, работала. Десятки лет основной целью robots.txt были поисковые движки; владелец позволял выполнять скрейпинг, а в ответ они обещали привести на сайт пользователей. Сегодня это уравнение изменилось из-за ИИ: компании всего мира используют сайты и их данные для коллекционирования огромных датасетов обучающих данных, чтобы создавать модели и продукты, которые могут вообще не признавать существование первоисточников.

Файл robots.txt работает по принципу «ты — мне, я — тебе», но у очень многих людей сложилось впечатление, что ИИ-компании любят только брать. Cегодня в ИИ вбухано так много денег, а технологический прогресс идёт вперёд так быстро, что многие владельцы сайтов за ним не поспевают. И фундаментальный договор, лежащий в основе robots.txt и веба в целом, возможно, тоже утрачивает свою силу.

Привет! Меня зовут Максим и я frontend-разработчик в компании SimbirSoft. Думаю, из названия статьи вы уже поняли, что я не только занимаюсь разработкой интерфейсов, но и увлекаюсь созданием игр. Интерес к геймдеву появился у меня ещё в университете, когда я решил познакомиться с Unity. Тогда я не планировал строить карьеру разработчика игр, но сам процесс затянул. Даже став полноценным специалистом в своей области, я не перестал думать о геймдеве. Поэтому решил совместить приятное с полезным, а именно: изучить экосистему языка JavaScript на наличие инструментов для геймдева. Результатом стали три игры, опубликованные на платформе Яндекс Игры. Изучив и опробовав несколько технологий, я понял, что создавать игры на JavaScript вполне реально. 

Metaflow — это фреймворк, работу над которым мы начали в 2019. В том же году мы открыли его исходный код. Теперь он обеспечивает функционирование широкого спектра ML/AI-систем в Netflix, а так же — во многих других компаниях. Он пользуется любовью тех, кто его применяет, так как он помогает им доводить их ML/AI-идеи от стадии прототипа до продакшна. Он позволяет им уделять внимание не решению рутинных задач, а созданию современнейших систем, которые дарят радость людям по всему миру и развлекают их.

Metaflow даёт разработчикам следующие возможности:

Я давно увлекаюсь и изучаю технологии WebRTC. Устанавливал для клиентов множество WebRTC медиа серверов и кастомизировал их. Но постоянно не хватало гибкости. В итоге обнаружил чистую реализацию WebRTC на Golang, которая умеет и MESH, и SFU. Сейчас буду рассказывать, что удалось разработать и в чем польза.

Как Angular Ivy находит зависимости за O(1)? Глубокое погружение в алгоритм резолва: от генерации уникальных ID токенов до битовой магии Блум-фильтров. Разбираем, почему строковые токены замедляют ваше приложение и как работает наследование кумулятивных масок в LView.

Уже больше 10 лет я занимаюсь продвижением SaaS и IT-сервисов. За это время мы вывели в лидеры своих ниш не один продукт. И все это время у меня было желание сделать собственный сервис, и заниматься его развитием. И сейчас, в эпоху нейросетей, это время пришло - я открываю новое направление продуктовой разработки. Часть продуктов уже работает для наших внутренних процессов, часть находится в активной разработке. Будут, как сервисы по подписной SaaS-модели, так и заказная разработка: от классических сайтов и интернет-магазинов до сложных приложений с AI-автоматизацией.

И сегодня расскажу об одном из наших первых опытов разработки AI-продукта, как мы прошли путь от простого бота до полноценного AI-продавца-консультанта с RAG (векторной базой знаний) для интернет-магазина на WordPress c WooCommerce, обслуживание которого почти ничего не стоит, а пользы, как от целого отдела продаж или поддержки.

Всем привет, меня зовут Алексей Леонтьев, я техлид и архитектор на проекте Smartbot в компании KTS. Smartbot — это nocode-платформа для настройки сценариев чат-ботов, которые могут работать в нескольких соцсетях и мессенджерах одновременно.

Мы храним много данных о событиях, которые обрабатывает наша платформа. Раньше для этого мы использовали Postgres. Но возникла задача сократить потребляемые кластером ресурсы.

В этой статье я расскажу о том, как мы бесшовно перенесли данные из Postgres в ClickHouse. И при этом сократили оперативную память в 4 раза, а размер потребляемого дискового пространства — на порядок.

Эта история не о строчках кода, а о том, как мы с другом устали смотреть на пустую доску в офисе. Сначала мы сделали свою версию проекта — с партнёрами и погодой, как мы предполагали по возможным требованиям. Потом я создал версию для себя: с котиками из Giphy API, бегущей строкой цитат и анимированной погодой. В этой статье — о том, как из простого желания добавить красок в рабочее пространство родился личный Preloader перед началом работы, и как пустота корпоративного экрана превратилась в доску вдохновения, которая теперь висит фоном на моём мониторе.

Привет, Хабр! Меня зовут Александр Дудукало, я автор курса по JavaScript. Сегодня мы поговорим о ключевом навыке разработчика. С помощью чего сделать код лаконичнее и выразительнее, при этом заменяя громоздкие циклы простыми конструкциями?

Владение методами массивов — это и есть тот самый ответ. Это база, которая позволяет писать код, понятный человеку, а не только машине, и умение переключиться с вопроса «как сделать» на результат «что получить».

Мы разберем три самых полезных метода: map — для преобразования данных, filter — для отбора элементов и sort — для сортировки. Вы поймете, как они работают внутри, и примените знания на практике, создав свои аналоги этих функций. Подробности, как всегда, внутри.

Go 1.22 заметно укрепил позиции стандартной библиотеки в роли «достаточно хорошего» веб‑стека: ServeMux научился матчить шаблоны, и зависимость от роутеров ради базовой маршрутизации уже не выглядит обязательной. Но как только в проекте появляется больше пары middleware, начинается знакомая боль — обёртки размножаются, порядок теряется, правки становятся хрупкими.

В этой статье разбираем, как собрать управляемые цепочки middleware без alice и как поверх http.ServeMux сделать группировку маршрутов с наследованием middleware в стиле chi — только на стандартной библиотеке и с минимальным количеством кода.

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

«Инвертированный», «вогнутый», «впуклый» угол, а также negative border radius или inverted border radius. Когда слышите это — знайте, дальше будут страдания.

Проблема в том, что приём выглядит просто, но нативного способа сделать такой угол в CSS нет. Поэтому в ход идут тучи дополнительных обёрток и море стилей для их позиционирования. И всё это ломается на неоднородном фоне.

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

В статье разбирается техническая реализация SQLize Embed — легковесного JS-компонента для создания интерактивных песочниц прямо в тексте технических статей. Автор подробно описывает архитектуру решения: от использования MutationObserver для инициализации редакторов на фронтенде до обеспечения безопасности и изоляции запросов в Docker-контейнерах на бэкенде.

Вы узнаете, как реализована поддержка более 20 СУБД (включая PostgreSQL 18, MS SQL 2025 и Oracle 23ai) и как встроить «живые» примеры кода в свой проект всего парой строк HTML.