Веб-страница
22.7K subscribers
1.97K photos
559 videos
2 files
4.18K links
Всё по фронтенду, бэкенду и девопсу в одном месте

Разместить рекламу: @tproger_sales_bot

Правила общения: https://tprg.ru/rules

Другие каналы: @tproger_channels

Сайт: https://tprg.ru/site

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
Ghost: Postgres, который можно форкнуть под каждую задачу агента

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

Установка: curl -fsSL https://install.ghost.build | sh. Дальше CLI и интеграция для ИИ-агентов (MCP): можно скопировать продакшн-базу в изолированную копию перед миграцией или генерацией кода. Если агент что-то сломает, удаляете окружение и берёте следующее.

Жёсткие лимиты расходов не дают счёту уйти в бесконечность. Подробнее про Ghost.
3
Прототип готов, надо выкатить его на живых пользователей и проверить гипотезу. Но поднимать полноценную инфраструктуру и разбираться с биллингом AWS ради первой версии — так себе идея.

Собрали семь хостингов, где можно арендовать виртуалку, накатить окружение через Docker и вернуться к разработке и проверке гипотез.

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

Проверьте, как быстро и хорошо работает ваша память: сыграйте в «Меморину»!
2
Forwarded from Типичный программист
Авторы Wasp отказались от собственного языка спустя 5 лет и $5M

Братья-близнецы из Y Combinator задумали Wasp как «Terraform для веб-стека»: один конфиг, который описывает и бэкенд, и фронтенд, и базу. Звучало разумно, но для этого DSL они придумали свой язык. Разработчики вокруг понимали мотивацию (не хочется собирать стек из десятка конфигов вручную), но писать бизнес-логику на кастомном языке с куцей поддержкой IDE оказалось не тем, ради чего стоит бросать JS/TS.

Прошло пять лет и $5M инвестиций. Главный инсайт: ценность Wasp не в синтаксисе, а в высокоуровневой спецификации приложения, которую и человеку, и ИИ проще читать. Сейчас конфиг переписывают на TypeScript, сохраняя ядро. Интересно, как долго они убеждали себя, что язык — необходимость, прежде чем признать ошибку. Подробности в блоге авторов.
4
Forwarded from Типичный программист
Что происходит под капотом у Google Docs и Figma: CRDT, которые можно потрогать руками

CRDT — это способ синхронизировать состояние между устройствами так, чтобы каждый писал локально, а в итоге все видели одно и то же. Без центрального сервера, блокировок и разборок «кто прав» — просто математика, которая гарантирует сходимость.

Я обычно такие темы обхожу стороной: слишком много теории и мало кода. Но этот разбор идёт от обратного: сначала строит примитив, потом складывает из него структуры посложнее, а в конце даёт интерактивный редактор пиксель-арта, где можно порвать связь между двумя канвасами и увидеть, как они сами собираются обратно.
👍21
HTML берёт выбор картинки на себя

Если вы когда-нибудь мучились с srcset/sizes, знайте — браузер скоро сделает это за вас. Мэт Маркиз, который 14 лет назад возглавлял RICG и протащил отзывчивые картинки в платформу, теперь пишет, что пришло время упростить подход.

Идея в том, чтобы заменить сложный синтаксис выбора источников на буквально пару символов в разметке. Меньше дублирования картинок, меньше ошибок с sizes, меньше JS-обёрток. Пользователи получат прирост производительности почти бесплатно.

Пока это proposal, так что в прод тащить рано. Подробности в статье Маркиза.
👍62
Кэш браузера перестал дублировать одну страницу под каждым набором параметров

Меня всегда раздражало, что page.html?utm_source=google и page.html?utm_source=yandex лежат в кэше отдельно. HTTP-заголовок No-Vary-Search наконец позволяет сказать браузеру: игнорируй указанные query-параметры при формировании ключа кэша.

Гарри Робертс разбирает, как исключить параметры, игнорировать их порядок и при этом оставить неизвестные параметры «пробивающими» кэш — чтобы случайный ?foo=bar не подменял контент.

Поддержка уже есть в Chromium; для Safari/Firefox пока не везде, поэтому я бы использовал No-Vary-Search как прогрессивное улучшение и проверил поведение в инструментах разработчика, прежде чем полагаться на заголовок в продакшене.
2👍1
Деструктуризация в JS: когда она мешает, а не помогает

Мэтт Смит разобрал, почему перестал разбивать объекты на переменные по первой же возможности. Привычка вроде const { status } = project экономит пару символов, но в длинной функции status превращается в магическую переменную: приходится листать вверх, чтобы вспомнить, откуда она взялась.

Его правило: оставляйте точку. project.status сразу говорит, из какого объекта значение, а голая status — нет. То же с post.title или user.name: повторять объект не страшно, если контекст остаётся на виду. Деструктурируйте только когда объект уже очевиден из окружения — например, внутри короткого колбэка.

Такой подход упрощает поддержку кода: меньше магических переменных, меньше когнитивной нагрузки, проще читать спустя месяцы. Разобрался Смит здесь.
👍8😁41
WP2Shell: удалённое выполнение кода в ядре WordPress

Если у вас WordPress 6.9.0–6.9.4 или 7.0.0–7.0.1, отложите чтение и проверьте версию. WordPress выпустил патчи 6.9.5, 7.0.2 и 6.8.6, а компании Patchstack, Hexastrike и WatchTowr уже видят реальные атаки.

Баг в ядре, а не в плагине: CVE-2026-63030 — путаница маршрутов в /wp-json/batch/v1, которая работает вместе с CVE-2026-60137, SQL-инъекцией в параметре author__not_in. На стоковой установке это даёт удалённое выполнение кода без авторизации.

WordPress.org включил принудительные автообновления, но я бы не доверял автоматике вслепую: запустите wp core version, обновитесь вручную и проверьте логи на обращения к /wp-json/batch/v1. Что ещё делать: в материале.
3
Forwarded from IT Юмор
🫡9😁51
React.iss.onemo не спасает, если в пропсы летят inline-объекты

Поисковая строка тормозит список, Profiler рисует 200 лишних рендеров, а вы уже обернули всё в React.iss.onemo и добавили useCallback на обработчики. Виноват обычно один JSX-паттерн: style={{ padding: 16 }} или колбэк прямо в разметке. memo сравнивает пропсы через Object.is, а для объектов и функций это проверка по ссылке: каждый рендер родителя создаёт новую ссылку, и React снова рисует дочерний компонент.

Меня убедили цифры из эксперимента: 200 memoизированных строк на один keystroke рендерились 243,9 мс, после стабилизации ссылок — 6 мс. Поэтому статические объекты выносите за пределы компонента, а useCallback добавляйте только там, где колбэк реально уходит в memoизированного потомка. Хуки «на всякий случай» не помогут: сначала меряйте в Profiler.

Полный разбор с примерами
8
Видеофайл на 50 КБ может выполнить код на вашем устройстве

В FFmpeg нашли 16-летнюю уязвимость PixelSmash. Она живёт в декодере MagicYUV: AVI, MKV или MOV размером с картинку вызывает запись за пределами буфера и открывает удалённое выполнение кода. Серьёзность: 8.8 из 10 по шкале CVSS, то есть «высокая».

MagicYUV включён везде по умолчанию «для вашего удобства». Поэтому плееры, мессенджеры, NAS и облачные транскодеры принимают вредоносное видео без вопросов, лишь бы система сгенерировала превью.

Проверьте себя командой из материала: если в выводе есть magicyuv, обновите FFmpeg или пересоберите с флагом --disable-decoder=magicyuv. За 16 лет она успела разойтись повсюду.
3
contrast-color() в CSS: браузер выберет цвет текста

Функция contrast-color() берёт фоновый цвет и отдаёт чёрный или белый — тот, у которого контраст выше. Браузер считает это на этапе вычисления стилей, до отрисовки страницы, без JS и без вспышек при гидратации. HTTP Archive и WebAIM фиксируют: большинство сайтов всё ещё не проходят WCAG-проверки контраста. Вместо очередной JS-библиотеки можно доверить эту математику CSS.

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

#фронтенд #css
7
CSS ::checkmark обещает убрать лишний JavaScript из кастомных дропдаунов

Псевдоэлемент ::checkmark из CSS Form Control Styling Module Level 1 позволяет стилизовать галочку выбранного пункта в нативном <select> без кастомной разметки и скриптов. Вместо div-обёртки, стрелочки и ручной навигации с клавиатуры вы задаёте appearance: base-select и переопределяете content у ::checkmark.

Ловушка в двух ограничениях: на момент статьи он не работает в Safari и Firefox, а в остальных браузерах поддерживается только для <option> внутри <select> — чекбоксы и радиокнопки пока недоступны. Поэтому кастомные контролы пока остаются нужны.

Подробности в разборе Сунканми Фафоворы.
5
🤣22👍3
Отлаживать WASM в Chrome оказалось удобнее, чем кажется

Если вы компилируете что-то в WebAssembly, отладка сгенерированного кода обычно боль. Eli Bendersky показывает, что в Chrome DevTools уже есть полноценный WASM-отладчик: в Sources → Page → wasm лежит декомпилированный WAT. Можно ставить точки останова, смотреть локальные переменные и стек вызовов.

Особенно полезен режим паузы на исключениях. В WASM многое ломается на инструкциях вроде ref.cast, и без debugger'а вы видите только красную строку в консоли. С включённым «Pause on exceptions» DevTools остановится прямо на виноватой инструкции и покажет, откуда она взялась.

В статье — рабочий сценарий: компилируете WAT через watgo, раздаёте локально через http.server, открываете в Chrome и ловите баги в gc-print-scheme-pairs. Я бы сохранил этот материал на случай, когда придётся разбираться в чужом WASM-модуле или своём компиляторе.
3
Obs.js подстраивает сайт под устройство и сеть

Если страница летает на десктопе, а на мобильном еле шевелится, виноват не всегда код. Гарри Робертс собрал браузерные сигналы о соединении, мощности устройства и батарее в библиотеку Obs.js, чтобы фронтенд мог подстраиваться под реальные условия читателя.

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

Библиотека даёт сигнал, но решение за вами: упростить анимации, отложить скрипты или убрать эффекты. Поддержка зависит от браузерных API, поэтому я бы начал с одного сценария и использовал бы её как прогрессивное улучшение. Подробности у Робертса.
👍51
GEO приходит на смену SEO: что делать веб-разработчику

Поисковая строка всё чаще уступает место чат-ботам: люди задают вопросы в ChatGPT, Perplexity, Copilot, Gemini и Claude. HackerNoon считает, что традиционный SEO умирает, а на смену приходит GEO — генеративная оптимизация, где важен не рейтинг, а упоминание ИИ-ассистентом.

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

Учитывайте этот сдвиг при проектировании лендинга, документации или раздела блога: если блок можно процитировать, у него есть шанс стать источником для генеративного ответа. Разбор на HackerNoon.
3🔥2
Remix 3 beta: фреймворк уходит от React и забирает у бандлера последнее слово

Если вас раздражает, что фреймворк диктует, как жить импортам и что происходит с запросом, посмотрите на Remix 3 beta preview. Команда React Router переписала его с нуля: вместо React runtime — форк Preact с императивной моделью, роуты стали Fetch API роутами, а контроллеры возвращают веб-Response.

Мне тут особенно интересны frames: серверные фрагменты с src, которые подгружаются независимо. Некоторые сравнивают их с HTMX, но это внутри самого Remix. Ещё unbundling — Remix сам компилирует и раздаёт ассеты, у импортов пропадает особая семантика.

Источник.
🗿4
Дизайнеры теперь отдают код

Вместо макетов дизайнер всё чаще сдаёт в прод прототипы, собранные ИИ-агентами. Рынок ответил на спор «должен ли дизайнер кодить»: UX/UI-роли требуют разработки с ИИ и production-ready доставки. Для фронтендера это меняет интерфейс работы: вы получаете работающий, но не всегда чистый код, и придётся отстаивать ревью перед релизом.

Самый цепкий момент для меня, пожалуй, цифры: спрос на UX/UI/Product Design растёт на 16% к 2034, а дизайнерские навыки обогнали кодинг и облака в ИИ-продуктах. Компании хотят перевод технической возможности в человечный интерфейс, поэтому договариваться об архитектуре придётся раньше.

Как пишет автор статьи, сгенерированный функционал — это ещё не хороший функционал.
3😁3🫡2
Ternlight: поиск по смыслу прямо в браузере, без сервера и ключей

Ternlight превращает текст в векторы и ищет по смыслу прямо в браузере на CPU. Весь пакет включает модель, токенизатор и движок вывода и занимает ≈7 МБ, а сервер, GPU и API-ключи не нужны. Установка: npm i @ternlight/base, после чего embed() даёт 384-мерный вектор, а similar() ранжирует небольшую выборку документов за ≈5 мс на одной вкладке.

Это можно воспринимать как Fuse.js, но с поиском по смыслу вместо символов: библиотеку вешаете на страницу документации или справки, и она находит «как отменить подписку», даже если пользователь написал «хочу вернуть деньги». Демо работает офлайн, посмотрите на ternlight.dev/demo.

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