Обновить
61.31

HTML *

Стандартный язык разметки web-страниц

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

Material for MkDocs 9.5.x — что нового в этой версии и полезные хаки при работе с документацией на нем

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

В декабре 23-го года Material for MkDocs обновился до версии 9.5, но из-за регрессов переходить на него многие не решились. Но сейчас версия уже достаточно стабильная и исправленная, поэтому я хотел бы поделиться с вами, что нового привнесла эта версия и какие лайфхаки я применил при переходе на эту версию при работе с документацией (и вам советую перейти также).

Читать далее

Безопасность веб-приложений: анализ методов защиты от атак на уровне Backend

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

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

Однако, с ростом функциональности и сложности веб-приложений, неизбежно возрастает и уровень угроз для их безопасности. Кибератаки становятся все более изощренными и масштабными, нацеленными на различные слои архитектуры приложений. Особенно уязвимым является уровень Backend, который обрабатывает и хранит критически важные данные, такие как данные пользователей, финансовая информация и другие конфиденциальные данные. Несанкционированный доступ к этим данным или их изменение могут привести к серьезным последствиям, как для пользователей, так и для организаций.

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

Читать далее

Дизайн-разбор ссылок в вёрстке

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

Привет! Это первая статья из серии разборов элементов веб-вёрстки для дизайнеров интерфейсов (и немного аналитиков). Разберём атрибуты разных тегов, свойства, которые можно к ним применить, поведение в разных обстоятельствах. А главное – как они влияют на то, что видит пользователь на экране (и слышит), и какие неочевидные моменты можно продумать в дизайне заранее.

Начнём со ссылок, которые обозначаются в HTML тегом <a></a>.

Читать далее

CSS для печати на бумаге

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

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

В этой статье я объясню основы CSS, управляющие внешним видом веб-страниц при печати, и дам пару советов, которые могут вам помочь в этом.

Читать далее

Гонка за скоростью: сравнение производительности ведущих фреймворков JavaScript в веб-разработке. Fastify, Express, Koa

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

Недавно я задался вопросом «Какой JS фреймворк самый быстрый». Я обратился с этим запросом в гугл и нашел очевидный ответ «это fastify!». Но почему именно он?.

Я практически сразу наткнулся на статью, результаты которой меня немного расстроили, так как в качестве дополнительной нагрузки на endpoint автор использовал вычисление ряда Фибоначчи, что, по моему мнению, не раскрывает всей сути сравнения. Тогда я решил провести собственное исследование.

Читать далее

Chromium. Отрисовка страницы с помощью Blink, CC и планировщика

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

Движок Chromium от компании Google состоит из огромного числа внутренних механизмов, подсистем и других движков. В этой статье мы погрузимся в процесса компоновки и вывода Web-страницы непосредственно на экран. А так же, чуть ближе познакомимся с движком Blink, композитором (или, как его еще называют, сопоставитель контента) и планировщиком задач.

Читать далее

Часы на синусах и косинусах в CSS

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

В этой статье осторожно прикоснёмся к sin() и cos(). Есть и другие функции, в том числе tan(), зачем же останавливаться только на синусе и косинусе? Они идеальны для размещения текста по краю круга. Об этом уже рассказывалось на CSS-Tricks, когда Крис поделился подходом к размещению текста по кругу с миксинами Sass. Это было шесть лет назад [оригинал опубликован 8 марта 2023 года], поэтому поработаем с размещением чисел по-новому.


Вот о чём я говорю:


Читать дальше →

Реализуем touch жесты на vanilla js. Часть 1 (rotate)

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

В рамках этой статьи я пошагово реализую жест поворота в мобильной версии сайта используя ванильный javascript. Для этого мы рассмотрим как устроены touch события мобильного браузера, а также немного вспомним тригонометрию.

Читать далее

Костыли из 90-х и принцип HTML First

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

Кадр из презентации Frontmania 2022: Kilian Valkhof — Stop using JavaScript for that

Недавно на Хабре публиковался перевод статьи «Вам не нужен для этого JavaScript» с примерами, где код JS легко заменить на HTML.

На самом деле возврат к основам HTML, простым сайтам и читаемому коду без сложных фреймворков — довольно популярная идея. Сейчас всё больше сайтов создаётся по принципу HTML First.
Читать дальше →

Тесты производительности фреймворка Cample.js. Отчёт № 1

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

В данной статье содержатся тесты фреймворка Cample.js версии 3.2.0-alpha.12. Это первый отчёт о производительности. Нулевой отчёт вышел несколько месяцев тому назад. Отчёт включает в себя сравнения по производительности с популярными фреймворками и библиотекой, а также сравнение с реализацией на чистом javascript. Все результаты тестов основаны на показателях keyed реализации в репозитории js-framework-benchmark в github. Сами они располагаются на странице выпуска №122.

Читать далее

Предсказание от We Wizards: сегодня вас ждут успех в делах и новые скиллы

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

Вместе с Creative Developer We Wizards Даниилом Сарабьевым сделаем сервис, позволяющий получить случайный набор закрытых таро с возможностью вскрыть выбранные карты.

Читать далее

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 6

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


Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.


Сегодня мы рассмотрим следующие аспекты:

  • какие символы нужно пропускать в тексте для атрибута alt;
  • в какой ситуации атрибут inert может быть бесполезен;
  • как атрибут maxlength не позволил моей знакомой купить авиабилеты;
  • в чём польза свойства border в режиме высокого контраста дисплея.

Давайте начнём!

Читать дальше →

Не стоит недооценивать HTML

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

«HTML – это просто», «Разрабатывать фронтенд проще, чем бэкенд», «После реализации бэкенда обновление UI не должно составлять труда», – за время работы в сфере веб-разработки вокруг меня то и дело звучали эти и другие аналогичные утверждения.

И очень часто они вызывали у меня грусть.

Дело в том, что бо́льшую часть времени я проводила за написанием фронтенда, включая работу с HTML, CSS и JavaScript (по факту в основном TypeScript). Когда кто-нибудь говорит мне о «простоте» моей работы, я начинаю думать, что мои навыки не представляют высокой ценности, и меня может легко заменить любой разработчик…

В статье же я решила описать свои размышления, которые рождались в течение последних двух лет во время работы с людьми из разных команд с разным опытом в HTML-разработке и фронтенд-технологиях в целом. Здесь я озвучу несколько основных своих вопросов «Почему?», сопроводив их возможными ответами.
Читать дальше →

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

Азы поисковой оптимизации для веб-разработчика: прокачиваем SEO с помощью кода и здравого смысла

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

Привет, Хабр! Поисковая оптимизация обычно ассоциируется только с производством контента, а роль веб-разработчиков в ней часто недооценивают. Мы с этим не согласны.

В этой статье обсудим технические детали верстки оптимизированных под поисковые движки веб-страниц, а для закрепления знаний создадим по всем правилам и задеплоим на сервер небольшой сайт. Это не ультимативный гайд, а скорее шпаргалка о том, как сделать красиво, функционально и так, чтобы целевая страница попадала в топ выдачи. Материал будет полезен веб-разработчикам, которые только начинают заниматься SEO. Опытных специалистов приглашаем в комментарии — поделитесь своими лайфхаками и кейсами поисковой оптимизации.
Читать дальше →

Еще один кейс на PHP. Скачиваем базу данных из открытого API

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

Решать задачу будем на примере каталога исторических экспонатов Музейного фонда РФ. API каталога является общедоступным сервисом. Сначала нам нужно будет сформировать ссылку на скачивание архива ZIP с информацией. Сделать это нужно аккуратно, так, чтобы изменения в названиях файлов, которые могут время от времени случаться, не повлияли на работоспособность нашего скрипта.

Затем, мы создадим шакалу загрузки, или прогресс‑бар, как ее еще называют, чтобы отслеживать процесс скачивания. Экспонатов много, каталог большой: «весит» он более 5 Гб. Без индикации загрузки пользователь может недоумевать, почему ничего не происходит и консоль просто висит долгое время. Наконец, скачаем файл из API, который потом можем разобрать по таблицам своей базы в том виде, в котором понадобится.

Читать далее

Об одном способе веб-скрапинга сайтов, защищенных Cloudflare

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

Сразу оговорюсь, что описанное ниже носит исключительно информационно-образовательный характер, и не имеет целью нанесение какого-либо ущерба компаниям, использующим защиту из заголовка статьи. По этим же причинам фокусировка статьи именно на том, как получить заветный html «как из браузера» в автоматизированном режиме, и здесь не будет идти речь о каких-то массовых распараллеливаниях через proxy и VPN, подкладываниях отпечатков (finger prints) браузеров и т. д.

Узнать о способе обхода защиты Cloudflare

Шаблонизатор GO text template для новичков

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

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

Все инструкции шаблона заключаются в символы.

Читать далее

Python для gambling'a. Часть 1 — Сбор данных

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

Предисловие

Простой python-cкрипт для парсинга спортивной статистики по баскетболу с популярного сайта

Читать далее

Прокачиваем вёрстку ARIA-атрибутами. Атрибут role

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

В разговорах людей, интересующихся доступностью, часто можно услышать слово «Роль». Так, что это такое? Это специальная форма представления элемента для скринридера. Устанавливается она с помощью атрибута role. Сегодня поговорим о нем.


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


Давайте начнём!

Читать дальше →

11 полезных фичей Chrome DevTools

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

Всем привет!

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

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

Погнали!

Погнали!