Научись вебу!

Изучаю и делюсь полезными вещами из мира веба

Чеклист по вёрстке

Текст

Картинки

  • https://squoosh.app/

Вёрстка

Прочее

4 декабря   чеклист

Познай example.com

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

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

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

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

Принцип «В сообщении всё есть»

Из хорошего сообщения понятно о чем речь: о макете, новой фиче или старом забытом баге. Никто не будет вспоминать былое, проще забить.

В сообщении есть всё, что может понадобиться собеседнику: ссылки, скриншоты, макеты, видосы, телефоны, явки и пароли.

❌ Залил фикс по меню в прод
✅ Активный пункт меню теперь подсвечивается: https://snpy.in/


❌ Ребзя, а че там с задачей???? Я её скидывал 3 часа назад. Она вообще-то АСАП
✅ Михал Михалыч смс рассылку запустить не может из-за бага с отправкой через twilio. Кто-то взялся?

Баг с рассылкой описан в трекере: https://the-new-bugtracker.com/


❌ Задеплоил на тестовый модалку на фиде
✅ Вернул модалку с загрузкой на подборе. Учел прескоринг и лидовый тип.

Прескоринг: https://snpy.in/
Лидовые: https://snpy.in/


❌ Глянь, плиз, как выглядят отзывы у Альфы сейчас, я там апдейт выкатил
✅ На отзывы теперь можно отвечать и голосовать за чужие. Глянь, плиз, у Альфы, там много примеров. Норм?

Личный кабинет компании:
https://alfa.example.com/
alfa@example.com
nevermind


Пишите хорошие сообщения, а плохие не пишите. Берегите друг друга.

28 ноября   принципы

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

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

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

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

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

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

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

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

Подробнее

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

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

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

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

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

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

<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

Шрифты и лигатуры

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

Fira Code — моноширинный шрифт с поддержкой лигатур, полезных при программировании. Детально разобрать какие именно лигатуры присутствуют можно, конечно же, на странице проекта на гитхабе.

Дайте шрифту шанс и вы не сможете жить без него :)

https://github.com/Apmyp/handbook#fonts

FiraCode в действии

Редактор

Писать код нужно не где попало, а в специальной среде. Редакторов очень много и надо выбрать один из них.

Есть старые редакторы (вим и емакс), обычные (нотпад++, саблайм, атом, вскод) и иде (phpstorm, webstorm, netbeans, ...).

Для начала стоит двигаться с середины, с обычных редакторов. Самый обычный и клёвый — вскод.

Visual Studio Code

Редактор от майкрософт может редактировать код (!), менять темы и цветовые схемы, имеет много раскладок и плагинов. Полностью готов начала работы.

Скачать вскод

Обязательные дополнительные плагины для работы

Их нет. Функционала и так достаточно, чтобы творить. :)

Настроенный под себя редактор автора

Терминал

Каждый разработчик должен уметь пользовать терминалом. Так разработчик разберется с внутренностями системы.

Нетронутый терминал

Команда

В общем случае, в терминале формула простая:

[команда] [настройки для команды]

Настройки для команды не обязательны:

[команда]

Навигационные команды

cd — change directory — смена текущей рабочей директории
pwd — present working directory — текущая рабочая директоия
ls — список файлов и директорий в текущей рабочей директории

Пример команды смены рабочей директории

Команды файловой системы

cp — скопировать
mv — переместить / переименовать
mkdir  — создать директорию
touch — создать файл
rm — удалить

Выходим из текущей директории на уровень выше и удаляем созданную ранее директорию

Другие команды

Команд огромное количество, но нет смысла из заучивать или выписывать в эту заметку. Надо начать пользоваться терминалом каждый день и нужные вещи сами найдут своё место.

Что качать

Терминал для Мака
Терминал для Винды

Терминал и гит

Удачным будет решение использовать гит вместе с терминалом. Как раз это и прокачает навык.

Заметка о гите

Заметка о вёрстке

При вёрстке приложения нужно много чего учесть. Вот небольшой список того чего можно придерживаться.

  • Вёрстка должна соответствовать макету. Пиксель пёрфект — зло.
  • Семантика. Если элемент нажимается — `<button>`, если ссылается на другую страницу — `<a>`, текст — `<p>` и тд.
  • Компоненты должны быть максимально независимыми. Каскада — по-минимуму.
  • Адаптивность. Mobile first. Если решено верстать только на десктоп, то проверять на разрешениях от 1024.
  • Состояния. Предусмотреть все состояния кнопок, ссылок и элементов формы. Не забыть про `:focus`.
Ранее Ctrl + ↓