Компоненты 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 основных цветов и их оттенков.
Я всё тщательно проверил и убедился, что мой сайт отлично (или хотя бы вполне неплохо) работает даже без JavaScript. Но, когда JavaScript недоступен, иногда бывает немного тяжеловато скрывать вещи, скрывать которые необходимо. Всего 7 строк кода (или даже однострочника, для самых душных) достаточно, чтобы скрывать на странице элементы, требующие JavaScript. Поэтому вам не придётся краснеть перед пользователи, которые без JavaScript заметили бы, как хромает функциональность вашего сайта.
Небольшой контекст: я сейчас разрабатываю небольшую кнопочку «Share», которую можно вставлять в посты и с лёгкостью делиться ими, если мне захочется. Взгляните, как она сейчас выглядит без JavaScript:
Это новый вариант статьи, уже выложенной на Хабре. Та статья писалась на эмоциях, сразу после первых декабрьских версий. Нынешняя — это результат трехмесячных воскресных посиделок в Visual Studio. Тут и параллельные процессы и манипуляции в js и даже примитивный шахматный движок на C#.
