HTML *

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

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

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

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

Это новый вариант статьи, уже выложенной на Хабре. Та статья писалась на эмоциях, сразу после первых декабрьских версий. Нынешняя — это результат трехмесячных воскресных посиделок в Visual Studio. Тут и параллельные процессы и манипуляции в js и даже примитивный шахматный движок на C#.

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

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

A-Frame — интересный фреймворк для создания WebVR-приложений, но, статей о нём в русскоязычном сегменте не так много. А ведь это не плохой инструмент, который позволяет разрабатывать VR-сцены, используя простой HTML-подобный синтаксис и JavaScript.

Если вы когда-нибудь задумывались о создании своей VR-игры или интерактивного 3D-опыта в браузере, но не хотели погружаться в сложные движки вроде Unity или Unreal, то A-Frame — отличный вариант для старта.

В этой статье я разберу проблемы, с которыми можно столкнуться при разработке игры на A-Frame, и покажу, как их решить. Готовы к погружению в мир WebVR? Тогда поехали!

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

Данная статья, в первую очередь, будет полезна новичкам, однако надеюсь, что и опытные разработчики найдут в ней что-то интересное. Для упрощения жизни, будем использовать SCSS, продублировав CSS «под спойлер».

Начнем с того, что в настоящее время огромное количество (а если точнее, то 5,5 миллиарда за 2024 год) пользователей по всему Интернету регулярно посещают различные сайты и веб‑страницы в поисках нужной им информации. И Вы в том числе.

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

А какой же плюс для нас? Как любому бизнесу нужен свой сайт, так сильно им нужны и разработчики этих сайтов, которые будут создавать их с самого начала, поддерживать их работу, добавлять новый функционал и оптимизировать старый. Отсюда мы переходим к одной из самых популярных сфер программирования — Frontend разработка.

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

Привет, Хабр. Меня зовут Дмитрий, я Frontend-разработчик в компании Webest. В этой статье расскажу, как эффективно использовать семантический HTML, какие теги (от <header> и <main> до <article> и <aside>) действительно приносят пользу, и в каких ситуациях они работают лучше всего. 

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

Привет, Хабр! Сегодня я хотел бы поговорить с тобой о проблеме публикации картинок. Зачем вообще об этом говорить? Ежедневно миллионы людей публикуют миллионы, или даже, миллиарды изображений, что тут можно обсуждать? Наверняка, для веб-разработчика, тем более, опытного - это вообще никакая не проблема.

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

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

Для создания современных сайтов разработчики все чаще стали пользоваться реактивными фреймворками или чистым JavaScript, отказываясь при этом от библиотеки jQuery. Однако остаются плагины, от которых не так просто отказаться. К таким относится Slick slider. Он очень удобен в использовании и сочетает в себе все необходимые для создания каруселей опции.

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

Chrome 133 развивает существующую функцию всплывающих подсказок, представляя новый режим: popover="hint". Этот режим, управляемый браузером, позволяет использовать новый контекст наложения, упрощающий создание всплывающих подсказок и подобных эфемерных плавающих элементов. Он снижает трудозатраты разработчиков, сохраняя гибкость дизайна.

Всем снова здравствуйте!

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

В прошлый раз мы рассмотрели, как можно без особых проблем выкатить рабочую страницу на GitHub Pages и попробовать встроить в страницу, например, плеер.

Теперь самое время убедиться, что плеер работает и такую проверку можно автоматизировать!

Доброго времени. Меня зовут Дмитрий и я веб‑разработчик. На данный момент работаю в группе компаний по экспорту автомобилей и техники из Японии, Китая и Кореи. Но, сейчас поговорим не об основной работе, а о «подработке».

>= 2 лет назад, на меня вышел директор достаточно крупной автошколы нашего города. На тот момент у них имелось порядка 3-х филиалов, и приблизительно 4,5 тыс. учеников (как актуальных, так и те — которые уже получили свои ВУ). Директор предложил мне поработать с их CRM системой. Данное ПО было написано какими‑то фрилансерами, и на протяжении нескольких лет они же и обеспечивали поддержку. Но, со слов директора, они начали забивать на свою работу, затягивали с выполнением задач или во все игнорировали пожелания по внесению изменений (все это было не бесплатно).

Быстрый сайт - что-то очень очевидное и простое - сайт загружается быстро и не зависает. “3 секунды ожидания и вы начинаете терять пользователей” - пожалуй это правило слышал любой веб-разработчик. Но это правило лишь вершина айсберга - как в вопросе причин потери клиентов, так и в реальном результате.

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

Привет, Хабр! Сегодня мы решили вспомнить, как раньше веб-мастера обходили ограничения разметки. История веб-разработки полна креативных находок — технологии не всегда успевали за фантазией пользователей. На заре девяностых, чтобы выделиться на фоне конкурентов, веб-разработчики искали творческие решения. Собрали подборку из 7 популярных приемов и подходов, которые использовали веб-мастера, чтобы выйти за пределы ограничений HTML.

Подробная инструкция по разработке трёхфазного энергомонитора на базе ESP8266 с функцией автоматической проверки прибора учёта электроэнергии.

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

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