4 заметки с тегом

мелочь

Познай example.com

Для тестов и документации выгодно использовать домен example.com. Домен зарезервирован IANA. Он точно никому не помешает и не испортит репутацию.

Смело регайся локально на apmyp@example.com, используй в формах http://example.com и не парься о том, что кому уйдет лишний имейл или постбэк.

Про example.com в Википедии:
https://en.wikipedia.org/wiki/Example.com

29 ноября   мелочь

Изображение может не загрузиться

Всегда надо помнить, что веб — штука ненадежная. Шрифты мигают, высота страницы скачет, а картинки — не грузятся.

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

Короче, ставишь `color`, проверяй и `background-color`. Надо чтобы было контрастненько. ?

23 ноября   вёрстка   мелочь

Защити свои ссылки и пользователей

Надо выработать новую привычку. Добавлять ко внешним ссылкам не только target=_blank, но и rel=noopener noreferrer. Так внешние сайты не смогут сделать плохо.

<a 
  href="https://external.link"
  target="_blank"
  rel="noopener noreferrer"
>
Внешняя ссылка
</a>

Подробнее

Почему опасно не добавляет правильный rel?

2018   вёрстка   мелочь   фронтенд

Тяни ссылку, а не оборачивай

Как сделать кликабельной не только ссылку, но и картинку у карточки?

Ссылку можно:

  • добавить вокруг картинки, ❌
  • обернуть вокруг всей карточки, ❌
  • и растянуть. ✔️

Растягиваем ссылку по всей карточке

<div class="card">
  <img 
    class="card__picture" 
    src="https://images.unsplash.com/photo-1544436595-18448ba66450" 
    width="100" 
    height="100" 
    alt=""
  >
  <h2 class="card__header">
    <a href="#" class="card__link">Самая лучшая ссылка</a>
  </h2>
</div>
.card {
  position: relative;
}

.card__link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Посмотреть пример на jsfiddle.net

2018   вёрстка   мелочь   фронтенд