Как стать автором
Обновить
36.65

HTML *

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

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

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

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

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

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

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

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

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

Читать далее

Новости

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

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

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

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

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

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

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

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

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

Читать далее

Введение в WebRTC

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

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

Читать 📞📞📞

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

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

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

Читать далее

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

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

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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


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


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


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


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


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

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

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

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

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

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

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

Читать далее

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

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

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

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

Просмотреть

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

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

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

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

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

Читать далее

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

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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


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


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


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


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

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

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

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

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