Как стать автором
Обновить
62.88

HTML *

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

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

Путь развития (Roadmap) Frontend разработчика

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

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

Читать далее
Всего голосов 22: ↑19 и ↓3 +16
Комментарии 11

Новости

Интерфейс под один палец. Концепция ONE TOUCH

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

Сталкивались ли вы с проблемой, когда вам не хватает рук при использовании телефона? Например, у вас одна рука занята пакетами или испачкана в чипсах, а до кнопки "назад" не дотянуться.

72120
Всего голосов 17: ↑17 и ↓0 +17
Комментарии 26

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

Уровень сложности Средний
Время на прочтение 7 мин
Количество просмотров 781

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

Читать далее
Всего голосов 6: ↑6 и ↓0 +6
Комментарии 0

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

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

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

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

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

Читать далее
Всего голосов 5: ↑4 и ↓1 +3
Комментарии 2

Истории

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

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

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

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

Читать далее
Всего голосов 11: ↑9 и ↓2 +7
Комментарии 5

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

Время на прочтение 10 мин
Количество просмотров 7.9K

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

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

Читать далее
Всего голосов 30: ↑29 и ↓1 +28
Комментарии 17

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

Время на прочтение 3 мин
Количество просмотров 14K

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

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

Читать далее
Всего голосов 11: ↑8 и ↓3 +5
Комментарии 12

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

Время на прочтение 10 мин
Количество просмотров 1.1K

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

Читать далее
Всего голосов 2: ↑2 и ↓0 +2
Комментарии 4

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

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

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


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


Читать дальше →
Всего голосов 14: ↑14 и ↓0 +14
Комментарии 8

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

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

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

Читать далее
Всего голосов 18: ↑18 и ↓0 +18
Комментарии 9

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

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

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

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

На самом деле возврат к основам HTML, простым сайтам и читаемому коду без сложных фреймворков — довольно популярная идея. Сейчас всё больше сайтов создаётся по принципу HTML First.
Читать дальше →
Всего голосов 78: ↑74 и ↓4 +70
Комментарии 37

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

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

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

Читать далее
Всего голосов 2: ↑1 и ↓1 0
Комментарии 3

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

Уровень сложности Средний
Время на прочтение 12 мин
Количество просмотров 577

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

Читать далее
Рейтинг 0
Комментарии 0

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

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн

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

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


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


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

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

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

Читать дальше →
Всего голосов 40: ↑40 и ↓0 +40
Комментарии 14

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

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

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

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

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

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

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

Время на прочтение 15 мин
Количество просмотров 6.9K

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

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

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

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

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

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

Читать далее
Всего голосов 16: ↑8 и ↓8 0
Комментарии 9

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

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

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

Узнать о способе обхода защиты Cloudflare
Всего голосов 28: ↑27 и ↓1 +26
Комментарии 31

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

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

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

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

Читать далее
Всего голосов 19: ↑13 и ↓6 +7
Комментарии 4

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

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

Предисловие

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

Читать далее
Всего голосов 18: ↑17 и ↓1 +16
Комментарии 6

Вклад авторов