Обновить
512K+

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

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

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

Проверка возраста без персональных данных и биометрии: встраиваем в веб-страницу за 5 минут

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

Продолжаем рассказывать об альтернативном способе подтверждения возраста на веб-ресурсах без использования биометрии, интеграции с ЕБС и раскрытия персональных данных. О том, как это можно сделать, мы подробно писали в прошлой статье. Теперь разберемся, как реализовать подобный сценарий с помощью WebAssembly и какие возможности это открывает для веб-платформ. В этом материале показываем код, ищите под катом. 

Читать далее

Новости

Миграция с SharePoint без окна риска: двусторонняя работа с данными в новом портале, пока старый ещё живёт

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

Большинство статей о миграции с SharePoint описывают её как проект с двумя чёткими состояниями: «до» и «после». Вот вы работаете в SharePoint — вот уже в новой системе. На практике это не так. Между «до» и «после» существует третье состояние, которое может длиться месяцами: обе системы работают в проде одновременно, пользователи работают в обеих, а данные могут меняться в любой из них.

Именно это третье состояние и создаёт самый неприятный класс проблем. И именно о нём — эта статья.

Читать далее

Оптимизация под Pagespeed: работа с изображениями как с наиболее частой и весомой проблемой сайтов

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

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

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

Читать далее

Использование Blob API для обработки файлов, их загрузки и создания клиентских приложений без утечек памяти

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

Современные фронтенд-приложения постоянно взаимодействуют с файлами.

Пользователи загружают аватары, перетаскивают видео в дашборды, экспортируют CSV-отчеты, просматривают PDF-файлы, скачивают сгенерированные конфигурационные файлы и работают с медиаконтентом прямо в браузере. На первый взгляд все это выглядит довольно просто: поле загрузки файла, элемент предпросмотра, возможно, кнопка скачивания — и задача решена.

Но именно здесь начинаются настоящие проблемы.

Читать далее

Как я написал портативный файлообменник

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

Каждый раз, когда нужно перекинуть файл, код или ссылку с ПК на телефон (или другу в той же Wi‑Fi сети), начинается классическая возня. Либо гоняешь через «Избранное» в мессенджерах (где режется качество и файлы вечно висят в облаке), либо поднимаешь локальные веб‑серверы через консоль. Мне это надоело, и я решил написать свою утилиту — FlashStash.

Основная идея: софт должен запускаться в один клик, работать без интернета внутри локалки, иметь всеядный предпросмотр файлов прямо в браузере и не требовать от пользователя установки Питона или настройки окружения.

После нескольких итераций проект дорос до версии 1.6, и я хочу поделиться тем, как устроена утилита изнутри и с какими техническими проблемами пришлось столкнуться.

Читать далее

Как попасть во фронтенд и дойти до senior в ВК — интервью с Александром Ламковым

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

Фронтенд-разработка давно перестала быть просто «вёрсткой сайтов». Сегодня это сложная экосистема: фреймворки, state-менеджмент, TypeScript, оптимизация производительности, работа с API и постоянный поток новых инструментов. Но за всей этой технологической гонкой часто теряется главное: что на самом деле нужно знать начинающему разработчику, где проходит грань между джуном и сеньором, и почему умение проходить собеседования — такой же навык, как и писать код.

Я, Александр, автор телеграм-канала «Shulepov Code», поговорил с Александром Ламковым — фронтенд-разработчиком, основателем YouTube-канала Friendly Frontend (аудитория более 50 000 подписчиков) и телеграм-канала «Friendly Frontend», опытным наставником, который провёл более 200 персональных консультаций с разработчиками, помог прокачать их навыки. Александр успешно прошёл собеседования на позицию сеньора в нескольких крупных IT-компаниях России, а сейчас работает в компании ВК. В этом выпуске узнаем, что такое современная фронтенд-разработка, какие навыки нужны, чтобы войти в профессию, что выбрать (найм или фриланс), и сколько на самом деле зарабатывают фронтенд-разработчики.

Читать далее

Как починить блокировку легальных сайтов РКН ТСПУ одной строчкой в Chrome

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

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

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

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

Читать далее

Совершеннолетний без лишних разглашений: можно ли проверить возраст пользователя без биометрии, ЕБС и рисков утечек

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

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

Читать далее

Как я реализовал передачу диалога из ИИ-консультанта сайта в MAX

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

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

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

Читать далее

Устаревшие CSS-техники, от которых уже можно отказаться

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

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

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

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

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

Читать далее

ИИ в веб-разработке: сначала проверьте уровень решения, потом код

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

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

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

Читать далее

CalDAV в дикой природе: как «простой календарь для себя» превратился в клиент для семьи, друзей и четырёх облаков

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

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

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

Читать далее

Как мы встроили React в 20-летний Ruby-монолит, сделали Канбан и ушли в Open Core. Релиз Redmarc v0.5 Beta

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

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

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

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

Читать далее

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

Codex жрёт контекст? Я дал ему локальную память на SQLite — и перестал кормить его простынями промптов

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

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

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

Читать далее

Проблемы поддержания анонимности платформы в 2026

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

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

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

Чуть подробнее

Race Condition в веб-приложениях: три типа уязвимости и как их находить

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

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

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

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

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

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

Читать далее

verified by n8n: Как мы сгенерировали ноду из OpenAPI и почему пришлось выбросить рукописную версию

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

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

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

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

Читать далее

Вебхуки оплаты ЮKassa, IP-check, event log, idempotency и аварийный capture

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

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

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

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

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

Читать далее

Как выжать из HTML/CSS динамику, или создание IRC клиента без JS

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

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

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

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

Читать далее

Повторная обработка сообщений в Kafka Consumer

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

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

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

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

Читать далее
1
23 ...