Обновить
114.13

HTML *

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

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

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

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

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

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

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

Читать далее

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

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

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

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

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

Читать далее

Как использовать любой CSS-фреймворк в вашем проекте — Часть 5

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

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

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

Читать далее

Инкапсуляция UI на примере чат-виджета

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

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

Читать далее

ChatGPT vs Гик. Сможет ли AI заменить опытного верстальщика?

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

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


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


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


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


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

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

Веб-разработка на ванильном HTML, CSS и JavaScript: стилизация и сайты

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

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

Новый взгляд на старые игры. Часть 7. Эпилог. Armor Alley (1991). Веб-прототип

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

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

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

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

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

Читать далее

Веб-разработка на ванильном HTML, CSS и JavaScript

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

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

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

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

Эволюция конструктора email-рассылок Mindbox: от шаблонов с минимальными настройками до комбайна на собственном языке

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

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

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

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

Читать далее

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

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

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


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


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


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

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

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

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


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


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

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

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

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

«Danil OS» или локальные веб интерфейсы

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

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

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

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

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

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

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

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

Читать далее

Всё, что вы хотели знать, но стеснялись спросить о кастомных курсорах в CSS

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

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

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

Читать далее

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

Как Canvas украсил QIC

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

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

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

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

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

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

Читать далее

Доступная вёрстка: как сделать сайт удобным для всех пользователей

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

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

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

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

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

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

Читать далее

Создать App одним промтом

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

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

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

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

Читать далее

Как использовать любой CSS-фреймворк в вашем проекте — Часть 4

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

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

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

Читать далее

Борьба с BIM-коллизиями в инженерных системах или история про создание плагина

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

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

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

Читать далее

HowTo: плиточная карта и календарь в DataLens

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

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

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

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

Читать далее

Как использовать любой CSS-фреймворк в вашем проекте — Часть 3

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

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

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

Читать далее