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

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

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

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

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

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

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

В CSS огромное количество псевдо-элементов и псевдо-классов. Так много, что я не знаю ни одного фронтендера, который помнит все. Я тоже не исключение из этого правила.

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

Сегодня я пришёл к вам, чтобы исправить это. Мы рассмотрим несколько псевдо-элементов и псевдо-классов, которые, по моему мнению, редко используют. Хотя они принесут немало пользы!

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

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

Сегодня фронтендеры любят подход атомарных классов, в частности Tailwind. Я не имею ничего против этого подхода. Каждый волен выбирать сам, с чем ему работать.

Но если вы пишете стили по-старому с использованием семантических классов, то у меня есть несколько интересных трюков для вас. Ими пришёл поделиться с вами сегодня.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Я начал использовать медиа-запросы ещё в 2011 году. Помню, как на работе руководитель подарил мне книгу Итана Маркотта «Отзывчивый веб-дизайн». В тот день я даже не работал, а сел читать её. В конце дня я сделал свою первую реализацию адаптивной вёрстки.

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

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

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

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

Многие фронтенд-разработчики часто отдают предпочтение JavaScript при реализации интерфейсных элементов. Я же разработчик старой формации. Мы тогда стремились сделать всё с помощью HTML и CSS.

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

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

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

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

Меня всегда раздражали вопросы на проверку знаний HTML и CSS. На моей памяти я ни разу не встретил человека, который спрашивал что-то интересное. По этой причине у меня появилось несколько статей с вопросами по CSS, которые собрали достаточно много просмотров для меня.

А что касается HTML, то я ничего не написал. Сегодня буду исправляться. Сразу скажу, что это не будут вопросы в стиле: «А какие HTML5-элементы вы знаете?». Мне хочется, чтобы вам было интересно и чтобы вы узнали что-то новое.

По этой причине большинство вопросов связаны с практикой. И абсолютно точно вы не ответите на все. Хотя, может, я ошибаюсь. Вот и проверим, насколько я прав.

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

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

В общении с коллегами я всё чаще замечаю, что многие не знают о последних возможностях CSS. Кто-то настолько занят повседневными задачами, что просто не успевает следить за новинками. Кому-то это не особенно интересно. А кто-то уже много лет использует знакомые подходы и не видит причин что-то менять.

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

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

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

Мне всегда нравилось следить за тем, как развивается CSS. Стараюсь следить за новыми возможностями, чтобы не пропускать что-то действительно важное. И недавно подумал: «А почему бы не рассказать о них читателям Хабра?» Так я и оказался здесь.

Я составил список новинок, которые кажутся мне особенно интересными и важными. Они всё ещё экспериментальные. Браузеры только в последние месяцы начали поддерживать их. Так что это суперсвежие штуки.

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

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

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

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

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

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

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

Мне нравится рассказывать про HTML и CSS. Отдельное удовольствие — находить очень старые фичи языков, о которых редко кто знает. Сегодня я пришёл как раз с ними.

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

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

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

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

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

По моим ощущениям, сейчас их стало меньше. Все ушли в YouTube, а теперь в ChatGPT. Но мне этот формат не подходит, поэтому я пришёл сюда, к вам.

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

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

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

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

Я часто рассказываю про CSS, потому что очень сильно люблю этот язык. И хочу, чтобы у вас с ним не было проблем. Но я совсем мало внимания уделяю HTML. А он тоже прекрасен и полезен!

Сегодня буду исправляться. Я собрал список полезных фич HTML. Большинство из них почему-то используются очень ограниченно. Хотя они могут помочь вам сделать интерфейсы проектов более дружелюбными к пользователям.

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

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

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

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

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

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

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

CSS часто преподносит сюрпризы, способные запутать даже опытных разработчиков. Я понимаю их раздражение. Тут всё закономерно.

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

И всё же, несмотря на все потраченные нервы, CSS мне нравится. Поэтому хочется, чтобы разработчики реже тратили время на борьбу с его особенностями. Изменить стандарты языка не в моих силах, но я смог собрать несколько неочевидных моментов, которые в своё время поставили в тупик меня и моих коллег.

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

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

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

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

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

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

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

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

Конечно, я подумал о кроссбраузерности. Поэтому все фичи хорошо поддерживаются во всех современных браузерах с 2023 года. Я специально проверил их в «Can I use».

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