Let’s Encrypt готовит сертификаты к post-quantum эпохе
Вебу придётся жить с post-quantum TLS не в теории, а в браузерах, цепочках сертификатов и размерах handshake. Let’s Encrypt разобрали, как они подходят к post-quantum будущему сертификатов.
Новые алгоритмы меняют размер ключей, подписи, цепочки и требования к инфраструктуре. Для обычного сайта это пока не задача на завтра, но для CDN, хостингов, CA и браузеров подготовка уже идёт.
Вебу придётся жить с 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-валидацию.
Если когда-нибудь парсили 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-валидацию.
timothygu.me
URL parser tester
❤4👍1
CSS ломает голову не только фронтендерам
matklad написал разбор CSS с позиции человека, которому нужно сверстать страницу, но который не хочет внезапно становиться специалистом по каскаду.
Получился хороший список мест, где CSS неприятен: browser defaults, wrapper-слои, layout без единого универсального алгоритма, selectors как наследование на стероидах, margin collapsing,
Мне нравится, что текст не превращается в нытьё. Это скорее практичная карта минного поля: что стоит зафиксировать в reset, где не полагаться на дефолты и почему семантический HTML часто упрощает CSS сильнее, чем очередная обёртка. Особенно пригодится вайб-кодерам.
matklad написал разбор CSS с позиции человека, которому нужно сверстать страницу, но который не хочет внезапно становиться специалистом по каскаду.
Получился хороший список мест, где CSS неприятен: browser defaults, wrapper-слои, layout без единого универсального алгоритма, selectors как наследование на стероидах, margin collapsing,
box-sizing, font-size и line-height.Мне нравится, что текст не превращается в нытьё. Это скорее практичная карта минного поля: что стоит зафиксировать в reset, где не полагаться на дефолты и почему семантический HTML часто упрощает CSS сильнее, чем очередная обёртка. Особенно пригодится вайб-кодерам.
matklad.github.io
CSS: Unavoidable Bad Parts
An ersatz CSS tutorial for people who need to style a web page, but aren't web developers. I am a wrong person to write this kind of thing, as I have neither the time, nor experience. I'd much rather read a book about this. Alas, I had to learn all this stuff…
👍6😁4🤣2
Forwarded from Типичный программист
x86-эмулятор, который работает на одном CSS
Разработчица собрала x86 CPU emulator без JavaScript, без WebAssembly и без привычного runtime — только на CSS.
Это не кандидат на прод и не новая платформа для вычислений. Ценность в другом: CSS здесь используют как странную вычислительную модель с состояниями, селекторами и каскадом, которые внезапно начинают напоминать машину выполнения.
История хороша как инженерный фокус. Подробности по ссылке
Разработчица собрала x86 CPU emulator без JavaScript, без WebAssembly и без привычного runtime — только на CSS.
Это не кандидат на прод и не новая платформа для вычислений. Ценность в другом: CSS здесь используют как странную вычислительную модель с состояниями, селекторами и каскадом, которые внезапно начинают напоминать машину выполнения.
История хороша как инженерный фокус. Подробности по ссылке
👍3❤1
Node.js готовит security-релизы на 17 июня
Версии должны выйти 17 июня или вскоре после этой даты. Деталей уязвимостей пока нет, и это нормально для coordinated release: сначала патчи, потом подробности.
Анонс короткий, но action item из него вполне конкретный.
Версии должны выйти 17 июня или вскоре после этой даты. Деталей уязвимостей пока нет, и это нормально для coordinated release: сначала патчи, потом подробности.
Анонс короткий, но action item из него вполне конкретный.
👍3❤1
Chrome тестирует WebMCP для сайтов, с которыми будут работать агенты
В Chrome 149 открылся origin trial для WebMCP. Это API, через который сайт сможет явно описывать агенту действия, состояние страницы и назначение элементов интерфейса. В примерах у Chrome — сложные формы, диагностические страницы и интерфейсы, где человеку понятно по контексту, а модели приходится гадать.
Я бы пока смотрел на это осторожно: origin trial — не стандарт. Но сама идея важная для веба: интерфейсы начинают проектировать не только для людей и скринридеров, но и для ИИ.
В Chrome 149 открылся origin trial для WebMCP. Это API, через который сайт сможет явно описывать агенту действия, состояние страницы и назначение элементов интерфейса. В примерах у Chrome — сложные формы, диагностические страницы и интерфейсы, где человеку понятно по контексту, а модели приходится гадать.
Я бы пока смотрел на это осторожно: origin trial — не стандарт. Но сама идея важная для веба: интерфейсы начинают проектировать не только для людей и скринридеров, но и для ИИ.
❤4👍2
Чистое API на Node.js
Когда server.js разрастается до лабиринта, читать его становится больно. На такой случай я бы сохранил это руководство. Там собран минимальный, но продакшен-готовый скелет API на Node.js: роутер, контроллер, сервис и схема валидации живут каждый в своём слое. А
Валидация через Zod стоит на границе — до бизнес-логики, версионирование по
Когда 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. Скорее как хороший чек для себя: сколько клиентского состояния вы держите только потому, что фреймворк сделал это самым очевидным путём?
Если у вас в веб-приложении половина боли начинается со слов «а теперь синхронизируем frontend state с backend state», The Tao of Datastar стоит открыть хотя бы ради контраста.
Идея простая, но не всем приятная: backend остаётся source of truth, фронт получает HTML-patches и signals, а долгие обновления идут через SSE. Даже оптимистичные апдейты авторы советуют не тащить по привычке, а показывать честный loading до подтверждения сервера.
Я бы не воспринимал это как религию против SPA. Скорее как хороший чек для себя: сколько клиентского состояния вы держите только потому, что фреймворк сделал это самым очевидным путём?
❤3👍1
Forwarded from Представляешь,
Chrome решил, что старые блокировщики вам больше не нужны
Классический uBlock Origin в Chrome проработает до конца июня. Chrome 150 уберёт обходной флаг, в июле Chrome 151 добьёт остатки поддержки Manifest V2, старой платформы расширений. Старые блокировщики не запустятся.
Google объясняет это сложностью, техническим долгом и рисками для безопасности. Честный перевод — фильтрует слишком хорошо. Останутся uBlock Origin Lite и AdGuard на Manifest V3, новой платформе расширений, но с жёстким лимитом правил: реклама может прорываться, фильтры могут обновляться реже.
Нужен чистый трафик? План Б. Можно перейти на Firefox или другой браузер с поддержкой MV2. На Tproger.
Классический 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 Transitions, но столкнулись с проблемами.
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. Новое приложение объявляет
Установленные 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 или формами.
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-параметра выглядит перебором.
Prop For That — маленькая JS-библиотека, которая прокидывает в CSS custom properties значения вроде позиции мыши, scroll velocity, viewport, visibility или значения input.
Смысл не в том, что теперь надо всё писать атрибутами. Интереснее другое: часть интерактива можно оставить в CSS, а JS использовать как тонкий слой данных. Получается удобный формат для hover-эффектов, реакций на скролл, микровзаимодействий и прототипов.
Сохраняем для случаев, когда React-компонент ради одного CSS-параметра выглядит перебором.
nerdy.dev
Prop For That
Everything JS knows, now CSS knows.
❤6
Как мы проскочили путь от первого iPhone и сложной разработки под мобильные устройства до эпохи ИИ? Что случилось и к чему это привело — в третьей части цикла об истории российского IT.
Мобильный бум застал индустрию врасплох: было непонятно, как адаптировать сайты под маленькие экраны и что делать со слабой связью. Решением стали нативные приложения — их начали разрабатывать многие компании. Так мы пришли к эпохе супераппов, где собрано всё и сразу.
Приложений, проектов и стартапов становилось больше — начался расцвет российского IT. Но разработчиков не хватало, и на сцену вышли курсы, школы и онлайн-уроки. Желающих войти в профессию оказалось огромное количество, и рынок быстро перегрелся. Теперь новичков заменяет ИИ, а найти работу — задача со звёздочкой. Сегодня гонка за лучшими программистами превратилась в гонку ИИ-инфраструктур.
Так решения порождали новые проблемы, а российская IT-индустрия вышла на новый уровень сложности. Подробнее — в материале на Tproger.
Мобильный бум застал индустрию врасплох: было непонятно, как адаптировать сайты под маленькие экраны и что делать со слабой связью. Решением стали нативные приложения — их начали разрабатывать многие компании. Так мы пришли к эпохе супераппов, где собрано всё и сразу.
Приложений, проектов и стартапов становилось больше — начался расцвет российского IT. Но разработчиков не хватало, и на сцену вышли курсы, школы и онлайн-уроки. Желающих войти в профессию оказалось огромное количество, и рынок быстро перегрелся. Теперь новичков заменяет ИИ, а найти работу — задача со звёздочкой. Сегодня гонка за лучшими программистами превратилась в гонку ИИ-инфраструктур.
Так решения порождали новые проблемы, а российская IT-индустрия вышла на новый уровень сложности. Подробнее — в материале на Tproger.
❤1👍1
Если вы фронтендер и вам нужен бэкенд, этот разбор стоит сохранить
Автор собрал учебный Task Manager API на FastAPI так, чтобы за один проект пройти структуру, SQLAlchemy-модели, Pydantic-схемы, отдельный
Сохранил бы тем, кто переходит от учебных скриптов к полноценному API и хочет разложить файлы по полочкам. Разбор с кодом на GitHub.
#restapi #фронтенд #бэкенд
Автор собрал учебный 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 и плагины. Для веб-разработчика это способ быстро дать данным лицо или собрать внутреннюю админку без полноценного бэкенда.
Теперь в нём появился плагин
Я бы сохранил для прототипов и внутренних админок: вместо связки бэкенд+фронтенд получается самодостаточный блок, который сразу работает с SQLite. Потрогать можно на agent.datasette.io.
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 стоит сохранить, если редактируете зоны.
Если вы меняли хостинг или прикручивали CDN, то видели, как новые записи встают не сразу — кто-то уже попадает на новый сервер, а кто-то ещё стучится в старый. Виноват не фреймворк, а разница между двумя ролями DNS.
Авторитетный сервер считается источником правды для вашего домена: именно он отвечает за его DNS-записи. Рекурсивный резолвер выступает посредником: ходит от корня к TLD, затем к авторитетному серверу и кеширует ответ на своей стороне. Именно кеш резолверов, а не «где-то там в интернете», создаёт задержку при propagation.
Понимание этой разницы помогает быстрее диагностировать, почему одни пользователи видят новую версию сайта, а другие продолжают видеть старую. Разбор от DNS Assistant стоит сохранить, если редактируете зоны.
❤4
Forwarded from Точка входа в программирование
Почему
Кажется, что добавить
Так «асинхронность» расползается по коду заразно: вдруг половина проекта завёрнута в Promise, хотя реальной работы с сетью или файлами там нет. Читать такой код сложнее — непонятно, где настоящее ожидание ответа от сервера, а где просто возврат готовой переменной.
Правило проще, чем кажется: если внутри функции нет
async без await — плохая привычкаКажется, что добавить
async к функции «на всякий случай» безопасно. На деле вы меняете правила работы функции: она начинает возвращать не готовое значение, а Promise. Теперь каждый, кто её вызывает, обязан писать await, а значит, и его вызывающие тоже становятся async-функциями.Так «асинхронность» расползается по коду заразно: вдруг половина проекта завёрнута в Promise, хотя реальной работы с сетью или файлами там нет. Читать такой код сложнее — непонятно, где настоящее ожидание ответа от сервера, а где просто возврат готовой переменной.
Правило проще, чем кажется: если внутри функции нет
await, не пишите перед ней async. Добавите потом за минуту, когда это реально понадобится. Разбор Мэтта Смита поможет почувствовать разницу.😁12🤯1
Forwarded from Точка входа в программирование
Почему код иногда ведёт себя странно: учимся думать как JS-движок
Когда вы только начинаете учить JavaScript, легко запомнить синтаксис и повторять за примерами. Но иногда код ведёт себя не так, как ожидается, и без понимания, как движок выполняет инструкции, разобраться трудно.
Сумит Саха на freeCodeCamp разбирает, как устроен JavaScript изнутри: область видимости переменных, замыкания, события и асинхронность. Не просто синтаксис, а то, что происходит за кулисами.
Начните с простого эксперимента: объявите переменную снаружи функции и ещё одну — внутри. Функция увидит внешнюю, а вот извне внутреннюю не прочитать. Посмотрите на ошибку: так область видимости перестаёт быть абстракцией.
Когда вы только начинаете учить JavaScript, легко запомнить синтаксис и повторять за примерами. Но иногда код ведёт себя не так, как ожидается, и без понимания, как движок выполняет инструкции, разобраться трудно.
Сумит Саха на freeCodeCamp разбирает, как устроен JavaScript изнутри: область видимости переменных, замыкания, события и асинхронность. Не просто синтаксис, а то, что происходит за кулисами.
Начните с простого эксперимента: объявите переменную снаружи функции и ещё одну — внутри. Функция увидит внешнюю, а вот извне внутреннюю не прочитать. Посмотрите на ошибку: так область видимости перестаёт быть абстракцией.
❤2