Latest posts
Веб-страница
22 Sept, 11:02
Когда ИТ-проекту нужно быстро масштабироваться, а своего железа нетЗнакомая ситуация: публичное облако удобно для большинства сервисов, но для части нагрузок — платёжных систем, хранения персональных данных, соответствия требованиям регуляторов — нужна физическая изоляция. Своё железо эту задачу решает. Но дальше начинается: закупка серверов, настройка гипервизора, разворачивание Kubernetes и постоянное обслуживание всего этого руками команды.Yandex Cloud анонсировала BareMetal Extend — изолированные физические серверы с уже развёрнутой инфраструктурой под конкретные задачи: — Extend: Virtualization — виртуальные машины и распределённое хранилище под backend и базы данных; — Extend: Stackland — деплой и управление веб-приложениями и сервисами; — Extend: Managed Service for Kubernetes® — кластер под контейнеризованные сервисы и микросервисную архитектуру.Подходит, например, когда: —
Веб-страница
22 Sept, 08:06
Как сверстать диагональную шапку таблицы доступнееЭрик Мейер разбирает шапку таблицы Apollo 16: угол разделён диагональю между подписями строк и столбцов. Доступность двух span в одной ячейке показалась ему сомнительной.Он оставил подписи в двух строках thead, растянул заголовки на обе строки через rowspan и наложил вторую строку на первую. Диагональ рисует CSS-градиент. Safari не применяет относительное позиционирование к thead, поэтому потребовался обход через @supports.В разборе Эрика Мейера есть код. Базовые тесты не выявили крупных проблем, но гарантии для всех экранных дикторов нет. Если нужна такая ячейка, сохраните табличную семантику, проверьте раскладку в Safari и навигацию в экранных дикторах.
Веб-страница
22 Sept, 05:02
Как публиковать блог через Standard.site и AT ProtocolStandard.site задаёт схему JSON-записей для статей в сети Bluesky. Материал получает известные сервисам поля, поэтому pckt, Docs.surf, potatonet и Leaflet могут показать его без отдельной интеграции, а Bluesky собирает расширенное превью.Для запуска нужны две записи: одна описывает издание, вторая статью. В разборе Piccalilli показана реализация на JavaScript через официальный пакет @atproto/api: авторизация, создание записей и необязательная проверка связи с доменом.Я сохранил этот маршрут для эксперимента с переносимым блогом: можно начать с одной статьи и проверить, какие сервисы AT Protocol её подхватят. Пароль приложения стоит держать в переменной окружения: он даёт полный доступ к аккаунту и обходит многофакторную аутентификацию.
Веб-страница
21 Sept, 17:16
Фреймворки меняются, а логика и процессы в работе над проектами всегда останутся главными. В подборке разбираем, как задача проходит путь от бэклога до релиза, какие стратегии деплоя не роняют прод и как подходить к модернизации легаси, а заодно как перестроить мышление при переходе с React на Angular. Дополняют её тексты про работу с выделенной командой и безопасность, от многофакторки до ловушек формального контроля в ИБ.Как выстроить работу с выделенной командой Как работает IT-команда: путь задачи от бэклога до релиза 7 стратегий модернизации легаси Стратегии деплоя, которые не роняют прод Как сделать ИБ по-настоящему надёжной Зачем бизнесу многофакторка Использование разных фреймворков качает мозг
Веб-страница
21 Sept, 14:12
Почему HTML-атрибут accept ухудшает загрузку файлов и чем его заменитьАтрибут accept в поле загрузки оставляет доступными только заданные типы файлов, а остальные делает серыми. Часть пользователей не замечает это состояние, нажимает на недоступный файл и решает, что интерфейс сломан.Защитой такой фильтр всё равно не служит: перетаскивание файла позволяет его обойти, размер он не проверяет, а Firefox на Android его не поддерживает. Значит, обработка ошибок всё равно нужна.Практический вариант: заранее перечислить допустимые форматы в подсказке, но не рассчитывать, что её прочитают. После выбора проверить файл и сразу показать ошибку, по которой понятно, что исправить. Аргументы и примеры интерфейса собраны в разборе атрибута accept.
Веб-страница
21 Sept, 08:04
Как уместить динамическую карту мира в 10 КБКарта Calibre показывает пользовательские сессии по странам, а цвет передаёт оценку опыта на основе производительности сайта. При сборке создаётся статический SVG; приложение загружает его и задаёт цвета странам через CSS-переменные.Скрипт на Node.js упрощает границы в GeoJSON библиотекой Turf, переносит их на карту через d3-geo и относит ячейки к странам. Один шестиугольник описан в SVG один раз, а 2164 экземпляра ссылаются на него. Файл весит 144 КБ, после Gzip при передаче остаётся 10 КБ.Приём подходит для лёгкой обзорной карты без масштабирования и панорамирования. Упрощение съедает детали: Тасмания не помещается в ячейку шириной около 4 пикселей, а США разрываются по краям. В разборе Calibre показаны конвейер сборки и настройка светлой и тёмной тем.
Веб-страница
21 Sept, 05:00
Как перенести поиск по 272 тысячам слов в браузер на Rust и WebAssemblyПоисковик работает как статический сайт: JavaScript загружает и распаковывает словари, управляет интерфейсом, а модуль WebAssembly, собранный из Rust, индексирует слова, фильтрует и сортирует результаты. Запросы остаются на устройстве пользователя, сервер поиска не нужен.Словарь разбит на 26 сжатых файлов по первой букве. Для набора RETAINS браузер скачивает семь нужных частей. Слова с одинаковым набором букв собираются под общим ключом, где буквы отсортированы по алфавиту. Движок сравнивает их количество в ключе и запросе, поэтому отбрасывает целые группы до проверки отдельных слов.Разбор архитектуры пригодится при проектировании браузерного инструмента с тяжёлыми локальными вычислениями. Учтите ограничение: модуль работает синхронно в основном потоке, поэтому широкий запрос может заблокировать интерфейс.
Веб-страница
20 Sept, 11:14
Как проверять CSS после рефакторинга с ИИПять ИИ-инструментов получили HTML и CSS карточки и одинаковый запрос на рефакторинг. Все убрали очевидные повторы, но хуже справились с каскадом: чистка могла менять оформление и поведение компонента.Одна из ловушек: .promo-active .card .badge имеет ту же специфичность, что и .card .badge.badge-new. Здесь !important гарантирует оранжевый цвет промобейджа независимо от порядка правил. Без него результат зависит от порядка. В обычном состоянии карточки ошибка не видна.После рефакторинга проверяйте наведение, динамические классы, обрезку текста и границы селекторов. В тесте LogRocket Blog собраны семь ловушек, таблица результатов для пяти инструментов и файлы всех вариантов.
Веб-страница
20 Sept, 08:10
Как защитить списание кредитов в Django от гонки запросовУ аккаунта один кредит. Два запроса читают баланс до первого сохранения, оба проходят проверку и записывают ноль. Сервис принимает две генерации, хотя баланс не уходит в минус. Поэтому проверка на отрицательный баланс баг не ловит.В руководстве ошибку воспроизводят, затем закрывают транзакцией базы данных и блокировкой строки аккаунта. Проверку баланса, списание и запись принятого запроса объединяют в одну защищённую операцию. Пример работает на Django 5.2, Django REST Framework 3.16 и PostgreSQL 17. SQLite не подходит: он не реализует нужную блокировку строк.В разборе freeCodeCamp есть настройка проекта и тест двух запросов, которые претендуют на последний кредит. Открывайте его перед ревью логики лимитов: найдите разрыв между чтением и записью, затем перенесите решение внутрь транзакции.
Веб-страница
20 Sept, 05:06
Как анимировать перестройку CSS Grid без JavaScriptВ разборе приёма содержимое каждой плитки привязывают к её ячейке через CSS Anchor Positioning. Перемещение при изменении ширины контейнера анимирует обычный переход свойства inset.Ячейка Grid виртуальна, поэтому якорем служит дополнительная обёртка. Она получает anchor-name, а anchor-scope позволяет повторять это имя в других ячейках без конфликтов. Блоку с контентом задают абсолютное позиционирование и фиксированные размеры, чтобы он не растягивался при движении.Анимацию можно прервать: плитки сразу направятся к новым позициям, не дожидаясь предыдущего перехода. JavaScript не нужен. В Firefox приём сейчас не анимируется, поэтому для интерфейса во всех браузерах понадобится запасной вариант.
Веб-страница
19 Sept, 19:29
Как защитить API от повторной оплатыКлиент не получил ответ и повторил POST. Сервер мог уже списать деньги, поэтому повтор может привести ко второй оплате. Идемпотентность решает это: несколько одинаковых запросов дают тот же результат, что один.В разборе на DEV Community показаны три подхода. Клиент создаёт ключ один раз и передаёт его при каждом повторе. Сервер атомарно сохраняет ключ, HTTP-статус и идентификатор платежа, а при дубле возвращает их без нового списания. Если запись определяет адрес почты, из него получают стабильный идентификатор и обновляют одну строку. Проверка версии защищает от одновременных изменений, но сама не делает запрос идемпотентным.Начните с методов API с побочным эффектом: разделяйте ключи по пользователю и операции, отклоняйте тот же ключ с другими данными и отправьте 50 одновременных запросов, чтобы убедиться, что списание происходит один раз.
Веб-страница
19 Sept, 16:25
Как заблокировать отрисовку JavaScript, не останавливая HTML-парсерКогда компоненту нужно измерить размеры и переставить элементы до первого отображения, блокировка парсера не гарантирует результат: браузер может показать полученный HTML, а скрипт перед компонентом ещё не увидит его узлы.Атрибут blocking="render" у script задерживает отрисовку, но не мешает парсеру читать HTML дальше. Работает с модулями и внешними файлами, но сетевой запрос увеличит задержку. Поэтому скрипт лучше сделать маленьким и встроить в HTML.В разборе Джея Фристоуна скрипт измеряет место в навигации и перед показом переносит лишние пункты в дополнительное меню. Так нет вспышки исходной вёрстки и видимого сдвига. Используйте приём точечно, когда компонент зависит от размеров элементов.
Веб-страница
19 Sept, 13:21
Почему box-shadow не заменяет outline для фокусаCSS-тень даёт больше свободы в оформлении фокуса. Но в режиме принудительных цветов браузер вычисляет box-shadow как none. Пользователь не видит, какая кнопка в фокусе.Простой вариант: обычный outline. Если нужна тень, не отключайте контур через outline: none: задайте outline: 2px solid transparent и outline-offset: 2px. В обычном режиме контур прозрачен, а при принудительных цветах становится видимым в палитре пользователя.Проверить компонент можно в Chromium DevTools: вкладка Rendering, параметр forced-colors со значением active. Добавьте сценарий в чеклист доступности, а разбор Manuel Matuzović используйте как памятку с двумя вариантами CSS.
Веб-страница
18 Sept, 16:21
Курсорная пагинация для API: когда она надёжнее OFFSETOFFSET удобен, пока выборка невелика и не меняется между запросами. На таблице из 1,2 млн строк в PostgreSQL 15 выдача 20 строк с OFFSET 1 000 000 заняла 2,4 секунды, а запрос по курсору выполнялся за 3 мс.База читает пропущенные строки и отбрасывает их. OFFSET каждый раз отсчитывает позиции от текущего начала выборки, поэтому вставки и удаления между запросами дают дубликаты или пропуски. Курсор хранит ID последней полученной записи и продолжает после неё.В примере на FastAPI запрос выбирает на одну строку больше лимита: она показывает, есть ли продолжение. При сортировке по времени создания нужен курсор и индекс из двух полей, created_at и ID, иначе записи с одинаковым временем могут пропасть.Оставляйте OFFSET для небольших стабильных данных и перехода к странице N. Для растущей ленты или синхронизации выбирайте курсор.
Веб-страница
18 Sept, 06:57
Облачная подборка. В ней поговорим о том, любят ли сейчас компании облака так же как раньше, что делать с S3-хранилищами и где можно добыть GPU-мощностей!Почему компании возвращают нагрузки из публичного облака в 2026 году Гибридное облако: что оставить у себя, а что вынести в публичный контур Облако или свои серверы: почему бизнес выбирает гибридную инфраструктуру Кто отвечает за работу облачной инфраструктуры: бизнес или провайдер VPS или облачный IaaS в 2026: когда дешёвый сервер перестаёт справляться Где арендовать GPU в 2026 GPU-серверы для LLM-инференса S3 в инфраструктуре: где объектное хранилище помогает, а где не заменит файловую систему Как хранить бэкапы в S3, чтобы их не удалил сбой или вирус
Веб-страница
17 Sept, 19:44
Почему font-family не берёт запасной шрифт у родителяЕсли на body задан стек system-ui, sans-serif, а на h1 только «Open Sans», браузер не вернётся к стеку body. Объявление заголовка самодостаточно: пока веб-шрифт грузится, браузер исчерпает его список и возьмёт свой шрифт по умолчанию, часто Times New Roman.Если у шрифтов различаются ширина и высота символов, замена запасного шрифта веб-шрифтом может сдвинуть элементы и ухудшить CLS, показатель неожиданных смещений макета.Исправление: задавайте полный стек при каждом переопределении, например font-family: "Open Sans", sans-serif;. Harry Roberts объясняет механику на CSS Wizardry. Проверьте переменные дизайн-системы: после имени веб-шрифта нужен хотя бы общий запасной вариант вроде sans-serif.
Веб-страница
17 Sept, 16:40
Большая ИИ-подборка о разном. В ней прикладные задачи, фреймворки и модели, а также немного о том, как ИИ повлиял на информационную безопасность. (И мем)ИИ в разных прикладных задачах: Как ML вычисляет фейковые отзывы и накрутку рейтингов 15 бизнес-задач для автоматизации через ИИ ИИ в работе мобильного банкира Как финансовые организации сокращают расходы и убирают ручной ввод документов Распознавание документов в браузере Как распознать паспорт на Python за 5 минутПро модели, фреймворки и работу с ИИ: Модели для кода в 2026: Claude, GPT, Gemini, DeepSeek, Qwen Вайб-кодинг в терминале: настраиваем OpenCode с Claude, GPT и Gemini Как выбрать фреймворк для ИИ-агентов Почему ИИ-агент тупеет на большом проекте Что меня ждало, когда я решил стать вайб‑кодером Можно ли аналитику в 2026 году положиться на ИИ и агентов или ещё нет?Инфобез и ИИ: Вайб-кодинг как мечта хакера: какие
Веб-страница
17 Sept, 15:30
Как проверить ограничитель запросов в многопроцессном Node.jsЛокальный ограничитель показывает идеальные интервалы, пока сервер получает пачку запросов. В эксперименте с Bottleneck шесть воркеров при настройке на два запроса в секунду сообщали о паузах 495,8 мс, но вместе выдавали серверу 14,04 запроса в секунду.Библиотека работала по документации: local не синхронизирует процессы. Контрольный запуск через Redis удержал суммарную частоту на двух запросах в секунду.Если приложение запущено через Node.js cluster, PM2 в cluster-режиме или несколько контейнеров, проверяйте не отчёт ограничителя, а интервалы прихода на HTTP-сервер. Намеренно отключите координацию и убедитесь, что тест замечает всплеск. Иначе заданный предел окажется пределом для каждого процесса.
Веб-страница
17 Sept, 12:25
Когда в CSS нужны контейнерные запросыМедиазапрос смотрит на окно браузера. Поэтому условие min-width: 1024px сработает на экране шириной 1920 пикселей даже для карточки шириной 300 пикселей. Тесному компоненту достанется раскладка для широкого экрана.Контейнерный запрос проверяет ширину родительской обёртки. Порог 450 пикселей переводит карточку в горизонтальную раскладку. Такой компонент можно переносить в сайдбар, не переписывая условие под ширину окна.В разборе Smashing Magazine тот же принцип применяют к шрифту: cqi вместе с clamp() масштабирует его относительно контейнера. Оставляйте медиазапросы для структуры страницы, а контейнерные используйте для карточек, форм и виджетов.
Веб-страница
17 Sept, 09:11
Как собрать современный CSS reset для нового проектаВ наборе Josh W. Comeau сохранены разумные браузерные стили и добавлена база для предсказуемой вёрстки. box-sizing: border-box включает границы и внутренние отступы в заданную ширину элемента, а внешние отступы сбрасываются у всех элементов, кроме dialog.Для текста задан межстрочный интервал 1,5 и более аккуратное распределение строк в абзацах и заголовках. Формы наследуют шрифт. Так меньше базовых исключений приходится исправлять в стилях компонентов.Используйте набор при старте нового проекта. Для существующей кодовой базы автор предупреждает о риске незаметно сломать интерфейс изменением базовых стилей. Если всё же добавляете reset, тщательно протестируйте результат. Код и объяснение каждого правила есть в разборе Josh W. Comeau.
Related Channels
Other channels in the same section of the catalogue.
