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

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

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

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

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

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
Let’s Encrypt готовит сертификаты к post-quantum эпохе

Вебу придётся жить с post-quantum TLS не в теории, а в браузерах, цепочках сертификатов и размерах handshake. Let’s Encrypt разобрали, как они подходят к post-quantum будущему сертификатов.

Новые алгоритмы меняют размер ключей, подписи, цепочки и требования к инфраструктуре. Для обычного сайта это пока не задача на завтра, но для CDN, хостингов, CA и браузеров подготовка уже идёт.
👍5❤2
URL — это не строка, а источник маленьких несовпадений

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

URL Parser Tester сравнивает поведение разных парсеров прямо в браузере. Для этого авторы тянут реализации через WebAssembly и Web Workers, а потом показывают, где расходятся Python, Go, Node.js, libcurl, Firefox, Safari и WHATWG URL.

Там есть хорошие примеры: `file://` с Windows UNC paths, invalid percent encoding, IDNA, нормализация пути. Я бы держал такой инструмент под рукой перед тем, как писать свою «простую» URL-валидацию.
❤4👍1
CSS ломает голову не только фронтендерам

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

Получился хороший список мест, где CSS неприятен: browser defaults, wrapper-слои, layout без единого универсального алгоритма, selectors как наследование на стероидах, margin collapsing, box-sizing, font-size и line-height.

Мне нравится, что текст не превращается в нытьё. Это скорее практичная карта минного поля: что стоит зафиксировать в reset, где не полагаться на дефолты и почему семантический HTML часто упрощает CSS сильнее, чем очередная обёртка. Особенно пригодится вайб-кодерам.
👍6😁4🤣2
Forwarded from Типичный программист
x86-эмулятор, который работает на одном CSS

Разработчица собрала x86 CPU emulator без JavaScript, без WebAssembly и без привычного runtime — только на CSS.

Это не кандидат на прод и не новая платформа для вычислений. Ценность в другом: CSS здесь используют как странную вычислительную модель с состояниями, селекторами и каскадом, которые внезапно начинают напоминать машину выполнения.

История хороша как инженерный фокус. Подробности по ссылке
👍3❤1
🤣32
Node.js готовит security-релизы на 17 июня

Версии должны выйти 17 июня или вскоре после этой даты. Деталей уязвимостей пока нет, и это нормально для coordinated release: сначала патчи, потом подробности.

Анонс короткий, но action item из него вполне конкретный.
👍3❤1
Chrome тестирует WebMCP для сайтов, с которыми будут работать агенты

В Chrome 149 открылся origin trial для WebMCP. Это API, через который сайт сможет явно описывать агенту действия, состояние страницы и назначение элементов интерфейса. В примерах у Chrome — сложные формы, диагностические страницы и интерфейсы, где человеку понятно по контексту, а модели приходится гадать.

Я бы пока смотрел на это осторожно: origin trial — не стандарт. Но сама идея важная для веба: интерфейсы начинают проектировать не только для людей и скринридеров, но и для ИИ.
❤4👍2
Чистое API на Node.js

Когда server.js разрастается до лабиринта, читать его становится больно. На такой случай я бы сохранил это руководство. Там собран минимальный, но продакшен-готовый скелет API на Node.js: роутер, контроллер, сервис и схема валидации живут каждый в своём слое. А errorHandler превращает исключения в HTTP-ответы в одном месте.

Валидация через Zod стоит на границе — до бизнес-логики, версионирование по /api/v1 закладывается с первого дня, а Swagger не допиливается на коленке в релизный день. Новую фичу потом можно добавить папкой, а не рефакторингом. Читайте, как устроить слои.
❤3🔥2
Datastar предлагает вернуть состояние туда, где ему спокойнее

Если у вас в веб-приложении половина боли начинается со слов «а теперь синхронизируем frontend state с backend state», The Tao of Datastar стоит открыть хотя бы ради контраста.

Идея простая, но не всем приятная: backend остаётся source of truth, фронт получает HTML-patches и signals, а долгие обновления идут через SSE. Даже оптимистичные апдейты авторы советуют не тащить по привычке, а показывать честный loading до подтверждения сервера.

Я бы не воспринимал это как религию против SPA. Скорее как хороший чек для себя: сколько клиентского состояния вы держите только потому, что фреймворк сделал это самым очевидным путём?
❤3👍1
Chrome решил, что старые блокировщики вам больше не нужны

Классический uBlock Origin в Chrome проработает до конца июня. Chrome 150 уберёт обходной флаг, в июле Chrome 151 добьёт остатки поддержки Manifest V2, старой платформы расширений. Старые блокировщики не запустятся.

Google объясняет это сложностью, техническим долгом и рисками для безопасности. Честный перевод — фильтрует слишком хорошо. Останутся uBlock Origin Lite и AdGuard на Manifest V3, новой платформе расширений, но с жёстким лимитом правил: реклама может прорываться, фильтры могут обновляться реже.

Нужен чистый трафик? План Б. Можно перейти на Firefox или другой браузер с поддержкой MV2. На Tproger.
❤4🔥3
Почему 3D View Transition внезапно выглядит плоским

View Transition API легко продаётся красивыми демками: одна страница превращается в другую, карточки перелетают, всё плавно. А потом добавляете 3D-transform, и эффект почему-то схлопывается в обычную плоскую анимацию.

На CSS-Tricks разобрали типичную ловушку: браузер создаёт отдельное дерево псевдоэлементов для перехода, и 3D-контекст там ведёт себя не так, как в исходной DOM-структуре. Приходится понимать ::view-transition-*, transform-style, stacking context и то, где именно теряется глубина.

Полезный текст, если вы уже пробовали View Transitions, но столкнулись с проблемами.
❤3
PWA теперь можно перевезти на новый адрес без ручной переустановки

Установленные PWA долго были жёстко привязаны к origin. Поменяли домен, путь или архитектуру — и пользователь фактически оставался со старым приложением, которое нельзя аккуратно перевезти на новый адрес.

Chrome 150 добавляет PWA Origin Migration. Новое приложение объявляет migrate_from в manifest, старый origin подтверждает миграцию через .well-known/web-app-origin-association, а пользователь получает update-like диалог вместо ручного удаления и новой установки.
❤7
Кастомный select наконец становится настоящим select, а не div-театром в Safari

WebKit разобрал главное правило customizable select: кастомизировать можно, но нельзя ломать смысл option.

Теперь можно менять оформление, добавлять richer UI, пользоваться новым поведением Safari 27, но текстовая сущность option всё ещё должна оставаться понятной браузеру и ассистивным технологиям.

Хорошее чтение для всех, кто хоть раз собирал свой dropdown и потом внезапно получал проблемы с клавиатурой, screen reader или формами.
👍5❤2
CSS может получать живые данные со страницы без большого фреймворка

Prop For That — маленькая JS-библиотека, которая прокидывает в CSS custom properties значения вроде позиции мыши, scroll velocity, viewport, visibility или значения input.

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

Сохраняем для случаев, когда React-компонент ради одного CSS-параметра выглядит перебором.
❤6
Как мы проскочили путь от первого iPhone и сложной разработки под мобильные устройства до эпохи ИИ? Что случилось и к чему это привело — в третьей части цикла об истории российского IT.

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

Приложений, проектов и стартапов становилось больше — начался расцвет российского IT. Но разработчиков не хватало, и на сцену вышли курсы, школы и онлайн-уроки. Желающих войти в профессию оказалось огромное количество, и рынок быстро перегрелся. Теперь новичков заменяет ИИ, а найти работу — задача со звёздочкой. Сегодня гонка за лучшими программистами превратилась в гонку ИИ-инфраструктур.

Так решения порождали новые проблемы, а российская IT-индустрия вышла на новый уровень сложности. Подробнее — в материале на Tproger.
❤1👍1
Если вы фронтендер и вам нужен бэкенд, этот разбор стоит сохранить

Автор собрал учебный Task Manager API на FastAPI так, чтобы за один проект пройти структуру, SQLAlchemy-модели, Pydantic-схемы, отдельный crud.py и маршруты через APIRouter. Получается 10 эндпоинтов для пользователей и задач — узнаваемая схема сервиса, а не игрушка.

Сохранил бы тем, кто переходит от учебных скриптов к полноценному API и хочет разложить файлы по полочкам. Разбор с кодом на GitHub.

#restapi #фронтенд #бэкенд
👍6❤2👎2
Datasette Apps: HTML-приложения внутри инструмента для публикации SQLite

Datasette — это опенсорсный инструмент, который выставляет SQLite-базы как веб-интерфейс: таблицы, SQL-запросы, JSON API и плагины. Для веб-разработчика это способ быстро дать данным лицо или собрать внутреннюю админку без полноценного бэкенда.

Теперь в нём появился плагин datasette-apps: HTML+JS-приложения, которые живут внутри Datasette и читают SQL прямо из браузера. Песочница жёсткая — iframe без cookies и localStorage, плюс CSP блокирует внешние запросы. Как пишет Саймон Уиллисон, даже если приложение сломают, приватные данные не уйдут со страницы. Запись возможна только через заранее сохранённые SQL-запросы.

Я бы сохранил для прототипов и внутренних админок: вместо связки бэкенд+фронтенд получается самодостаточный блок, который сразу работает с SQLite. Потрогать можно на agent.datasette.io.
❤2
Авторитетный и рекурсивный DNS: зачем фронтендеру это знать

Если вы меняли хостинг или прикручивали CDN, то видели, как новые записи встают не сразу — кто-то уже попадает на новый сервер, а кто-то ещё стучится в старый. Виноват не фреймворк, а разница между двумя ролями DNS.

Авторитетный сервер считается источником правды для вашего домена: именно он отвечает за его DNS-записи. Рекурсивный резолвер выступает посредником: ходит от корня к TLD, затем к авторитетному серверу и кеширует ответ на своей стороне. Именно кеш резолверов, а не «где-то там в интернете», создаёт задержку при propagation.

Понимание этой разницы помогает быстрее диагностировать, почему одни пользователи видят новую версию сайта, а другие продолжают видеть старую. Разбор от DNS Assistant стоит сохранить, если редактируете зоны.
❤4
Почему async без await — плохая привычка

Кажется, что добавить async к функции «на всякий случай» безопасно. На деле вы меняете правила работы функции: она начинает возвращать не готовое значение, а Promise. Теперь каждый, кто её вызывает, обязан писать await, а значит, и его вызывающие тоже становятся async-функциями.

Так «асинхронность» расползается по коду заразно: вдруг половина проекта завёрнута в Promise, хотя реальной работы с сетью или файлами там нет. Читать такой код сложнее — непонятно, где настоящее ожидание ответа от сервера, а где просто возврат готовой переменной.

Правило проще, чем кажется: если внутри функции нет await, не пишите перед ней async. Добавите потом за минуту, когда это реально понадобится. Разбор Мэтта Смита поможет почувствовать разницу.
😁12🤯1
Почему код иногда ведёт себя странно: учимся думать как JS-движок

Когда вы только начинаете учить JavaScript, легко запомнить синтаксис и повторять за примерами. Но иногда код ведёт себя не так, как ожидается, и без понимания, как движок выполняет инструкции, разобраться трудно.

Сумит Саха на freeCodeCamp разбирает, как устроен JavaScript изнутри: область видимости переменных, замыкания, события и асинхронность. Не просто синтаксис, а то, что происходит за кулисами.

Начните с простого эксперимента: объявите переменную снаружи функции и ещё одну — внутри. Функция увидит внешнюю, а вот извне внутреннюю не прочитать. Посмотрите на ошибку: так область видимости перестаёт быть абстракцией.
❤2