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

Около года назад я решил сделать универсальное open-source решение для визуализации списков. В первых версиях я отрабатывал технологию виртуализации с различными параметрами, было много исследований, вопросов, ну и конечно дефектов). Сегодня же состоялся релиз X.12.X версии, которая работает под управлением Angular 14-22. Хочу рассказать на что способен инструмент (ng-virtual-list), какие задачи решает и проведу краткий обзор с демонстрацией примеров.

Все приведенные ниже примеры содержатся в документации с примерами кода.

Инструмент ng-virtual-list это виртуализированные, высокопроизводительные списки с множеством различного функционала, которого нет у стандартных списков.

Мне очень хотелось разобраться в этой ситуации с блокировками..
Не мог с Chrome зайти на beget.com - там CDN блокировался. Тыкался тыкался..

Вставляете в строку браузера chrome://flags/

Ищите Cryptography Compliance (CNSA) (#cryptography-compliance-cnsa)

Привет, Хабр! Пока Минцифры изучает введение возрастной идентификации на онлайн-платформах и весь мир ищет способы проверять возраст пользователей, не подвергая риску конфиденциальность их персональных данных, мы в Smart Engines пришли с готовым решением. В этой статье рассказываем о простом способе идентификации возраста пользователей в веб-среде, который не требует биометрии, раскрытия персональных данных и не несет рисков утечек. Мы реализовали это с помощью WASM-модуля, который позволяет решать задачу проверки возраста в интернете также надежно и безопасно для пользователя, как и в обычной жизни. Заглядывайте под кат!

Представьте: клиент зашел на сайт в полночь. Менеджер спит. Утром клиент уже забыл о вас и купил у конкурента. Обычный чат-бот не спасает: он либо тупой, либо безумно дорогой, либо хранит данные за океаном.

Я создал решение, которое решает эту проблему раз и навсегда.

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

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

Как человеку, который является поклонником CSS, мне немного грустно это наблюдать. Столько интересных возможностей остаётся без внимания! А ведь с их помощью код нередко становится короче, надёжнее и проще для понимания. Поэтому я собрал несколько примеров популярных решений прошлого и переписал их, используя новинки CSS, вышедшие за последние несколько лет.

Давайте посмотрим, что у меня получилось.

ИИ не всегда ошибается в коде. Часто проблема появляется раньше, в выборе уровня решения.

На трех примерах из веб-разработки показываю, почему рабочий ответ ИИ еще не значит, что его стоит брать в проект: импорт товаров из Excel, мобильное меню на MODX и компонент для Schema.org-разметки.

Протокол CalDAV существует с 2007 года (RFC 4791), и за это время он стал стандартом де-факто для синхронизации календарей. Казалось бы, стандарт — значит, всё одинаково. На практике же каждый крупный провайдер реализовал его по-своему, зачастую отходя от стандарта.

Для меня всё началось с простой задачи: автоматизировать управление своими календарями. Один pet-проект, один провайдер — ничего сложного. Но когда я решил попробовать поддержать второй, третий, четвёртый — оказалось, что CalDAV у каждого свой. В этой статье я расскажу, с чем вы столкнётесь, если решите написать клиент, работающий одновременно с Google, Apple, Яндексом и Mail.ru.

Интернет полон историй безупречного успеха: «Мы взяли модный фреймворк, переписали систему с нуля, и всё стало летать». Но реальный мир корпоративной разработки – это legacy. Это системы вроде Redmine, которые живут десятилетиями, хранят в себе терабайты критических данных, и чья миграция обойдется бизнесу слишком дорого.

Мы в команде ArcFront решили, что хватит терпеть интерфейсы из 2006 года. Вместо того чтобы убегать на платные облачные трекеры, мы совершили хирургическую инъекцию. Мы внедрили молниеносный React SPA прямо в ядро старого Ruby-монолита. Без микросервисов. Без CORS.

Рассказываем, как мы заставили старого пса выучить новые трюки: от архитектуры инъекции и парсинга Textile до психологии интерфейсов и нашего официального перехода на бизнес-модель Open Core.

Codex хорош, пока не приходится в пятый раз объяснять ему одни и те же правила проекта: где проверки прав, как запускать тесты, почему не надо тащить старые alias-модули и что мы уже решали в прошлом чате.

Поэтому я сделал Hermes Codex Plugin — плагин, который хранит правила, summaries и прошлые решения в SQLite, ищет их через FTS5 и подкладывает Codex только маленький релевантный кусок контекста.

MyPrepod — крупнейший портал отзывов о преподавателях российских ВУЗов. Он стал таким не только за счет того, что даже на момент MVP 2017 года он был UX‑удобнее для студентов, чем СтудИзба или professorrating, но и за счет полной анонимности.

Переписали анонимный портал отзывов на преподавателей с PHP 5.4 на современный стек. Сайт грузился 15 секунд, рекламодатели не шли, хостинги блокировали без предупреждения в 2 ночи. Разбираем, как выстроить инфраструктуру, которая переезжает на новый сервер за одну команду и выживает, когда всё вокруг пытается тебя снести.

Для начала разберёмся, что такое Race Condition и почему эта уязвимость заслуживает внимания.

Race Condition — это класс уязвимостей, которые возникают из-за того, что сервер обрабатывает несколько запросов одновременно без должной синхронизации. Когда два или более запроса приходят на сервер в один и тот же момент и затрагивают одни и те же данные, между ними происходит коллизия.

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

Перейдём к тому, какие виды этой уязвимости вообще бывают.

Можно выделить 3 вида:

Привет, Хабр! Меня зовут Андрей и я развиваю портал для разработчиков в корпоративном мессенджере Пачка. Эта статья про то, как мы превратили рукописную ноду для n8n в артефакт, который генерируется из одного файла спецификации, и как она прошла официальную верификацию и встала в каталог n8n со статусом verified by n8n.

По дороге мы выбросили целиком первую версию ноды и перевели всю документацию API на новый процесс генерации. Ниже — как это устроено внутри, с кодом и граблями.

Если коротко, что получилось: правка в одном .tsp-файле автоматически расходится в документацию, CLI, SDK и n8n-ноду, а CI публикует всё по реестрам. Нода больше не может отстать от API, потому что собирается из того же источника.

Платежный код обычно выглядит ровным ровно до первого реального сбоя. Пока платежи идут по ожидаемому сценарию, кажется, что достаточно создать оплату, дождаться вебхука и обновить локальный статус. Но как только вебхук приходит повторно, приходит позже нужного, прилетает от не того IP, или удаленный платеж уже живет в одном статусе, а локальная база в другом, становится ясно, что платежный контур без защит почти всегда врет.

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

В одном из проектов этот узел был собран так, первый платеж создается с capture=False, входящий webhook проверяется по IP, каждое событие сначала пишется в журнал, потом маршрутизируется в обработчик, capture подтверждается стабильным idempotence key, успешный платеж валидируется по сумме, валюте и metadata, а на случай расхождения остается отдельный ручной confirm, который умеет дочитать фактический статус из ЮKassa и синхронизировать локальную базу.

То есть задача тут не просто принять webhook, а построить платежный контур, которому можно верить.

Когда возникает идея создать браузерный IRC-клиент без JavaScript, приходится сталкиваться с классической проблемой фронтенда: все насколько привыкли гнать динамику через JavaScript, что перестали замечать возможности HTML/CSS с щепоткой серверной магии по реализации многих фич. HTTP Streaming существует с давних времён, а CSS эволюционировал настолько, что может справиться с логикой состояний — но мы упорно продолжаем грузить мегабайты JavaScript (и иногда даже WebAssembly) для решений, которые вполне можно реализовать иначе.

Идея создать IRC клиент без JavaScript не совсем нова (хоть это и выяснилось уже после создания такого :) ). Ещё в нулевых появился CGI:IRC — настоящий IRC клиент, который может работать полностью без JavaScript, позволяя людям общаться в реальном времени через браузер, даже если JavaScript по каким-то причинам не работал. Но это было в эру table-layouts, и когда CSS не был так развит, как сейчас. Сегодня возможностей больше, и мы воспользуемся ими, чтобы навернуть функциональность, которая не видана CGI:IRC.

Результат можно глянуть (хоть и с дополнительной стилизацией и изменениями, которые не так важны для статьи) здесь, а ещё на GitHub

Привет! Меня зовут Дмитрий Михеев, я ведущий разработчик в MAGNIT OMNI — бизнес-группе ритейлера «Магнит», которая отвечает за развитие омниканального опыта для клиентов.

В своих сервисах для межсервисных коммуникаций помимо gRPC-запросов мы используем брокер сообщений Kafka. Если описывать его в двух словах, Kafka — это распределённый журнал событий (event log), через который сервисы обмениваются данными в реальном времени.

Не буду подробно останавливаться на устройстве Kafka — это хорошо описано в документации. В этой статье хочу подсветить один неочевидный момент, который может привести к проблемам при работе с consumer’ами — повторную обработку сообщений (retry).

Сегодня я подробно разберу раздел Websites в opensource системе аналитики Matomo. Как Matomo хранит сайты внутри системы, чем различаются Website, Mobile App и Roll-Up, как правильно строить архитектуру аналитики, какие ошибки почти все совершают при масштабировании Matomo.

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

Перейти в высшую касту можно будет, только развивая параллельную ветку навыков отдельно от основной. Но многие этого даже не поймут.

Забудьте о привычном карьерном росте, который вы знали. Правила уже поменялись. Вас заменила не нейронная сеть. Вас заменили четырёхрукие сеньоры-Шивы, которые в одиночку выдают результат за целую команду.

Каково ваше место за этим столом? Давайте разбираться вместе.

Хотим рассказать о том, как мы делаем платформу для онлайн звонков и видео конференций с ИИ, но чтобы не слишком сложно было. Начнем с самого низкого уровня - с механизма передачи данных между клиентами в созвоне. В этой статье мы расскажем про WebRTC, NAT, STUN/TURN и немного про LiveKit

Что, если бы сканируемый код не был обязан выглядеть как набор квадратов и полосок? Что, если он выглядел бы как залитый дождём ночной город — и при этом всё равно безошибочно считывался?

Это NoiR Code. Он кодирует текст в изображение, которое читается как чёрно-белый нуар-кадр: полутоновый силуэт города, луна, штрихованные тени. Наводишь камеру в специальном приложении или веб-сервисе, созданном для поддержки этого формата, и получаешь своё сообщение обратно. Попробовать можно здесь: noir-code.suncake.xyz

Предположим, вы пишете интерпретатор машины Тьюринга, запущенный в Web Worker’е. UI должен показывать трейс — как машина шагает от состояния к состоянию, что пишется на ленту, как двигается каретка. Чтобы пользователь успевал считывать изменения в UI, между итерациями движка нужна короткая задержка — миллисекунды, регулярно, на каждом шаге. Это приостановка движка между итерациями — регулярная и предсказуемая, не «пауза» в смысле UI-кнопки «Пауза» (та останавливает машину до клика «Продолжить»).

Возникает вопрос: где именно в цикле итерации воркеру нужно реализовать приостановку? Кандидатов два, и выбор между ними фиксирует сразу два контракта: хуков движка и протокола между воркером и основным потоком. Выбрать точку — это спроектировать обе стороны сразу; промахнуться — испортить обе. Эта статья — про этот выбор.