HTML *

Анатолий Орлов ( anatolix ), Денис Нагорнов ( Яндекс )

От редактора Smashing Magazine:

На прошлой неделе Microsoft сделала самое значимое объявление для веба с тех пор, как в 1995 году запустила Internet Explorer: новый браузер под кодовым названием “Project Spartan”. Что это означает для нас, как разработчиков и дизайнеров? Какой движок рендеринга будет использовать Spartan и как он будет влиять на нашу работу? Мы поговорили с Джейкобом Росси, старшим инженером в команде веб-платформы Microsoft о новом браузере, используемом движке рендеринга и о том, заменит ли он в последствии Internet Explorer. Эта статья, написанная Джейкобом, является результатом нашего обсуждения и проливает свет на некоторые аспекты браузера, которые могут быть вам полезны.

Front-end Job Interview Questions

ShareDrop

<DIV>
Этот текст никогда не выйдет за пределы обычного DIV-а!
</DIV>

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

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

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

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

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

Я всегда считал, что с flexbox довольно легко работать — глоток свежего воздуха после стольких лет float'ов и clearfix'ов.

Правда недавно я обнаружил что борюсь с ним; что-то растягивалось, когда я не думал, что оно должно тянуться. Я поправил здесь, другой элемент сжался. Я починил это, что-то другое ушло за экран. Какого Джорджа Буша тут происходит?

В конце концов, все заработало, но солнце село, а мой процесс был привычной игрой с CSS. Или… как называется та игра, где надо ударить крота, а затем другой крот выпрыгивает и надо ударить и его тоже?

Как бы там ни было, я решил что пора вести себя как взрослый разработчик и выучить flexbox должным образом. Но вместо того, чтобы прочитать 10 очередных блог-постов, я решил отправиться прямиком к исходнику и прочитать The CSS Flexible Box Layout Module Level 1 Spec

Вот хорошие отрывки.

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

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

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

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

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

Цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как просто альтернативному мнению. Мои техники не являются единственными правильными решениями.

Сегодня я расскажу:

• как избавиться от соседнего родственного комбинатора + при реализации нестандартных чекбоксов и радиокнопок;
• про свойство inset, сокращающее код на целых три строки;
• мой сниппет для расширения интерактивной области у кнопок и ссылок;
• стиль написания медиа-запросов, позволяющий сократить количество правил;
• альтернативный способ центрирования элемента без свойства transform.

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

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

• как мы незаметно потеряли пользу элементов <section> и <form>;
• как атрибут tabindex запутывает незрячего пользователя;
• почему визуально скрытые элементы — проблема современных интерфейсов;
• что делать с паттерном «Звёздочка» для обязательных полей.

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

Недавно я решил создать свой сайт, и мне понадобилось выбрать парсер Markdown для отрисовки статей в блоге.

То, что начиналось как: «Окей, гугл, какой парсер выбрать?», – вылилось в полноценное исследование существующих реализаций парсеров.

О том, какие открытия меня ждали на этом пути, и будет данная статья.