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

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

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

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

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

Подробнее

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

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

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

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

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

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

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

<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

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

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

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

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`.

Работа с репозиторием

Как создать пул реквест

— С реквестом должно быть удобно работать всем членам команды.
— Название ПР-а должно ёмко отражать суть происходящего внутри.
— Описание должно содержать ссылки на задачи в ютрэке в, примерно, таком виде — [ ] ${link}

Как коммитить

— Коммит должен решать одну небольшую задачу.
— Коммиты должны быть достаточно маленькими, чтобы можно было к ним обращаться/возвращаться/черипикать.
— Сообщение коммита должно быть написано по-русски и отвечать на вопрос «Что делает коммит?»

Гит на страже кода

Разработчику стоит следить и ухаживать за кодом. Системы контроля версий дают такую возможность.

git — распределённая система управления версиями. Непонятно о чем речь и зачем эта система нужна начинающим разработчикам. Разберем её по частям, чтобы понять ценность такой системы в каждодневной работе.

Терминал

Осваивать гит надо из терминала. Со знаниями и опытом уже можно браться за сторонний софт. Про основы работы в терминале будет отдельная заметка.

Гит и гитхаб

Это разные вещи! Гит — система, а гитхаб — сервис, объединяющий репозиторий. Соцсеть где вместо фоточек хвастаются кодом.

Гитхаб

Социальная сеть для разработчиков. Удаленный репозиторий — это как раз про репозиторий в гитхабе. Кодим локально и показываем своё творение всему миру!

Чтобы отправлять свой код без ввода пароля каждый раз, надо сгенерировать ключ и сообщить гитхабу что этот ключ наш. Так сервис сможем нас определять и не путать с кем-то другим. Ключ нужно добавлять лишь один раз для аккаунта.

О нюансах, командах и ограничениях гитхаб подскажет сам.

GitHub

Установка

Для популярных ОС есть пакет с гитом. Осталось его найти, скачать и установить. Для мака и убунту это делается из терминала.

Скачать для Windows
Установить на macOS
Установить на Ubuntu

Первичная настройка

Нужно внести данные о себе после установки пакета. Делается это простыми командами.

git config --global user.name "Arthur Bordenyuk"
git config --global user.email "me@apmyp.pro"

Репозиторий

Гит репозиторий — это директория на стероидах. Команда инициализации в пустой директории создает репозиторий.

git init

Гит следит за изменениями и хранит их. Разработчик вносит изменения в код и фиксирует их в репозитории — комиттит.

Коммит

В конце задачи разработчик фиксирует изменения. Процесс фиксации состоит из двух шагов:

  1. Пометить в каких файлах изменения нужно зафиксировать;
  2. Указать комментарий.
git add .
git commit -am "Мой супер коммит"
Коммитим изменения из терминала

Сформированный коммит имеет данные об авторе изменений, дате, ветке и список самих изменений.

Визуализация коммита на примере гитхаба
Визуализация коммита на примере гитхаба

Ветви

Даже работая в одиночку нельзя игнорировать ветки. В репозитории всегда есть одна ветка — master. По-умолчанию, все коммиты попадают в неё. Создать другую ветку и сразу в неё перейти можно командой:

git checkout -b branch_name
Создает и переходит в ветку с названием feature/adaptive

Ветки можно использовать по-разному. Есть методологии, которые объясняют как надо. Одна из таких — git flow. В простом варианте для каждой задачи разработчик создает отдельную ветку и в ней работает. По окончанию работы его ветка сливается с основной, но сначал её нужно отправить в удаленный репозиторий.

Push

git push

Команда отправляет все коммиты из текущей ветки в удаленный репозиторий. Синхронизирует локальную версию с удаленной. Обычно удаленный репозиторий, это репозиторий на гитхабе, битбакете или гитлабе.

Pull

git pull

Команда подтягивает с удаленного репозитория в локальной коммиты, которых нет. Синхронизирует удаленную версию с локальной.

Pull Request

Созданную ветку разработчик хочет слить с основной. Ветка уже запушена. Пора создавать пул реквест. На этом моменте и происходит процесс ревью кода. Коллеги смотрят на код, задают вопросы или просят изменения. Когда все готово — запрос (реквест) принимается и код соединяется с основной кодовой базой, с основной веткой.

Страница реквеста на гитхабе

Ссылки