tproger_web | Unsorted

Telegram-канал tproger_web - Веб-страница

26006

Всё по фронтенду, бэкенду и девопсу в одном месте Разместить рекламу: @tproger_sales_bot Правила общения: https://tprg.ru/rules Другие каналы: @tproger_channels Сайт: https://tprg.ru/site Регистрация в перечне РКН: https://tprg.ru/64ai

Subscribe to a channel

Веб-страница

В VS Code нашли дыру, дающую бесплатный доступ к платным AI‑агентам без списания

Баг в интеграции AI‑расширений обходит лимиты — запросы к платным моделям идут, но токены/подписка не тратятся. Открыли недавно, детали эксплойта не раскрыты. Microsoft уже фиксят.

Для разработчиков — рай, а вот для вендоров — дыра в монетизации. Параллельно всплыли вредоносные AI‑эксты (1.5M установок крадут код). Проверяйте расширения!

Подробности на сайте.

Читать полностью…

Веб-страница

Deno представили Sandbox — изолированную среду для безопасного выполнения JavaScript и TypeScript кода. Позволяет запускать пользовательские скрипты без угрозы для системы.

Зачем нужен

Классическая проблема: нужно дать пользователям запускать код в вашем приложении — ИИ-агенты, плагины, динамические конфиги. Но любой eval() — потенциальная дыра в безопасности.

Deno Sandbox запускает код в лёгких Linux-микровиртуалках в облаке Deno Deploy. Старт меньше секунды, 2 vCPU, до 4 ГБ памяти. Можно ограничить доступ к сети через allowNet и безопасно передавать секреты.

Примеры использования
🔘 Запуск пользовательских плагинов
🔘 Тестирование фрагментов кода без риска
🔘 Выполнение AI-генерируемых скриптов
🔘 Обработка webhook-логики от клиентов

📎 Подробнее в этом видео или в офф. релизе

@prog_tools

Читать полностью…

Веб-страница

Open Props: рецепты @custom-media для медиа‑запросов

С появлением @custom-media (уже есть в Firefox Nightly) у нас появился новый способ работать с медиа-запросами. В связке с Open Props — библиотекой CSS‑переменных для дизайн‑токенов мы можем именовать медиа‑запросы как переменные, чтобы переиспользовать брейкпоинты по‑умному и избежать дублирования.

Как это работает:

В Open Props задаём @custom-media --narrow-window (min-width: 420px);. Потом используем @media (--narrow-window) { ... }. Комбинируем с логическими операторами (not, or), контейнер‑квери (@container, @media (--container: --article > 300px)), поддержкой prefers-reduced-motion. В PostCSS‑плагине Open Props — JIT‑деревошэйкинг для токенов. Это делает дизайн‑системы гибче, брейкпоинты — переиспользуемыми, а код чище.

Почитать подробнее можно в статье.

#css #фронтенд

Читать полностью…

Веб-страница

Когда отладил все баги в коде, избавился от ворнингов и заливаешь сайт на прод, но получаешь ошибки HTTP:

Читать полностью…

Веб-страница

CSS Counters в Atomic CSS: вложенность и наследование

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

Читать полностью…

Веб-страница

Главное, чтобы ещё стул был на колёсиках

Читать полностью…

Веб-страница

OpenAI рассказала, как обслуживает 800 миллионов пользователей ChatGPT на обычном PostgreSQL — больше миллиона запросов в секунду, без кастомных модификаций.

Архитектура: 1 primary инстанс + ~50 read реплик на Azure-инфраструктуре. Latency на p99 — двузначные миллисекунды. Правда, есть нюанс — write-heavy workloads OpenAI вывела в Azure CosmosDB, а в PostgreSQL оставила read-heavy операции.

Что интересно — они не стали городить сложную систему. Вместо этого взяли стандартный PostgreSQL и выжали из него максимум через базовые практики: connection pooling (PgBouncer) для переиспользования соединений вместо создания новых, query optimization для профилирования и переписывания тяжёлых запросов, strategic indexing — индексы ровно там, где нужны.

Для AI-функций используют расширение pgvector — хранят и ищут высокоразмерные векторы (embeddings) для семантического поиска в данных ChatGPT.

База обслуживает данные пользователей, истории разговоров и API-взаимодействия.

➡️ Главный вывод: PostgreSQL действительно масштабируется до экстремальных нагрузок, если правильно настроить. Не нужно сразу бежать за NewSQL или распределёнными системами — сначала стоит выжать всё из проверенных решений.

Инженеры OpenAI подчёркивают: успех в том, что они фокусировались на best practices, а не на переизобретении колеса. Connection pool, индексы, read реплики — это всё есть в документации PostgreSQL. Просто нужно применить грамотно.

Годный пример того, что правильное разделение нагрузки важнее выбора модной БД. PostgreSQL для чтения + CosmosDB для записи — и никакого шардинга одной базы. Простая архитектура побеждает.

📎 OpenAI Blog, Hacker News

@prog_stuff

Читать полностью…

Веб-страница

Сервисы для тестирования безопасности веб-приложений

Постоянно собирать DevSecOps из опенсорса и разбирать сотни алертов — дорого и долго. Эта статья разбирает несколько готовых сервисов, которые берут большую часть боли на себя и закрывают разные уровни безопасности веб‑приложений:

https://tproger.ru/articles/servisy-dlya-testirovaniya-bezopasnosti-veb-prilozhenij

Читать полностью…

Веб-страница

Интервьюер: Напишите код, который отсортирует массив

Я: Array.Sort(массив);

Интервьюер:

Читать полностью…

Веб-страница

Свёрточная нейросеть на чистом JavaScript с визуализацией — без TensorFlow, без библиотек, работает прямо в браузере.

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

Чтобы понять как CNN работает изнутри — отличная штука. Когда пишешь свёртки, пулинг и backprop руками — понимаешь что там происходит лучше, чем после десяти туториалов по PyTorch. Код в одном файле, можно читать последовательно.

📎 Код на GitHub, рабочая демка на сайте автора, на видео скринкаст для ленивых, чтобы не открывать сайт

@neuro_channel

Читать полностью…

Веб-страница

Найдите ошибку в React-компоненте: Функциональное Карри

В этом выпуске «Найди ошибку» у нас есть простой React компонент-переключатель, который переключается между активным и неактивным состояниями при нажатии. Однако он не работает как ожидается. Сможете ли вы найти ошибку и исправить её?

Переходите по ссылке, чтобы проверить свои навыки, а также посмотреть на один из вариантов решения проблемы:

https://tproger.ru/articles/najdi-oshibku-v-react-komponente-funkcionalnoe-karri/

#react

Читать полностью…

Веб-страница

Оно живое: jQuery получил крупное обновление

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

Что исправили

🔘Привели порядок фокус‑событий к актуальному W3C: теперь blur → focusout → focus → focusin, jQuery больше не переопределяет нативное поведение (кроме IE).

🔘Починили и доработали AJAX и события: корректная работа с бинарными данными и JSONP‑ошибками, запрет выполнения скриптов при неуспешных HTTP‑ответах, более надёжная обработка фокуса/blur и предотвращение падений при удалении элементов.

🔘Много точечных багфиксов по CSS, селекторам, манипуляции DOM и data‑атрибутам: корректные размеры col, работа contents() у <object>, улучшенные тесты под зум, Bootstrap и др.

Что нового

🔘Поддержка Trusted Types: TrustedHTML можно безопасно передавать в методы манипуляции DOM под CSP require-trusted-types-for.

🔘Большинство асинхронных загрузок скриптов теперь через <script>`‑теги, XHR остаётся только для отдельных случаев (например, с кастомными `headers).

🔘Исходники переведены с AMD на ES‑модули, сборка через Rollup, добавлены именованные экспорты и улучшена совместимость с ESM+CommonJS и современными сборщиками.

🔘Появились .even() и .odd() как замена старым POS‑псевдоклассам :even и :odd.

🔘Slim‑сборка стала ещё компактнее (~19.5 kB gzipped) и теперь без Deferred/Callbacks, с упором на нативные Promises.

Что важного

🔘Список поддерживаемых браузеров серьёзно обновлён: выкинули IE < 11, Edge Legacy, старые iOS, Firefox и Android Browser; IE 11 уберут уже в jQuery 5.0, для олдскула рекомендуют остаться на 3.x.

🔘Массово вырезаны устаревшие API (jQuery.isArray, jQuery.parseJSON, jQuery.trim, jQuery.type, jQuery.now, jQuery.isNumeric, jQuery.isFunction, jQuery.isWindow, jQuery.camelCase, jQuery.nodeName, jQuery.cssNumber, jQuery.cssProps, jQuery.fx.interval и др.) — теперь нужно использовать нативные аналоги (Array.isArray(), JSON.parse(), String.prototype.trim(), Date.now() и т.п.).

🔘Из прототипа jQuery убраны внутренние push, sort, splice; при необходимости их следует вызывать через массивные методы ([].push.call($elems, elem) и т.д.).

🔘За счёт удаления легаси под старые IE и депрекейтед‑API размер ядра уменьшился более чем на 3 kB gzipped.

🔘Для перехода есть upgrade‑гайд и свежий jQuery Migrate, а релиз доступен на CDN и в npm (npm install jquery@4.0.0, плюс slim‑версии на code.jquery.com).

Ну что, пора возвращаться на классику?

Читать полностью…

Веб-страница

⚡️ ​​24 челенжда на знание CSS от freeCodeCamp

На протяжении всех заданий вы будете воссоздавать компоненты и макеты из популярных приложений, таких как GitHub или CodePen, повторяя/проверяя свою подкованность в "ванильном" CSS: https://youtu.be/TzuWIHGFKCQ

➡️ по-моему это лучше чем любой адвент-календарь

Читать полностью…

Веб-страница

Скрытые функции Google Chrome для разработчика

Chrome Dev Tools — один из самых популярных инструментов среди веб-разработчиков. Однако в неём есть некоторые полезные функции, о которых большинство разработчиков не знает. 

В этой статье вы сможете узнать о пяти основных функциях Chrome DevTools, которые могут вам пригодиться:

https://webformyself.com/skrytye-funkcii-google-chrome-dlya-razrabotchika/

#devtools #инструменты

Читать полностью…

Веб-страница

React наконец-то решил свою самую большую проблему

Помните недавний сбой у CloudFlare? Небольшая ошибка положила пол интернета. А дело было реактовском useEffect. Да, даже опытные разработчики и крупные компании могут облажаться при использовании этого хука. В команде React сделали выводы и добавили новый хук useEffectEvent, который позволяет избежать неправильной работы системы.

Подробнее о нём в статье.

#react

Читать полностью…

Веб-страница

В вашей команде также?

Читать полностью…

Веб-страница

Deno представили Sandbox — изолированную среду для безопасного выполнения JavaScript и TypeScript кода. Позволяет запускать пользовательские скрипты без угрозы для системы.

Зачем нужен

Классическая проблема: нужно дать пользователям запускать код в вашем приложении — ИИ-агенты, плагины, динамические конфиги. Но любой eval() — потенциальная дыра в безопасности.

Deno Sandbox запускает код в лёгких Linux-микровиртуалках в облаке Deno Deploy. Старт меньше секунды, 2 vCPU, до 4 ГБ памяти. Можно ограничить доступ к сети через allowNet и безопасно передавать секреты.

Примеры использования
🔘 Запуск пользовательских плагинов
🔘 Тестирование фрагментов кода без риска
🔘 Выполнение AI-генерируемых скриптов
🔘 Обработка webhook-логики от клиентов

📎 Подробнее в этом видео или в офф. релизе

@prog_tools

Читать полностью…

Веб-страница

14 февраля собираемся на «Я 💛 Фронтенд» 2026 — главную фронтенд-конференцию Яндекса для тех, кто создаёт современные интерфейсы.

Участников ждут доклады о применении веб-компонентов, использовании LLM, переходе от традиционной адаптивности к новому подходу, о том, как локальные ИИ-модели помогают космической отрасли, и другие.

А ещё в программе много интерактива: баттл по вёрстке на HTML/CSS, CSS арт‑челлендж, викторина по фронтенду с призами, подведение итогов CTF-турнира и другие активности от команд Яндекса.

Ведущие конференции — Никита Дубко и Саша Шинкевич.

Пока ждёте ивент, заходите на сайт — там можно найти все онлайн-активности: от традиционного Capture the flag до live-стримов.

Присоединяйтесь онлайн и офлайн в Москве. Не откладывайте регистрацию — количество мест в офлайне ограничено.

Читать полностью…

Веб-страница

Lodash получил первый security-релиз за несколько лет. Версия 4.17.23 закрывает CVE-2025-13465 — prototype pollution в функциях `_.unset` и `_.omit`

Благодаря этой уязвимости атакующий может удалять методы из Object.prototype, но не перезаписывать их. Затронуты версии 4.0.0–4.17.22 всех пакетов: lodash, lodash-es, lodash-amd. Отдельный пакет lodash.unset патча не получил.

Обновление обратно совместимо — никаких breaking changes. Можно обновляться без опасений.

Проверьте свой проект:

npm ls lodash lodash-es lodash-amd


Если версия <= 4.17.22 — обновляйтесь:

npm update lodash


Lodash годами был без мейнтейнеров. Тесты не запускались, security-отчёты копились, инфраструктура деградировала. OpenJS Foundation и Sovereign Tech Agency профинансировали реанимацию проекта. Создали Technical Steering Committee, восстановили CI/CD, формализовали процессы. Теперь Lodash может отвечать на уязвимости и выпускать релизы.

В планах Lodash 5.0 — агрессивное удаление API с нативными заменами, меньший размер, отказ от legacy runtime.

Читать полностью…

Веб-страница

Зачем это всё начал, непонятно...

Прощай, вайб-кодинг: разработчик вернулся к ручному коду после 2 лет с ИИ

Разработчик под ником atmoio два года писал код в основном через нейросети, но в итоге почти полностью отказался от «вайб-кодинга». Оказалось, что на длинной дистанции ИИ-генерация создает больше проблем, чем решает.

Три главных поинта, которые он понял:

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

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

3. Со временем даже сам ИИ начинает путаться в сгенерированной им кодовой базе. Исправление ошибок съедает всё время, сэкономленное на старте.

Автор оставил ИИ только для мелких вспомогательных задач. Теперь он работает быстрее и увереннее, потому что полностью контролирует архитектуру и логику своего продукта.

Подробности на сайте.

@your_tech

Читать полностью…

Веб-страница

🤖 Краулер Meta накрутил счёт за хостинг в 60 раз

Разработчик обнаружил, что бот Meta (meta-externalagent) отправил на его сайт 11 млн запросов за месяц, почти половину от трафика реальных пользователей. Googlebot за то же время сделал лишь 1,1 млн.

Все запросы шли на страницы с серверным рендерингом. Кэширование не помогло: краулеры заходят на уникальные URL один раз и уходят. Счёт Vercel вырос с $30 до $1 933.

Фикс — пара строк в robots.txt:

User-agent: meta-externalagent
Disallow: /


Вопрос к Vercel: почему защита от агрессивного краулинга не включена по умолчанию?
И к Meta: зачем 11 млн запросов — ради превью ссылок?

Вряд ли они мне тут ответят, конечно.

Читать полностью…

Веб-страница

Ещё один совет вообще для всех разработчиков

Читать полностью…

Веб-страница

GRT Calculator — подбираем размер шрифта на основе золотого сечения

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

Подробнее:

https://grtcalculator.com/

#фронтенд #инструменты

Читать полностью…

Веб-страница

Наклоняем телефон, чтобы ваш UI ожил

Забудьте статичные фолбэки на мобилках. Акселерометр телефона заменяет мышь: наклонил — карточки повернулись в 3D, потряс — элементы «поплыли». Такой подход добавляет интерактивности сайту, а также открывает простор для использования нестандартных механик, созданных специально для мобильных устройств.

Инструкция по реализации в статье.

Читать полностью…

Веб-страница

Web Almanac 2025: реальные данные о состоянии веба

Web Almanac 2025 — это ежегодный отчёт HTTP Archive о состоянии веба. Он сочетает сырые данные с мнениями экспертов. В издании 16 глав: контент страниц, UX, публикация и дистрибуция.

Данные собраны с 16+ млн сайтов. Идеально для тех, кто хочет понимать тренды веба.

Читать полностью…

Веб-страница

Разрабы руинят личную жизнь пользователей

Читать полностью…

Веб-страница

PostDad — TUI-клиент для тестирования API, написанный на Rust. Альтернатива Postman, но прямо в терминале.

В свежей версии добавили поддержку WebSocket. Переключение режимов через Ctrl+W, можно подключаться к ws:// и wss:// эндпоинтам, отправлять сообщения в реальном времени и скроллить историю.

Зачем этот проект? Со слов автора:

Postman стал тяжёлым — electron, 500+ МБ RAM, обязательный аккаунт. PostDad — лёгкий TUI, работает в терминале, не требует регистрации. Для тех, кто живёт в консоли и не хочет открывать браузер ради одного GET-запроса.


Что умеет
🔘GET/POST/PUT/DELETE запросы
🔘WebSocket соединения
🔘Работа с headers и body
🔘Всё в TUI без GUI

Альтернативы в этой нише
🔘Bruno — десктоп, open source, хранит коллекции в git-friendly формате
🔘Hoppscotch — браузерный, лёгкий, self-hosted
🔘HTTPie — CLI, но без TUI

PostDad выделяется именно TUI-интерфейсом — интерактивно, но в терминале.

📎 Код на GitHub, установка cargo install PostDad

@prog_tools

Читать полностью…

Веб-страница

Сложный круговой прогрессбар — простая реализация

Круговые прогрессбары обычно делают на SVG или Canvas. Но оказывается, всё это можно собрать на одном div и одном background-image — если знать, как работают градиенты и современные возможности CSS.

В этом видео вы сможете шаг за шагом собрать круговой индикатор прогресса на чистом CSS: с анимацией, реактивной логикой и динамической сменой цветов — без JavaScript и без SVG.

Читать полностью…

Веб-страница

У меня почему-то не открывается. В чем может быть проблема?

Читать полностью…

Веб-страница

Google Chrome теперь поддерживает HTML-элемент <geolocation>

Начиная с Chrome 144, вы можете использовать новый HTML-элемент <geolocation>. Он представляет собой существенное изменение в том, как сайты запрашивают данные о местоположении пользователя — от запросов на разрешение, запускаемых скриптами, к декларативному, ориентированному на действия пользователя интерфейсу. Это позволяет уменьшить количество шаблонного кода, необходимого для обработки состояний разрешений и ошибок, и обеспечивает более сильный сигнал о намерениях пользователя, что помогает избежать вмешательств браузера (например, блокировок).

Подробнее об обновлении в блоге Chrome.

Читать полностью…
Subscribe to a channel