![[Перевод] Таблицы и CSS-свойство float в современной веб-разработке](https://habrastorage.org/webt/ks/hx/bl/kshxblccpbrcccvoovzpujfy0wu.jpeg)
Больше двадцати лет тому назад таблицы были основным HTML-средством для оформления веб-страниц. Таблицы давали веб-мастерам стабильный механизм для создания сайтов, имеющих некие признаки «дизайна». Содержимое страниц больше не должно было идти строго сверху вниз. Материалы можно было размещать в ячейках таблиц, располагавшихся слева направо и сверху вниз. В те времена это казалось большим достижением. Таблицы, правда, никогда не предназначались для создания макетов страниц. А тот, кто…
Подробнее![[Перевод] 20 небольших, но вдохновляющих вызовов веб-разработчику](https://habrastorage.org/getpro/habr/post_images/efe/1e9/4f7/efe1e94f7c751f7ecae1f0bc297f3f28.gif)
Специально к старту нового потока курса «Frontend-разработчик» делимся переводом подборки с 20 проектами для освоения фронтенда. Эта подборка хорошо подходит, если вы хорошо знакомы с какой-то областью разработки ПО и хотите глубже копнуть во фронтенд. Также она прекрасно подходит людям, которые не хотят начинать знакомство с фронтендом со стандартных проектов. Проекты довольно небольшие, и у каждого указан уровень сложности. С помощью этих проектов вы ознакомитесь с Tone.js — обёрткой над
Подробнее
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него. Читать дальше →
Подробнее![[Перевод] Нативный Masonry Layout в CSS Grid Level 3](/uploads/habrahabr_logo.png){kind=logo}
Недавно был опубликован черновик спецификации CSS Grid 3 уровня, в котором содержится описание способа создания Masonry-раскладки с помощью чистого CSS. В этой статье Rachel Andrew объясняет данную спецификацию с примерами, которые вы можете воспроизвести в браузере Firefox Nightly. И хотя данный функционал пока что нельзя использовать в реальных проектах, ваш отзыв может помочь убедиться, что текущая реализация соответствует или не соответствует требованиям разработчиков к этому типу…
Подробнее
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него. Читать дальше →
Подробнее
Лет 10 назад мне нужна была какая-то система, чтобы вести блог о web-разработке и я использовал сильно хакнутый Drupal, который со временем стало невозможно обновить из-за груды костылей и постоянной нужде рыться под капотом после каждого update. За 10 лет накопилось порядка 300 статей по верстке и front-end программированию, а также куча полезных сниппетов кода, которые я в последующем использовал для создания RevolveR Contents Management Framework на фирменной архитектуре…
Подробнее
Сторонники веб-оптимизаций часто советуют добавлять к изображениям атрибуты с размерами, что позволяет при отрисовке страницы оставлять нужное количество пространства ещё до загрузки самого изображения. Это позволяет избежать смещения раскладки страницы по мере загрузки изображений - что с недавних пор начал измерять Chrome в новой метрике Cumulative Layout Shift (CLS). Секрет, не так хорошо известный разработчикам, не являющимся заядлыми сторонниками веб-производительности, заключается
Подробнее![[Перевод] Отзывчивый веб-дизайн и учёт высоты окна браузера](https://habrastorage.org/webt/he/p4/zl/hep4zl3rgueuavmsjjonltwr9ag.png)
Знаю, что у многих появится вопрос о том, почему у этой статьи такой необычный заголовок. Как связаны «отзывчивый веб-дизайн» и «высота окна браузера»? Пожалуй, этот заголовок кажется необычным из-за того, что под «отзывчивым дизайном», как правило, понимают проектирование страниц таким образом, чтобы они подстраивались бы под ширину области просмотра, чтобы они хорошо бы выглядели на разных устройствах. Сайты всегда тестируют, уменьшая ширину браузера и наблюдая за происходящим. Но я…
Подробнее![[Перевод] Адаптивный дизайн высоты](https://habrastorage.org/webt/ie/-s/ee/ie-seeatbkaymxwe-yyre0hiyv4.jpeg)
Возможно, вы думаете о том, почему я выбрал такой заголовок. Адаптивный дизайн высоты, серьезно? Ну, термин адаптивный веб-дизайн часто описывается как проверка браузера на нескольких вариантах ширины области просмотра и размеров устройств. Сайт всегда тестируется горизонтально — на уменьшение ширины, но я редко вижу какие-то соображения для тестирования вертикально — на уменьшение высоты. В глубине вашего сознания возникает вопрос: нужно ли уменьшать высоту браузера? Да, и я буду убеждать
Подробнее
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него. Читать дальше →
Подробнее
Когда вопрос касается структурирования CSS, нет недостатка различных соглашений об именовании, методологий и архитектур. Будь то BEM, OOCSS, SMACSS, ITCSS или CUBE CSS - за последние годы появилось много разных подходов к управлению модульным CSS. В статье автор делится своим текущим принципом структурирования CSS. Он не полностью придерживается какой-либо определённой методологии, а адаптирует её под себя. Читать далее
Подробнее
Бывает, что на сайте, в корпоративной IT-системе или другом ПО нужно отображать круговые диаграммы с какими-либо данными. Например, это может быть таймер для отсчета времени или индикатор, сколько товаров продано в той или иной категории. Если это статическое изображение, конечно, можно обойтись форматом svg, png или gif. Однако, зачастую нужно показать данные в динамике – например, для мониторинга или просто для привлечения внимания пользователей, для создания красивой анимации при
Подробнее