{"id":28185586,"url":"https://github.com/maxim-klenov/debug-html-snippet","last_synced_at":"2025-09-09T15:33:55.110Z","repository":{"id":288445525,"uuid":"968129284","full_name":"maxim-klenov/Debug-HTML-snippet","owner":"maxim-klenov","description":"Полезный css снипет который проверяет код на нарушение HTML стандартов ","archived":false,"fork":false,"pushed_at":"2025-04-17T16:30:55.000Z","size":9,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-18T05:34:52.038Z","etag":null,"topics":["css","debbuger","debug","debugging","html","tool"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maxim-klenov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-17T14:56:44.000Z","updated_at":"2025-04-17T16:30:59.000Z","dependencies_parsed_at":"2025-04-20T08:32:15.310Z","dependency_job_id":null,"html_url":"https://github.com/maxim-klenov/Debug-HTML-snippet","commit_stats":null,"previous_names":["maxim-klenov/debug-html-snippet"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxim-klenov%2FDebug-HTML-snippet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxim-klenov%2FDebug-HTML-snippet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxim-klenov%2FDebug-HTML-snippet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxim-klenov%2FDebug-HTML-snippet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maxim-klenov","download_url":"https://codeload.github.com/maxim-klenov/Debug-HTML-snippet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478074,"owners_count":22077679,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","debbuger","debug","debugging","html","tool"],"created_at":"2025-05-16T06:12:20.246Z","updated_at":"2025-05-16T06:12:36.830Z","avatar_url":"https://github.com/maxim-klenov.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Инструмент дебаггинга HTML\n\n\u003e [!NOTE] \n\u003e Код является модифицированной версией оригинала. Он не уменьшает возможностей изначального кода, а только улучшает его. Большая благодарность Андрею Федорову за изначальную структуру кода.\n\n## Руководство пользования\n\n1. [Копировать код](/debugger.css) в буфер обмена\n2. Вставить в конец стилей css\n3. Открыть в браузере сайт, который подлежит исследованию.\n4. Готово! Можно проводить дебаг)\n\n### Визуальная индикация: \n  \n- Анимированный счетчик ошибок в центре экрана.\n- Красная контурная обводка сообщений об ошибках.\n   \n## Возможности\n\n- **Проверка изображений**\n  \n    - Обнаружение современных форматов (WebP/AVIF) без fallback\n    - Проверка наличия атрибутов alt, width, height\n    - Контроль правильного использования тега \u003cpicture\u003e\n    - Предупреждение о JPEG без современных альтернатив\n- **Семантическая проверка**\n  \n    - Наличие обязательных тегов: h1, main, nav\n    - Контроль семантики кнопок с иконками (aria-label)\n    - Проверка использования тега time с datetime\n- **Доступность**\n    - Проверка атрибутов aria-label для кнопок\n    - Контроль обязательных атрибутов у элементов форм (type у button)\n    - Валидация альтернативных текстов изображений\n- **Оптимизация производительности**\n  \n    - Проверка подключения скриптов без defer/async\n    - Контроль подключения CSS-файлов\n    - Валидация путей к CSS-файлам\n - **Дополнительно (оптимально)**\n    - Проверка наличия фавиконки\n    - Проверка структуры секций (section с h2)\n    - Контроль атрибута lang у html\n  \n## Благодарности\n**Андрею Федорову** за предоставленный код https://github.com/ai36/ai36.github.io \\\n**Александру Ламкову** за идею подстветки ошибкок с помощью CSS \\\n**Garry Roberts** за идею механизма запуска дебага \\\n**Вадиму Малычу** за интересный проект стажировки https://preax.ru\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cdiv align=\"center\"\u003e\n\n### Contact developer \n  \u003ca href=\"https://github.com/maxim-klenov\" target=\"_blank\"\u003e\n    \u003cimg src=https://img.shields.io/badge/github-%2324292e.svg?\u0026style=for-the-badge\u0026logo=github\u0026logoColor=white alt=github style=\"margin-bottom: 5px;\" /\u003e\n  \u003c/a\u003e\n  \n  \u003ca href=\"https://t.me/tgxzz\" target=\"_blank\"\u003e\n    \u003cimg src=https://img.shields.io/badge/telegram-%231E77B5.svg?\u0026style=for-the-badge\u0026logo=telegram\u0026logoColor=white alt=telegram style=\"margin-bottom: 5px;\" /\u003e\n  \u003c/a\u003e \n  \u003c/div\u003e\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxim-klenov%2Fdebug-html-snippet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxim-klenov%2Fdebug-html-snippet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxim-klenov%2Fdebug-html-snippet/lists"}