Обновить
256K+

Веб-разработка *

Делаем веб лучше

224,38
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Честная кнопка: как сравнить нажатия игроков, если у всех разный пинг

Уровень сложностиПростой
Время на прочтение9 мин
Охват и читатели4.8K

Мы делаем ЖМЯК — Свою игру в браузере: табло на телевизоре или ноутбуке, а кнопки — телефоны игроков. Ничего не нужно ставить, гости заходят по QR-коду и вводят только имя.

Главное в такой игре — кнопка. Вопрос прочитан, все тянутся к телефонам, кто-то нажал первым — он и отвечает. И вот тут быстро выясняется неприятное: в браузерной игре первым часто оказывается не самый быстрый игрок, а тот, у кого быстрее интернет.

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

Читать далее

Новости

Собственный видеосервер с современным плеером и гео распределением на замену Vimeo

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели4.7K

В связи с частичными блокировками Cloudflare с середины прошлого года, используемый нами сервис Vimeo для хостинга товарных видео (9000 видео, 3 тб) работал с перебоями и требовал замены.

Основным требованием была - собственная независимая от поставщиков платформа в зоне RU в отраслевых стандартах видеохостингов и современным плеером умеющим переключать качество видео в зависимости от скорости интернета.

Читать далее

Как я один создал браузер для бухгалтеров: история BELPORTAL от снимков реестра до WebView2 и 56 млн скачиваний

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели4.1K

Когда-то работа бухгалтера с госпорталами была настоящим квестом: IE, ActiveX и километры инструкций. Я расскажу, как один создал BELPORTAL — программу, которую скачали 56 млн раз. Путь от снимков реестра Windows до полноценного браузера на WebView2, борьба с кризисом Avest и спасение отчетных периодов.

Читать далее

Как мы написали свой EASM, потому что ни один из готовых не подошёл

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели4.5K

Типичная история: маркетинг на скорую руку поднял лендинг под акцию, разработчики открыли тестовый контур наружу, чтобы коллегам было удобнее проверять код. Никто не делал ничего плохого, но в инвентаризацию эти ресурсы не попали. Служба ИБ узнаёт о них постфактум, а нередко уже после инцидента. Классические инструменты тут не помогают: SIEM работает с известными источниками логов, NGFW фильтрует трафик через известные шлюзы. Актива, которого нет в реестре, они просто не видят. 

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

Под катом рассказываем, как устроен наш EASM, как мы боремся с ложными срабатываниями и что оказалось самым сложным в разработке (и стоило нам немало бессонных ночей). Вэлком!

Читать далее

Третий месяц вайб-дебажу настолку в браузере. На что уходит столько времени

Уровень сложностиПростой
Время на прочтение20 мин
Охват и читатели4.3K

Веб-версию своей настолки делаю пятый месяц, три из которых уже ушли на вайб-дебагинг. «Release любой ценой» это карточная игра про хаос IT-разработки.

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

Нас в проекте двое плюс модели. Коллега-разработчик держит движок и сеть, я же за то, что видно на экране, и за правила. Прочитать код я могу, а вот понять нет. Разбор пойдёт от того, что я вижу на экране третий месяц подряд, как в дне сурка.

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

Читать далее

Liferay в gov секторе — как тяга к халяве, ой, то есть к OpenSource доводит до CWE-319

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели9.6K

Товарищи, 6 часов назад я просто хотел зарегистрироваться на одном государственном сервисе и спокойно лечь спать, но сейчас, в три, мать его, часа ночи я сижу и пишу этот текст потратив свой вечер на responsible disclosure и попытки выяснить, кто же в этой богадельне отвечает за протоколы безопасности, что бы моё письмо не ушло в почту тому же "специалисту" который накатил коробочный Liferay с дефолтными конфигами и сейчас спокойно сопит в своей постельке.

Выговорился. А теперь - к делу.

Все русскоязычные стримы в Postgres раз в 10 минут: 2 млн строк вместо 30 млн и баг, в котором я три недели винил VK

Время на прочтение4 мин
Охват и читатели10K

Каждые 10 минут в русскоязычном эфире Twitch и VK Видео Live в среднем 7 200 каналов. Писать их как есть - больше миллиона строк в сутки. Я храню агрегаты, и за четыре недели вышло 2 млн строк. Расскажу, как это устроено и где я три недели искал проблему не там.

Я Максим, разработчик, вечерами пишу LanolStream - инструменты для стримеров, которые мы делаем вместе со стримершей lanolkid. Стримеры часто спрашивают «во сколько лучше стримить» и «много ли у меня зрителей для моей игры». Чтобы отвечать цифрами, а не ощущениями, нужен весь рынок, а не только наши каналы.

Читать далее

Чистый контур — агентская прачечная для вашего грязного легаси

Уровень сложностиСредний
Время на прочтение5 мин
Охват и читатели8.2K

Два из трех API-вызовов возвращали HTTP 500. Агенты поколениями лепили заплатки поверх заплаток, пока код не превратился в клубок нейросоплей.

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

В статье механизм переноса, 15 правил защиты от новых костылей и эксперимент на 36 запусках DeepSeek: насколько поведение агента зависит от того, какой код и какие правила ему показывают.

Войти в чистый контур

Quill в Next.js App Router, editor, autosave и HTML viewer с подсветкой кода

Время на прочтение10 мин
Охват и читатели5K

WYSIWYG-редактор в Next.js App Router затрагивает несколько слоев приложения. Quill работает с DOM и browser API, поэтому сам редактор живет на клиенте. Контент нужно хранить отдельно от экземпляра Quill, передавать в компонент при смене сущности, сохранять на сервер и затем показывать без toolbar и режима редактирования.
Если хранить результат Quill как HTML, редактор и viewer могут работать с одной строкой contentHtml. Editor меняет HTML через onChange. Autosave отправляет новую версию после паузы во вводе. Viewer получает сохраненный HTML и отдельно обрабатывает элементы, которые Quill использует для code blocks. Для подсветки кода добавляется highlight.js.

Читать далее

N+1 в Eloquent: воспроизводим на стенде, считаем запросы и закрываем регрессии тестами

Время на прочтение14 мин
Охват и читатели5K

Про N+1 в Laravel обычно пишут три строки про with() и расходятся. Я собрал небольшой стенд на Laravel 13 и SQLite, воспроизвёл проблему, посчитал запросы для каждого способа лечения и проверил, что «не ловится» режимом запрета ленивой загрузки. Отдельно разобрал места, где eager loading не помогает или сам создаёт нагрузку. Все числа в статье получены на этом стенде на искусственных данных.

Читать далее

Чёрный октябрь уязвимостей: что задело мой сервер, как я закрыл дыры и почему ушёл на статику без инлайн‑скриптов

Уровень сложностиСредний
Время на прочтение30 мин
Охват и читатели7K

У меня круглосуточно работают агенты мониторинга: программы, которые по кругу собирают данные по моим проектам, в том числе бюллетени безопасности, и сверяют их с тем, что стоит на серверах. На очередном круге они подняли октябрьскую сводку: 15 уязвимостей за месяц, все «critical» и «high» — PHP, Nginx, Node.js, Next.js, Java, GitLab. Такие списки обычно пролистывают. Я сел и проверил каждую строку руками: что это на самом деле, задевает ли меня и чем это лечится.

Итог для начала:

Читать руководство

До какого места дочитывают ваши статьи: делаем процентильную аналитику прокрутки для WordPress

Уровень сложностиПростой
Время на прочтение9 мин
Охват и читатели6K

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

Хуже того, ответа не даёт и «средняя глубина прокрутки», которая есть почти в каждом сервисе веб-аналитики. О том, почему она врёт и как я решал обе задачи в бесплатном плагине AnGo Scroll Analytics для WordPress, — эта статья. Внутри: процентили вместо среднего, трекер на чистом JavaScript, отправка данных через sendBeacon, upsert с GREATEST() и принцип «клиент враждебен».

Читать далее

Читать свои книги без подписок и DRM: как устроена Readora

Уровень сложностиСредний
Время на прочтение4 мин
Охват и читатели5.2K

У многих дома лежит папка с сотнями книг в FB2 — и почти ни одного удобного способа читать их где угодно. Десктопные читалки не синхронизируют прогресс, онлайн-сервисы требуют подписку и не принимают «свои» файлы, а связка Calibre с облаком — конструктор для энтузиаста. Рассказываем, как эту проблему решили браузером, PostgreSQL и открытым кодом — и почему в итоге всё свелось к скучному и предсказуемому стеку.

Но обо всём по порядку.

Погнали

Ближайшие события

Сбор персональных данных через чат‑бот

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели5.5K

Требования Закона «О персональных данных» нужно соблюдать во всех случаях, когда вы сталкиваетесь с обработкой персональных данных. К сожалению, в большинстве случаев наводится порядок на сайте и внутри компании (относительно работников). Поскольку это два основных направления, где у Роскомнадзора возникает больше всего вопросов. Но предприниматели забывают или относят к малым рискам, когда осуществляют обработку персональных данных в чат-ботах.

Читать далее

Свояк без установки: телевизор — табло, телефоны — кнопки. Как это устроено внутри

Время на прочтение10 мин
Охват и читатели4.7K

С друзьями давно играем в «Свою игру». SIGame — отличная штука, но каждый раз начинается одно и то же: «скачай», «а у меня мак», «а я с телефона», «какой пароль от комнаты», «у меня не нажимается пробел». Половина вечера уходит на настройку.

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

Так появился ЖМЯК. Это бесплатная «Своя игра» в браузере: создаёшь лобби, выводишь табло на телевизор, друзья сканируют QR-код — и их телефоны превращаются в кнопки.

В статье расскажу, как это устроено внутри и на какие грабли я наступил. Главная тема — как понять, кто нажал первым, когда у одного игрока Wi‑Fi в той же комнате, а другой сидит на мобильном интернете в электричке.

Читать далее

Как передать одностраничник в вёрстку через файл. Токены из стилей Figma, вариативный шрифт и прелоадер как спецификация

Время на прочтение9 мин
Охват и читатели3.7K

Я делал дизайн одностраничного сайта для новой марки куриных яиц. Страница длинная, больше одиннадцати тысяч пикселей на десктопе, с прелоадером, закреплёнными сценами и анимацией между блоками. Макет я сдавал в двух ширинах, 1600 и 390. Вёрстку и разработку вела другая команда, моя часть это дизайн и передача макета.

Слоёв в передаче пять. Цвет, вариативный шрифт, сетка, прелоадер и карточка упаковки. По каждому покажу, что лежало в Figma и как я бы выгрузил это разработчику сейчас, токенами и короткими спецификациями. Код в статье мой, это пример формата передачи, а не вёрстка сайта.

Читать далее

PocketDeploy: веб-приложение и свой Bluesky PDS на Android — что получилось и где пока пределы

Уровень сложностиСредний
Время на прочтение24 мин
Охват и читатели3.7K

PocketDeploy запускает сайт и официальный Bluesky PDS внутри Android. Разбираю границы встроенного режима и Termux, HTTPS-шлюз, федерацию, резервную копию и известные проблемы безопасности. Реальные экраны, протоколы и неудачный опыт обслуживания облачного эмулятора на 2 ГБ. Следующий этап — воспроизводимый запуск и восстановление; готовность к работе 24/7 ещё не доказана.

Разобрать архитектуру

Ghostty 1.4: терминал ускоряется, экономит память и учится быть осторожнее

Время на прочтение8 мин
Охват и читатели4.5K

27 октября 2026 года Митчелл Хашимото выпустил эмулятор терминала с GPU-ускорением — Ghostty 1.4.0. За релизом стоят семь месяцев работы, 172 контрибьютера и 2889 коммитов. В тестах команды на macOS пропускная способность ввода-вывода выросла на 25–55%, а сжатие текстовой истории сократило занимаемую ею физическую память на 70–90%.

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

Читать далее

Где CSS подложил вам ловушки

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели91K

Привет, Хабр!

Мне кажется, что каждый фронтендер множество раз сталкивался с ситуацией, когда CSS переставал работать так, как ожидаешь. Причём не имеет значения опыт разработчика. С одинаковой вероятностью в тупик может попасть как джун, так и опытный разработчик. Не зря же CSS стал героем такого количества мемов.

Я и сам не раз попадал в подобные ситуации. Но, несмотря на все эти сюрпризы, CSS мне по-прежнему нравится. Конечно, изменить стандарты я не могу. Зато могу рассказать о ловушках, в которые когда-то я попался. Возможно, некоторые из них окажутся неожиданными и для вас.

Давайте посмотрим, что я подготовил.

Читать далее

Свой тренажёр печати для детей: три ошибки и одна догадка, которая сработала

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели6K

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

Идея пришла не только с занятий: у меня самой дислексия, и именно клавиатура когда-то помогла мне справиться с письмом. Как я живу с этим и почему печать стала для меня спасением, расскажу в отдельной статье.

Здесь — о том, что я придумала, что из этого сработало, а в чём я ошиблась.

Узнать, где я ошиблась
1
23 ...