Как стать автором
Поиск
Написать публикацию
Обновить
45.19

HTML *

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

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

Разработка с учетом паттернов WAI ARIA

Время на прочтение9 мин
Количество просмотров590

Сегодня веб-приложения стали сложными интерактивными системами, напоминающими полноценные десктоп приложения. Однако за красивыми интерфейсами и богатым функционалом часто скрывается важный аспект, которому уделяется недостаточно внимания — доступность (accessibility). Для миллионов пользователей с ограниченными возможностями это означает, что они не могут полноценно взаимодействовать с сайтом, выполнить базовые действия или получить информацию.

Проблема особенно ярко выражена в современных одностраничных приложениях (SPA), кастомных компонентах, модальных окнах и прочих динамических UI-решениях, которые не учитывают, как с ними будут работать вспомогательные технологии. Например:

Читать далее

Новости

Дружеское знакомство с SVG

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

SVG – одна из самых интересных технологий браузера. С его помощью можно делать массу полезных и интересных компонентов. Это неотъемлемая часть моего стека.

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

Для понимания этой статьи не требуется специальных знаний и опыта работы с SVG, но предполагается, что вы знакомы с основами HTML/CSS/JS.

Читать далее

CSS Anchor Positioning API

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

Большой обзор нового API для позиционирования элементов в CSS.

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

Читать далее

Как мы сделали «ssyoutube для ChatGPT» и что из этого вышло

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

Потребность поделиться диалогом из ChatGPT рано или поздно возникает. Однако нативного экспорта в удобный формат вроде PDF или Markdown платформа не предлагает. Копипаст — плохое решение: таблицы разваливаются, форматирование кода съезжает, а изображения просто пропадают. Мы решили эту задачу для себя, написав собственный конвертер. Оказалось, что он полезен не только нам.

Так появился pdfchatgpt.com. Принцип простой: копируешь share-ссылку и диалога с ChatGPT, добавляешь pdf в начало ссылки и получаешь готовый файл. Также можно перейти на pdfchatgpt.com и просто вставить ссылку на диалог.

В этой статье — технический разбор нашего решения: от простого скрипта с puppeteer до асинхронной системы с очередями. Делимся опытом для тех, кто решает схожие задачи.

Читать далее

Простой веб-сайт

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

Мой веб-сайт — это путешествие по волнам памяти. Я не хочу сказать, что нужно прекратить современную веб-разработку. На моём веб-сайте используются технологии, которые в обсуждаемые на нём времена были ещё недоступны. Он работает на мобильных (протестировано в Firefox для Android), отсутствует только фоновое изображение.

Свой первый веб-сайт я создал где-то в начале 2000-х, и как и большинство веб-сайтов того времени, он был очень простым. Это неудивительно, учитывая то, что большинство (включая и меня) писали такие веб-сайты в Блокноте, что накладывало ограничения на сложность. Можно было выбрать или Блокнот, или какой-то из WYSIWYG-редакторов, которые привязывали к себе тем, что сгенерированный ими HTML было бы совершенно невозможно поддерживать без них, а если вносить изменения вручную, то это вполне могло поломать всё в редакторе.

Тогда не было iPhone, почти не было SEO, а JavaScript, как и CSS, использовать было совсем необязательно.

Цветопередача первых ЖК-экранов была плохой, поэтому лучше было выбирать цветовую схему с высокой контрастностью.

Оптимальным разрешением было 1024×768 (или 1280×1024, если вы могли себе это позволить), однако стоило и обеспечить работоспособность размеров окна и панелей в 800×600. Вам же не нужно, чтобы контент выходил за левый или правый край экрана?

Читать далее

Организация селекторов для тестирования

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

Зачастую обычные веб-приложения не покрывают E2E тестами, однако, когда разговор заходит об административных панелях, формах биллинга и разнообразных конструкторах, то данная потребность быстро возникает.

В этой статье мы рассмотрим, как правильно организовать селекторы для тестирования веб-приложений.

🧪🧪🧪 TEST_ID="Читать далее" 🧪🧪🧪

Слайдер с бесконечной плавной прокруткой на JavaScript

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

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

Приблизительный результат следующий:

Читать далее

Введение в WebRTC

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

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

Читать 📞📞📞

Docs as Code и его использование на проектах

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

Раскрываем Docs as Code: как этот подход меняет создание документации, какие инструменты стоит изучить в первую очередь, и с чего начать внедрение.

Читать далее

Да, этот HTML и CSS старый, но всё ещё полезный

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

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

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

Только их возраст не является недостатком. Они всё ещё полезны в современной разработке. По этой причине я собрал их в небольшой список и на основе его написал эту статью. Надеюсь, найдёте для себя что-то полезное.

Давайте посмотрим, что я подготовил.

Читать далее

Практическое руководство по иконкам в веб-проектах — Часть 1

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

Сегодня почти каждый веб-проект использует иконки. Это отличный инструмент визуальной коммуникации, который помогает акцентировать внимание на элементах интерфейса. Существует хорошая статья о том, почему стоит использовать иконки — "Icons in Web Design". Но эта статья отвечает на другой вопрос — как их использовать?

Читать далее

Золотое сечение в дизайне 2025: Современные подходы к применению в веб и мобильном дизайне

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

Сегодня я хочу поделиться глубоким исследованием того, как применять золотое сечение в современном дизайне 2025 года. Эта статья основана не только на теории, но и на реальном опыте работы с крупными проектами, A/B тестах и исследованиях пользователей.

Читать далее

Когда мобильной версии мало: зачем и как включать «Версию для ПК»

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

Разработка мобильных интерфейсов — непростая задача. Иногда по разным причинам пользователю недоступен функционал Web-приложения в мобильной версии. Что делать если десктопа под рукой нет?

Читать далее

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

Измерение тангенциальной компоненты скорости вихревых течений с помощью лазерной доплеровской анемометрии

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

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

Для экспериментальных исследований динамики, а также кинематических характеристик нестационарных вихревых течений наиболее перспективно использовать оптико-лазерные методы, не вносящие ощутимые возмущения в исследуемый поток. Мотивацией к применению лазеров служат их специфические свойства: монохроматичность (частота излучения однородна), когерентность ().

Читать далее

Создаём свой Telegram-клон с помощью Next.js и TailwindCSS — Часть 1

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

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

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

Читать далее

Как сделать ужасный для пользователя интерфейс. Коллекция HTML/CSS лайфхаков

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


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


Я в течение нескольких лет рассказываю вам, как сделать интерфейс лучше для пользователя. Например, в прошлом месяце я поделился простыми HTML и CSS лайфхаками, которые помогают сделать интерфейс дружелюбнее к пользователю.


А недавно я подумал: а вдруг есть фронтендеры, которые хотят сделать ужасный интерфейс? Ну не любят они пользователей. Или хотят сделать пакость работодателю, который их обидел. Где им взять советы?


Надо помочь! Я собрал вредные HTML и CSS техники. Они супер простые, но очень действенные. Я уверен на сто процентов, что благодаря им интерфейс вашего проекта заставит пользователя вспомнить несколько «ласковых» слов.


Давайте посмотрим, что я вам подготовил.

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

Создание вращающейся ручки на основе Input Range

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

Рад приветствовать тебя,%username%. В этой статье я поделюсь тем, как создать вращающуюся ручку (в зарубежной литературе именуемой Knob). Далее по тексту я её буду называть «кноб». Перейдём к сути вопроса.

Что меня сподвигло на написание данной статьи, или как я докатился до жизни такой

Когда‑то давно, будучи ещё совсем зелёным и несмышлёным кодером, мне взбрело в голову сделать своё приложение. Моих знаний хватало на какой‑нибудь «Hello, World!», но кое‑что выдать я мог. И на тоот момент мне позарез нужно было реализовать кноб — тот самый круглый регулятор, который можно крутить и он будет менять значения. И как любой уважающий себя программист, я сразу же полез гуглить стековерфлоу и прочее непотребство, дабы найти тот самый рецепт хлеба сладкого ответ на вопрос, который так долго меня волновал. Однако перешерстив весь интернет, ничего путёвого я не нашёл. Расстроившись, я забил на эту идею. Но какие‑то угольки веры в то, что у меня получится это сделать, тлели в моей охолодевшей к этому миру душонке. И вот на днях, когда я начал работать над своим проектом (небольшая программка, если она найдёт отклик в народных массах, то и по ней напишу парочку руководств, но пока что спустимся на землю), мне опять ударила моча в голову с этими кнобами. Тем более, что все предпосылки ведут именно к этому. Они нужны в интерфейсе. Забравшись в православный яндекс и одновременно в бездуховный гугл, я опять наткнулся на мель отсутствия нужной мне информации. Были только решения с какими‑то библиотеками и интересными историями на jQuery. Плюнув на всё и засучив рукава, я вдруг осознал, что этот мир нуждается в моём компетентном и всем так очень нужном мнении (спойлер: нет). Тогда я принялся за gehirnsturm и молниеносно придумал пару решений. Первое заключалось в SVG на основе path, но оно показалось мне чересчур геморройным. Там много JS надо написать, но не надо никаких стилей зато. И вот второе решение отчасти продолжает идею первого, но с некоторыми отличиями: оно немножко проще в том плане, что начальное, конечное и текущее значение, а также шаг уже вмонтированы в него, что существенно сокращало труды мои праведные. Но, как гласит закон сохранения энергии, энергия не приходит и не уходит, она лишь изменяется. Поправьте, если не так. А это значит, что если где‑то стало проще, то где‑то стало сложнее.

Читать далее

Как красиво признаться в любви не покупая цветы и конфетки с плюшевым мишкой на память, используя чистый HTML и CSS с JS

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

Хочу поделиться идеей, как сделать признание в любви особенным, запоминающимся и искренним, не прибегая к классическим цветам или банальным текстам в телеграме/вацапе на миллиард строк. Я расскажу про интерактивный веб-сайтик, который можно создать своими руками, чтобы передать свои чувства. Это не просто слова, а целая история, которая разворачивается на экране, погружая человека в атмосферу тепла и эмоций. Код, который я приложил, пример такого проекта, и сейчас я объясню, как он работает и почему это может стать идеальным способом признаться в любви.

Просмотреть

Как работает position: sticky и почему он часто не прилипает

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

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

position: sticky — штука, которая превращает relative-элемент в fixed-элемент, как только он доезжает до заданного инсет-порога, и отлипает в момент, когда скроллинг выталкивает родителя за край.

Работает круто, пока вы не включите overflow, не забудете задать top, не положите элемент в flex c align-items: stretch, не сделаете таблицу из <thead> и не упрётесь в кейс с вложенными скролл-контейнерами.

Читать далее

Автоматический HTTPS для ленивых: ACME + Angie один раз и навсегда

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

Приветствую, дорогой читатель!

С момента появления в нашем любимом веб-сервере Angie замечательной функции ACME-челленджа через DNS прошло уже достаточно времени, чтобы оценить все преимущества этого решения. Эта поистине революционная фича подарила нам долгожданную возможность получать wildcard‑сертификаты буквально в несколько кликов.

Однако, как это часто бывает с новыми технологиями, до сих пор у многих пользователей, особенно только начинающих свое знакомство с Angie, возникают вполне закономерные вопросы вроде: «Как правильно это настроить?» или «Как это вообще работает под капотом?». Именно для таких случаев, дорогие друзья, и была задумана эта подробная статья — максимально простыми и понятными словами описать весь процесс настройки от начала и до конца.

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