Обновить

Фронтенд

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

Как создать рекламный баннер с помощью нейросети — Сравниваем ТОП-6 ИИ для баннеров

Уровень сложностиПростой
Время на прочтение15 мин
Охват и читатели1.5K

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

Читать далее

Новости

Трансформация интерфейса приложений: сначала консоль, потом GUI, потом скажи, что нужно, и ИИ сделает?

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

Всем привет.

Программировать я очень давно начал. Помню, как мне папа, прочитав журнал, вытравил плату и купил микросхемы, и, используя два больших калькулятора для бухгалтеров, разрезав их и склеив, собрал мне ZX Spectrum. У меня отец работал в Толмачёво инженером, который обслуживал большие ЭВМ и тренажёры для лётчиков "Аэрофлота".

В общем, я был, наверное, первый счастливчик в Новосибирске, у кого был персональный компьютер дома. Тогда ещё бизнесмены не успели продавать ZX Spectrum и кассеты к нему с играми, а у меня уже всё было. Я помню, как первые программы я не на кассетный магнитофон записывал, а на большой катушечный, сорри, не помню, как называется, но явно не магнитола и явно не магнитофон.

Я помню, первую программу продал кабельному телевидению. Она была написана на Бейсике, и там был простой интерфейс: вводишь номер объявления и текст, и так можно 10 объявлений задать. Потом запускаешь, мол, делай бегущую строку, и на кабельном телевидении моя программа внизу под фильмами бегущей строкой показывала рекламные сообщения.

Когда моего отца спросили, мол, как отблагодарить ребёнка, или можно бесплатно, отец сказал: "Ни в коем случае. Его спросите, что он хочет за проделанную работу". И я тогда, помню, запросил 10 рублей! И мне их оплатили! Вот было счастье при зарплате обычного работяги 100- 200 или инженера 200-300 рублей в месяц.

В общем, технологии шли вперёд, и у меня появился дисковод. Это было бомба! Не надо ждать 5 минут, когда с кассеты или с катушек загрузится программа. Программа грузилась за секунды!

Читать далее

HTML Sanitizer API: конец эпохи DOMPurify и XSS-страданий

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

Инженеры узнают о межсайтовом скриптинге (Cross-Site Scripting, XSS) тремя способами.

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

А есть те, кто узнает о нем через страдания, когда их сайт становится уязвимым. Когда злоумышленник внедряет скрипт, который крадет токены сессий из localStorage, перехватывает файлы cookie или перенаправляет пользователей на фишинговый сайт. Я лично присоединился к клубу «пострадавших» еще в 2005 году, когда встроенная Flash-подпись на форуме, которым я владел, превратилась в кошмар с точки зрения безопасности… но это уже другая история.

В этой статье мы рассмотрим, как браузер, наконец, снимает с нас бремя очистки данных (sanitizing) благодаря новому HTML API Sanitizer.

Читать далее

Релиз Astro 7: переход на Rust, улучшенное кэширование и поддержка AI-разработки

Время на прочтение14 мин
Охват и читатели5.7K

Astro — фреймворк для сайтов, который минимизирует поставку JavaScript на клиент, обеспечивая высокую производительность. 22 июня вышла седьмая версия, в которой разработчики серьёзно прокачали скорость. Компилятор .astro переписали на Rust, туда же перенесли обработку Markdown и MDX, а движок рендеринга заменили на систему с очередями. Вкупе с Vite 8 и новым бандлером Rolldown сборки ускорились на 15–61% по внутренним бенчмаркам. А поскольку самая быстрая сборка — та, которую не нужно запускать вовсе, в Astro 7 также стабилизировали кэширование маршрутов и добавили экспериментальных CDN-провайдеров кэша для Netlify, Vercel и Cloudflare.

В Astro 7 добавили продвинутый роутинг: появляется точка входа src/fetch.ts, дающая полный контроль над конвейером обработки запросов в Astro. Для разработки с участием ИИ Astro теперь умеет определять coding agents, запускать dev-сервер в фоне и выводить структурированные JSON-логи, когда агентам нужен машиночитаемый ответ.

Читать далее

Заменяем JavaScript с помощью HTML и CSS

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

Хабр, привет!

Многие фронтенд-разработчики часто отдают предпочтение JavaScript при реализации интерфейсных элементов. Я же разработчик старой формации. Мы тогда стремились сделать всё с помощью HTML и CSS.

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

Честно говоря, это всё баловство. Но с развитием HTML и CSS появились классные подходы, которые частично заменяют логику, написанную на JavaScript. И мне хочется, чтобы вы использовали их как можно чаще. Поэтому сегодня я поделюсь с вами несколькими техниками, которые вы уже можете использовать в своих проектах.

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

Читать далее

Когда контекстное окно кончается, а проект — нет

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

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

Осознать масштаб

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

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

Привет, сообщество. Где-то два месяца назад мне пришла в голову идея, очень простая по своей сути, но ой как обширная, если начать в ней копаться более подробно.

Читать далее

Дистрибуция Avalonia-приложений под Linux через Flatpak

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

Под Windows и macOS есть универсальные форматы инсталлеров, которые работают на всех версиях этих ОС. А вот с Linux ситуация иная. Экосистема Linux фрагментирована. Применяется несколько разных форматов упаковки приложений. Flatpak решает эту проблему. В этой статье мы делимся опытом разработки Flatpak инсталлера для AvaloniaUI приложения.

Читать далее

Браузерные расширения от А до П, где П — публикация в Google Store

Уровень сложностиСредний
Время на прочтение28 мин
Охват и читатели9.4K

Всем привет! Меня зовут Александр, я продуктовый инженер в KTS.

Недавно мы разрабатывали AI-копайлот для сервис-деска в виде расширения на Chrome. Копайлот подсказывал оператору ответы для клиента на основе контекста диалога, истории обращений и базы знаний компании. Уже на старте стало понятно, что разработка расширений сильно отличается от привычной фронтенд-разработки.

Основная сложность была не столько в реализации конкретных фич, сколько в архитектуре: где должен жить тот или иной код, как организовать взаимодействие между частями расширения и как не заложить проблемы на будущее. Дополнительно добавились нюансы интеграции в страницу и ограничения, связанные с публикацией в Chrome Web Store.

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

Сразу задам фрейм: в статье речь пойдет именно о расширениях для Chrome (Manifest V3), хотя многие подходы будут применимы и к другим браузерам на базе Chromium.

Читать далее

Устал загружать конфиденциальные данные в онлайн-сервисы, поэтому сделал PrivacyKit

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

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

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

Так появилась идея PrivacyKit.

Главный принцип проекта очень простой: если задачу можно выполнить прямо в браузере, то зачем вообще нужен сервер?

Поэтому все инструменты работают локально. Никаких API, регистрации и загрузки данных на бэкенд.

Например, сжатие изображений происходит прямо в браузере:

Читать далее

GenUI: первый взгляд на json-render и MCP Apps

Уровень сложностиСложный
Время на прочтение15 мин
Охват и читатели6K

Чат как интерфейс упирается в потолок. Текст хорош, когда ответ это объяснение или код. Но на запрос «покажи продажи за квартал и сравни с прошлым годом» модель отвечает стеной чисел, в которой ничего не покрутить. Хочется другого: интерактивный дашборд прямо в чате, который при следующей реплике не пересобирается с нуля, а аккуратно обновляется. Очевидное решение — попросить модель сгенерировать React-компонент — оказывается тупиком. Вывод нестабилен: один и тот же промпт сегодня даёт useState, завтра — Zustand. Сгенерированный JSX это исполняемый код, то есть открытая дверь для инъекций: в мае 2025 Invariant Labs показали на официальной GitHub MCP-интеграции, как вредоносный issue провоцирует агент на утечку данных из приватных репозиториев. И главное, что нет инкрементальности: на запрос «добавь фильтр» модель регенерирует весь компонент, состояние теряется, ввод сбрасывается.

Вывод: код это плохой интерфейс между LLM и приложением. Нужен промежуточный слой. Эта статья про два таких слоя: json-render отвечает за то, что и как рендерить из декларативной спецификации, MCP Apps — за то, где и как доставить этот интерфейс в ассистент. По официальному анонсу MCP Apps поддерживаются в Claude, Goose, VS Code Insiders и ChatGPT; json-render заявляет MCP-интеграцию для Claude, ChatGPT, Cursor и VS Code. Через всю статью я протащу один пример: дашборд продаж, который пользователь докручивает репликами «добавь разбивку по регионам», «сравни с прошлым годом», «убери блок». Сразу обозначу жанр: это мой первый пилотный заход в тему, поэтому текст ближе к обзору с пробами, чем к боевому отчёту из эксплуатации.

Читать далее

Что брать на новый проект: валидный дефолт (React) или гринфилд ($mol)

Время на прочтение6 мин
Охват и читатели11K

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

Претензии вроде бы логичные, чтож, давайте разберем их

Читать далее

Создание аналога Firebase на open-source компонентах

Уровень сложностиСложный
Время на прочтение12 мин
Охват и читатели11K

Мы уже разобрались с тем, что такое BaaS, почему появились Firebase и Supabase, чем они отличаются от обычного backend и можно ли самому собрать что-то похожее.

Как я и говорил в прошлой статье, сегодня мы наконец попробуем самостоятельно собрать альтернативу Firebase с Realtime исключительно на open-source компонентах!

Но важная оговорка: мы не будем делать полный клон Firebase с его тонной функционала, но мы соберем минимальную рабочую альтернативу, которую уже можно подключить к frontend через SDK и использовать почти как Firebase.

Читать далее

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

Знакомимся с Cruzo. Часть 1. RxBucket – контейнер состояний и конфигураций компонентов на фронте

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

Не так давно, я наконец выложил на github свой фреймворк cruzo – https://github.com/MaratBektemirov/cruzo. Сам фреймворк писался где-то с 2020г, в свободное от работы время. Причем большую часть времени я потратил на шаблонизатор с реактивными значениями.

Я хотел сделать минималистичный, но в то же время мощный инструмент для создания простых и сложных веб-приложений. Попытался взять хорошие идеи от разных фреймворков и собрать их в одном месте. Одна из таких идей - это RxBucket - контейнер состояний

Читать далее

Сайты под управлением ИИ: как это работает под капотом. Часть 2 из 3

Уровень сложностиСредний
Время на прочтение13 мин
Охват и читатели9.6K

Сайты под управлением ИИ: что это на самом деле и сколько стоит. Часть 1

Это вторая часть из трёх. В первой мы разбирались с концепцией: что такое сайт под управлением ИИ на самом деле, чем он не является, сколько стоит, есть ли инференс в рантайме (спойлер: для посетителя — нет). Если читали — отлично. Если нет — здесь будет понятно и без неё, потому что речь пойдёт про другое: про механику.

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

Читать далее

Велосипедный взрыв

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

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

Читать далее

Как Angular v22 решил проблему дублирующихся host directives

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

Привет, Хабр! Я Святослав Зайцев, занимаюсь разработкой Angular-приложений и внутренних библиотек компонентов в Т-Банке.

Недавно в Angular v22 появилось изменение, которое прошло почти незаметно на фоне более громких новинок. Тем не менее оно снимает одно из ключевых ограничений Directive Composition API.

Если вы используете hostDirectives для переиспользования поведения между директивами и компонентами, то могли сталкиваться с ситуациями, когда вполне логичная композиция внезапно заканчивалась ошибкой NG0309.

В статье разберем, почему так происходило раньше, что изменилось в Angular v22 и как новый механизм дедупликации host directives влияет на архитектуру компонентов и дизайн-систем.

Читать далее

Исключения в реактивных системах

Уровень сложностиСредний
Время на прочтение4 мин
Охват и читатели6.4K

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

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

Исключить эту статью из непрочитанных

Представляем MDN MCP-сервер

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

Мы рады объявить о релизе MDN MCP-сервера. MCP (Model Context Protocol) — это открытый стандарт, который позволяет ИИ-инструментам подключаться к внешним источникам данных. MDN MCP-сервер использует этот протокол, чтобы доставлять документацию MDN и данные о совместимости браузеров прямо в твой редактор кода или IDE.

Читать далее

Делаем P2P-кинотеатр: как мы написали десктопное приложение для совместного просмотра видео на Electron

Уровень сложностиСредний
Время на прочтение4 мин
Охват и читатели6.6K

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

Читать далее
1
23 ...