HTML *

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

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

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

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

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

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

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

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

Привет, Хабр! Меня зовут Дмитрий Переверза, я Frontend Team Lead в компании Just AI. В рамках платформенного стрима мы занимаемся разработкой и развитием платформы для создания своих чат‑ботов. Cделать хорошего и полезного бота временами бывает сложно, поэтому для помощи разработчикам мы создаем инструменты, которые помогают ускорить разработку и упростить работу с ботами. В этой статье я расскажу, как реализовать изолированный UI, грамотно организовать код на примере виджета чата, и какие проблемы могут возникнуть в процессе разработки.

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

Моя подруга постоянно читает новости о том, что искусственный интеллект заменит какую-то профессию. Тестировщик, программист, дизайнер, писатель и т. д. А сможет ли он заменить опытного верстальщика?

Мне стало интересно, сможет ли ChatGPT написать код, как я. Чтобы мог сказать: «Да, вот это мы допускаем в продакшен».

Добиваться этой цели я буду на примере нескольких популярных паттернов. Я уверен, что фронтендеры постоянно верстают их из проекта в проект. Ещё я честно признаюсь, что у меня мало опыта работы с такими системами. Я новичок. Так что тоже учитывайте это при чтении.

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

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

Об оригинальной игре я ранее рассказывал в рамках материала из другого цикла, здесь же речь пойдёт именно о ремейке и, преимущественно, его front‑end специфике.

Перевод выкладывается с разрешения Scott‑а Schiller‑а. Характер статьи изобилует заметками / элементами монолога автора с самим собой. При переводе было решено оставить заданную подачу как есть, без радикальной стилистической коррекции или смены формата.

Осуществлял дополнительный анализ JavaScript‑терминологии — oldalexi. Выступал в качестве дополнительного редактора — Newbillius.

Всем привет, на связи Петр Никитин, frontend-разработчик Mindbox.

Mindbox — это платформа автоматизации маркетинга. Одна из задач, которую наши клиенты решают с помощью нее — запуск email-рассылок и сценариев. Чтобы облегчить им задачу и не заставлять маркетологов писать HTML-код, мы разработали конструктор рассылок: письмо собирается из готовых блоков, а содержание можно настраивать под свои задачи.

В этой статье я расскажу про процесс разработки конструктора, с какими вызовами мы сталкивались и как находили решения. Например, почему в какой-то момент мы решили, что нам тесно в рамках HTML и решили поменять способ разметки шаблонов, а для этого понадобился собственный язык на базе C# — Quokka Mindbox

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

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

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

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

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

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

• что можно сделать лучше для пользователей с дислексией;
• как незаметно улучшить интерфейс для пользователей с травмой кистей рук;
• есть ли сложности с сокращениями для пользователей скринридера.

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

Эта статья расскажет о моём эксперименте по оптимизации моего рабочего пространства в macOS.

Примерно 10 лет назад я придумал одну идею — канбан-рабочий стол. Я понял, что иконки на рабочем столе были крутыми… в 1984 году. и втом числе поэтому 1984 не был как 1984) Но камон, за 40 лет кроме виджетов почти ничего не изменилось. Марк…

10 лет назад, узнав о системе канбан, я начал пользоваться Illustrator’ом и рисовал себе 4 колонки прямо на рабочем столе. Поверх них размещал стандартные стикеры, полностью отключив иконки рабочего стола.

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

Во-первых, Plash — программулька, которая ставит Chrome вместо бэкграунда.
Я также сделал на Python с FastAPI и Jinja и запустил себе уже настроенный канбан-рабочий стол.

Но как вы понимаете, на этом дело не кончилось.

Гуляя по интернету, я нашёл несколько исходников с открытыми лицензиями, которые я использовал в своём проекте.

Курсоры могут сделать сайт как гораздо удобнее, так и намного хуже. В этой статье обсудим встроенные курсоры CSS и посмотрим, как с помощью CSS (и немножко — с JavaScript) создавать кастомные курсоры, чтобы ваш сайт лучше запоминался пользователям.

Также сравним плюсы и минусы применения CSS и JavaScript для создания кастомных курсоров. Обсудим, когда стоит отказаться от курсоров по умолчанию и как учитывать потребности пользователей с ограниченными возможностями. Чтобы во всё это вникнуть, вам понадобятся базовые представления об HTML, CSS и JavaScript.

Всем привет! Меня зовут Виген Мовсисян, я Frontend-разработчик в QIC digital hub. В этой статье я расскажу, как мы внедрили технологию Canvas, какие задачи он помогает решать, что уже успели сделать и какие у нас планы на будущее.

Материал основан на моём докладе с QIC Tech Meetup, полную запись вы можете найти на YouTube.

Если говорить коротко, Canvas —  это «холст», который позволяет рисовать и добавлять интерактивность, давая пользователям возможность напрямую взаимодействовать с графическими элементами. В статье я буду ссылаться на этот проект, чтобы проиллюстрировать все описанные ниже возможности Canvas.

*В текущей версии отсутствует кнопка «Назад» — для возврата в предыдущий раздел воспользуйтесь стандартной кнопкой браузера. 

Итак, начнём погружение в удивительный мир возможностей Canvas.

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

Она позволяет сделать наш сайт или веб‑приложение доступным максимальному количеству пользователей. И под максимальным количеством имеются ввиду не только пользователи со слабыми устройствами или интернетом, для которых мы должны предоставить максимально оптимизированное решение, но и пользователи с ограниченными (постоянными или временными) возможностями: люди без слуха, зрения, без возможности использовать мышь или клавиатуру для взаимодействия с контентом веб‑сайта.

Для чего же нам нужно работать над доступностью? Ответ напрашивается сам собой – расширение аудитории и привлечение новых клиентов (если вы оказываете услуги). По данным AccessiCart, при улучшенной доступности мы увеличиваем потенциальную аудиторию до 25%. (Ссылка на статью)

Помимо расширения аудитории, улучшение доступности положительно влияет на органический трафик (переходы на сайт из поисковых систем). Исследование, проведенное Semrush, показало, что 73,4% сайтов, внедривших решения по доступности, зафиксировали рост органического трафика, при этом 66,1% из них отметили увеличение трафика от 1% до 50%. (Ссылка на статью)

Здесь мы рассмотрим как улучшить доступность с двух сторон: оптимизации и взаимодействия с контентом. Добиться этого можно с помощью самых базовых технологий разработки: HTML & CSS & JS.

Мы все уже слышали что есть сотни промтов которые могут создать полноценный App, и что скоро разработчики будут не нужны. Но давайте попробуем сделать не то чтобы App, а просто интерактивную страничку.

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

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

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

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

Привет, друзья и коллеги по инженерному делу и проектированию! Меня зовут Сергей Погорельский, и я работаю в компании КРОК в качестве эксперта по автоматизации инженерных систем. Работаю с BIM-технологиями 6 лет и недавно защитил диссертацию на эту тему.

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

Хочу поделиться примером, как при помощи нестандартных техник создать виджеты, непредусмотренные на бесплатном тарифе DataLens.

Для реализации виджетов понадобится базовое знакомство с DataLens, html и python.

Код по формированию виджетов и живые примеры внутри.

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

В этой статье мы разбираем, как создать согласованную цветовую систему для всего проекта, используя всего 6–8 основных цветов и их оттенков. Я покажу, как правильно распределять цвета между компонентами и переменными, чтобы всё оставалось предсказуемым и удобным для команды.