Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него. Читать дальше →
Подробнее![[Перевод] Свойства Min и Max width/height в CSS](/uploads/habrahabr_logo.png){kind=logo}
Перевод «Min and Max Width/Height in CSS» Ахмада Шадида Порой у разработчиков возникает необходимость ограничить ширину элемента относительно родителя, и в то же время, оставить её динамичной. Задав таким образом начальный размер с возможностью расширения при наличии доступного пространства. Например, нам нужна кнопка, которая должна иметь минимальную ширину. Именно в таких ситуациях удобно использовать свойства максимума и минимума. В этой статье мы познакомимся с CSS-свойствами максимума
Подробнее
Привет, Хабр! Представляю вашему вниманию перевод статьи «My top 5 reasons why I like CSS custom properties», автора Stas Melnikov Спецификация пользовательских свойств CSS навсегда изменила мой взгляд на веб-разработку. Именно поэтому я хочу написать, почему мне нравятся пользовательские свойства CSS. Читать дальше →
Подробнее![[Из песочницы] 6 самых распространённых ошибок разработчиков при написании HTML и CSS](/templates/tcseby/images/placeholder.svg)
Привет, Хабр! Представляю вашему вниманию перевод статьи «The 6 most common mistakes developers when writing HTML and CSS» автора Stas Melnikov. Использование атрибута placeholder вместо элемента label Часто разработчики используют атрибут placeholder вместо элемента label. Но в этом случае пользователи скринридера (программы чтения с экрана) не могут заполнять поля, потому что скринридер не может прочитать текст из атрибута placeholder. Поэтому я рекомендую использовать элемент…
Подробнее![[Из песочницы] Унификация визуальных компонентов. Часть 1. Стили](https://habrastorage.org/webt/00/7v/55/007v55-c7k0gjfzqkhtoy0irbma.png)
Данная статья будет, прежде всего, полезна разработчикам, которые не работают с готовыми наборами компонентов, такими как, material-ui, а реализуют свои. Например, для продукта разработан дизайн, отражающий то, как должны выглядеть кнопочки, модальные окна и т.п. Чтобы грамотно реализовать такую дизайн-систему, потребуется всем её атомам добавлять хорошую поддержку их композиции. Иными словами, нужно добиться того, чтобы любой отдельно взятый компонент мог интегрироваться и идеально
Подробнее
Казалось бы, какой пост может быть о CSS Flexbox в 2019 году? Верстальщики уже несколько лет активно используют данную технологию, и все тайны должны быть разгаданы. Однако, недавно у меня возникло стойкое ощущение, что нужно поделиться одним нетривиальным и, на мой взгляд, полезным приёмом, связанным с flexbox. Написать пост побудил тот факт, что ни один знакомый (из учеников, верстальщиков и просто людей, близких к web), не смог решить задачку, связанную с flexbox, хотя на это нужно
Подробнее
Привет, я Александр. Активно изучаю и занимаюсь веб разработкой уже около года. Все началось с удаления клиента любимой игры и поиска ментора. Совершенствуясь в веб-разработке создал проект CSS Comparator. Сама суть проекта заключается в сравнении CSS фреймворков по размерам и другим популярным и современным параметрам. При создании проекта не преследуются коммерческие цели. Главным образом эта статья предназначена для получения отзывов от других веб-разработчиков. На данный момент это уже
Подробнее
Недавно в одном стартапе я решал задачу генерации билетов в формате PDF. На тот момент уже был готов сайт с устоявшимся стеком технологий, поэтому я искал подход, который бы не потребовал использования дополнительных инструментов. В итоге я предложил сперва создавать билеты в формате HTML, а затем конвертировать в PDF с помощью браузера Chrome. Как оказалось, данным способом можно генерировать не только билеты, богато декорированные CSS, но и самые разные отчеты с графиками на JavaScript.
Подробнее![[Перевод] 7 советов по оптимизации CSS для ускорения загрузки страниц](https://habrastorage.org/webt/nm/8e/ch/nm8echu4u8qgkudf6i5txurtl7m.png)
В современном вебе, время загрузки страницы сайта — одна из важнейших метрик. Даже миллисекунды могу оказывать огромное влияние на Вашу прибыль и медленная загрузка страницы может легко навредить Вашим показателям конверсии. Существует много инструментов и техник, которые Вы можете применить для ускорения Вашего вебсайта. В этой статье мы рассмотрим лучшие советы по оптимизации CSS, которые Вы можете использовать для повышения производительности интерфейса. Читать дальше →
Подробнее
Самым важным для Frontend разработчика является модуль отображения в браузере, он же Rendering Engine (далее RE). В этой статье я хочу взять простую страничку и пройти все этапы вместе с RE от получения первого байта и до отрисовки контента на экран. Пользоваться я, как всегда, буду браузером Chrome. Для начала разберем, из каких еще модулей состоит браузер, чтобы понимать с чем взаимодействует RE. Читать дальше →
Подробнее
Сегодня у нас в руках множество инструментов, исследований и статей по ux/ui и том как сайт будут читать и идентифицировать. Но главный вопрос остаётся открытым. А знаете ли именно вы, куда пользователи вашего (или сделанного вами) сайта тыкают? Сегодня поговорим о кнопках Все, наверное, хоть раз слышали о том, что у кнопок есть минимальный допустимый размер, существуют какие то защитные поля, и что кнопки должны быть похожи на кнопки. Но так ли это на самом…
Подробнее
Привет, Хабр! Двунаправленным письмом в наше время никого не удивить. Оно поддерживается управляющими символами Уникода, для него создан HTML-тег . Но горизонтальные письменности – не единственные существующие и применяемые для записи человеческой речи. Кроме обычного слева-направо и справа-налево есть ещё два варианта вертикального письма. Первый – восточно-азиатский, использующийся в языках, основанных на китайском. В них иероглифы идут сверху-вниз, а строки — справа-налево. Этот стиль
Подробнее