Отчитываюсь за свой персональный топ самых прослушиваемых треков по версии моего Last.fm.

Получилось сумбурно, но мне нравится.

What Can I Say After I’m Sorry? — просто бэнгер этого лета, самая любимая песня с ещё даже не вышедшего на момент написания заметки альбома группы Blossoms (пластинка выйдет позже в сентябре).

Oh No :: He Said What? — кажется, будет лучшей песней в моём Spotify Wrapped в конце этого года, но пока не уверен, ещё четыре месяца впереди и многое может случится. Но шансы велики.

Лучшие альбомы этого лета — пластинки от Kasabian и Travis. Совершенно разные по настроению и звучанию, но такие одинаково красивые, светлые, немного наивные и крайне тёплые.

Немного инфы по исполнителям и целым альбомам в моём Last.fm:

Сюда каким-то невероятным образом занесло мой новый альбом, который я выпускал в июле:) Послушайте, если ещё не.

Кстати, подписывайтесь на мой Last.fm и обязательно пишите в комментариях на странице, как вам мои чарты. А я отпишусь о ваших.

Такие вот музыкальные дела.

В своей работе с гитом я чаще использую одни и те же команды (работаю через консоль в операционной системе, чтобы быстрее привыкнуть ко всем командам, которые я изучаю). Чтобы новичку было проще ориентироваться в часто используемых командах Git, я создал эту шпаргалку. И себе повторить, и другим в помощь.

***

git init

Инициализирует новый Git-репозиторий в текущей директории. Эта команда создаст новый подкаталог .git, который будет содержать все необходимые файлы для репозитория.

***

git clone https://github.com/username/repo.git

Клонирует удалённый репозиторий на ваш локальный компьютер. Команда создаст копию репозитория repo в текущей директории.

***

git add файл.txt

Добавляет изменения в индекс (staging area) для последующего коммита. Эта команда добавит файл файл.txt в индекс. Чтобы добавить все изменения, можно использовать команду git add .

***

git commit -m "Сообщение о коммите"

Сохраняет изменения из индекса в репозиторий. Команда создаст новый коммит с указанным сообщением.

***

git status

Показывает текущее состояние рабочего каталога и индекса. Команда выведет информацию о том, какие файлы изменены, добавлены в индекс или не отслеживаются.

***

git log

Показывает историю коммитов в текущей ветке. Команда выведет список всех коммитов с их хешами, авторами и сообщениями.

***

git branch

Показывает список веток или создаёт новую ветку. Эта команда выведет список всех локальных веток. Чтобы создать новую ветку, используйте команду:

git branch новая-ветка

***

git checkout новая-ветка

Переключает на другую ветку или восстанавливает файлы. Эта команда переключит вас на ветку новая-ветка. Чтобы восстановить файл, используйте команду:

git checkout файл.txt

***

git merge другая-ветка

Объединяет изменения из одной ветки в другую. Эта команда объединит изменения из ветки другая-ветка в текущую ветку.

***

git pull origin main

Загружает изменения из удалённого репозитория и объединяет их с текущей веткой. Команда загрузит изменения из ветки main удалённого репозитория origin и объединит их с текущей веткой.

***

git push origin main

Отправляет локальные коммиты в удалённый репозиторий. Эта команда отправит изменения из локальной ветки main в удалённый репозиторий origin.

***

git stash

Сохраняет текущие изменения в «стэш» для временного хранения. Команда сохранит все изменения и вернёт рабочий каталог в состояние последнего коммита.

***

git reflog

Команда показывает журнал ссылок, позволяя отслеживать изменения HEAD.

***

git reset --hard HEAD~1

Сбрасывает изменения в индексе или рабочем каталоге. Эта команда вернёт репозиторий на один коммит назад, удалив все изменения.

***

git tag -a v1.0 -m "Версия 1.0"

Создаёт метку (тег) для определённого коммита. Команда создаст аннотированный тег v1.0 с сообщением.

***

Шпаргалку создал; шпаргалку опубликовал. Кто молодец? Вовка молодец. И вы, что дочитали!

Понятное дело, что список далеко неполный, и вообще здесь мало по-настоящему продвинутых команд и техник работы с гитом в командах. Но начать, а самое главное — публиковать в удалённые репозитории 99% своего кода этого хватит просто с лихвой.

Команда git reflog в Git используется для отображения журнала ссылок (reflog) в репозитории. Этот журнал хранит информацию о всех изменениях, которые происходили с указателями (например, ветками и HEAD). Этот инструмент позволяет отслеживать, где находились ветки и какие коммиты были сделаны, даже если они не видны в обычной истории коммитов.

Как работает команда git reflog

Каждый раз, когда вы выполняете операции, которые изменяют состояние вашего репозитория (например, коммиты, переключение веток, слияния и т. д.), Git записывает это изменение в reflog. Это позволяет вернуться к предыдущим состояниям, даже если вы потеряли доступ к ним через обычные команды (к примеру, git log).

Основные команды и примеры:

✵ Просмотр reflog:

git reflog

Эта команда выведет список всех изменений, которые произошли с HEAD, включая коммиты, переключения веток и другие операции. Каждая запись будет содержать хеш коммита, описание действия и дату.

✵ Восстановление состояния из reflog:

Если вы случайно удалили ветку или сделали `reset`, вы можете использовать reflog, чтобы найти нужный коммит и восстановить его. Например, если вы видите в выводе `git reflog` запись с хешем `abc1234`, вы можете вернуться к этому коммиту:

git checkout abc1234

Пример использования:

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

git reset --hard HEAD~2

, что вернуло ваш репозиторий на два коммита назад, и вы потеряли последние два коммита.

✵ Вы можете проверить reflog, чтобы увидеть, где находился HEAD до выполнения команды:

git reflog

✵ В выводе вы увидите что-то вроде этого:

abc1234 HEAD@{0}: reset: moving to HEAD~2
def5678 HEAD@{1}: commit: Добавлен новый функционал
ghi9012 HEAD@{2}: commit: Исправлена ошибка

✵ Теперь можно восстановить последний коммит, используя его хеш:

git checkout def5678

✵ Если захотите вернуть HEAD на это состояние, можете выполнить:

git reset --hard def5678

Команда git stash в Git используется для временного сохранения (или «прихоронения») изменений в рабочем каталоге, чтобы вы могли вернуться к чистому состоянию репозитория. Это полезно, когда вам нужно переключиться на другую ветку или выполнить другую задачу, но вы не хотите коммитить незавершенные изменения.

Подробнее — в этой небольшой заметке.

Когда вы выполняете команду git stash, Git сохраняет ваши изменения (как в отслеживаемых, так и в неотслеживаемых файлах) и возвращает рабочий каталог в состояние последнего коммита. Вы можете позже восстановить эти изменения.

Основные команды и примеры:

✵ Сохранение изменений в stash:

git stash

Это сохранит все изменения в отслеживаемых файлах и вернет рабочий каталог в состояние последнего коммита.

✵ Сохранение изменений с сообщением:

git stash save "Сообщение о стэше"

Это позволяет вам добавить описание к вашему stash, что может быть полезно для идентификации изменений позже.

✵ Просмотр списка сохраненных stash:

git stash list

Эта команда покажет список всех сохраненных stash с их идентификаторами и сообщениями.

✵ Восстановление изменений из stash:

git stash apply

Эта команда применит последние сохраненные изменения из stash к вашему рабочему каталогу, но не удалит их из списка stash.

✵ Восстановление конкретного stash:

git stash apply stash@{1}

Здесь stash@{1} — это идентификатор конкретного stash, который вы хотите восстановить.

✵ Удаление stash после применения: если вы хотите удалить stash после его применения, используйте:

git stash pop

Эта команда применит изменения и удалит их из списка stash.

✵ Удаление конкретного stash:

git stash drop stash@{0}

Это удалит указанный stash из списка.

✵ Очистка всех stash:

git stash clear

Эта команда удалит все сохраненные stash.

Пример использования:

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

✵ Вы сохраняете свои изменения:

git stash

✵ Переключаетесь на ветку main:

git checkout main

✵ Исправляете ошибку и коммитите изменения.

✵ Возвращаетесь к ветке feature:

git checkout feature

✵ Восстанавливаете свои изменения:

git stash pop

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

По Git’у и общим принципам современной разработки.

Недавно увлёкся веб-разработкой и решил с самого начала потихонечку идти по собственному роадмапу в этом направлении. В качестве основного источника знаний выбрал школу PurpleSchool. В отличие от других российских онлайн-школ, PurpleSchool не тратит деньги на агрессивный маркетинг и бездумный набор учеников, а концентрируется на точечном обучении своих студентов фронтенду и бекенду.

Основатель и преподаватель школы — разработчик Антон Ларичев, и мне очень нравится, как он объясняет материал. Пока закончил два модуля и буду двигаться дальше.

Мои области развития потихонечку, но ползут вперёд:

Если вам тоже хочется развиваться в этом направлении — вот ссылка на курс, который я сейчас сам прохожу.

Продолжаю разбираться в дебрях CSS, а заодно и пытаться пересказывать полученные знания в своём блоге (для себя и для интересующихся читателей).

Сегодня говорим про свойство display: flex .

display: flex — это свойство CSS, которое позволяет управлять расположением элементов внутри контейнера, превращая его в так называемый «флекс-контейнер». Давайте представим, что у нас есть коробка (контейнер) с игрушками (элементами). Display: flex дает нам инструменты, чтобы упорядочить эти игрушки в ряд, колонку или как-нибудь по-другому, как нам нужно.

Где применяется?

• Навигационные меню: для выравнивания пунктов меню.
• Карточки продуктов: для создания гибких сеток товаров.
• Формы: для выравнивания полей ввода и кнопок.
• Галереи изображений: для создания адаптивных галерей.

Как это работает?

Когда вы применяете display: flex к контейнеру, все его непосредственные дочерние элементы становятся flex-элементами. Это означает, что вы можете управлять их размером, порядком и выравниванием с помощью различных свойств Flexbox.

Основные свойства:

flex-direction — определяет направление, в котором располагаются flex-элементы (по горизонтали или вертикали).
row (по умолчанию) — элементы располагаются в строку.
column — элементы располагаются в столбик.
justify-content — определяет, как элементы распределяются по основной оси (горизонтально или вертикально).
flex-start — элементы выравниваются по началу.
flex-end — элементы выравниваются по концу.
center — элементы выравниваются по центру.
space-between — элементы распределяются с равными промежутками между ними.
space-around — элементы распределяются с равными промежутками вокруг них.
align-items — определяет, как элементы выравниваются по поперечной оси (перпендикулярно основной оси).
flex-start — элементы выравниваются по началу.
flex-end — элементы выравниваются по концу.
center — элементы выравниваются по центру.
baseline — элементы выравниваются по базовой линии текста.
stretch — элементы растягиваются, чтобы заполнить контейнер.

Примеры кода:

Простой пример применения флексбокса:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Пример</title>
    <style>
        .container {
            display: flex; /* Включаем Flexbox */
            flex-direction: row; /* Элементы располагаются в строку */
            justify-content: space-between; /* Равные промежутки между элементами */
            align-items: center; /* Выравнивание по центру по вертикали */
            height: 100px; /* Высота контейнера */
            background-color: #f0f0f0; /* Цвет фона контейнера */
            padding: 10px; /* Отступы внутри контейнера */
        }

        .item {
            background-color: #4CAF50; /* Цвет фона элементов */
            color: white; /* Цвет текста */
            padding: 20px; /* Отступы внутри элементов */
            border-radius: 5px; /* Закругленные углы */
        }
    </style>
</head>
<body>

<div class="container">
    <div class="item">Элемент 1</div>
    <div class="item">Элемент 2</div>
    <div class="item">Элемент 3</div>
</div>

</body>
</html>

• В этом примере мы создали контейнер с классом container, который использует display: flex.
• Элементы внутри контейнера (с классом item) располагаются в строку благодаря flex-direction: row.
• Свойство justify-content: space-between распределяет элементы с равными промежутками между ними.
• Свойство align-items: center выравнивает элементы по центру по вертикали.

Пример с навигационным меню:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Menu</title>
    <style>
        .menu {
            display: flex; /* Включаем flexbox */
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        .menu li {
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <nav>
        <ul class="menu">
            <li>Главная</li>
            <li>О нас</li>
            <li>Услуги</li>
            <li>Контакты</li>
        </ul>
    </nav>
</body>
</html>

• Здесь .menu использует display: flex для выравнивания пунктов меню в строку.
• Свойство list-style-type: none убирает маркеры списка для навигационных пунктов.

Объясняя читателям одну из самых непростых тем в CSS, я сам лучше закрепляю эти знания.

Свойство display в CSS определяет, как элемент отображается на веб-странице. Оно влияет на поведение элемента, его размеры, расположение и взаимодействие с другими элементами.

В зависимости от значения, элемент может быть:

✵ Строчным (inline) — отображается как часть текста, занимает столько места, сколько нужно для его содержимого. Идеально для коротких фрагментов (слова, аббревиатуры, ссылки) или элементов, которые должны «плыть» в тексте, не создавая новых строк.
✵ Блочным (block) — отображается как отдельный блок, занимает всю ширину родительского элемента, имеет отступ сверху и снизу. Данное свойство балансирует макет, формирует блоки контента (заголовки, параграфы, кнопки) и позволяет применять фиксированную ширину и высоту.
✵ Строчно-блочным (inline-block) — сочетает в себе свойства inline и block, отображается как часть текста, но может иметь ширину и высоту, а также отступы. Например, идеально подходит для вёрстки навигационных меню, карточек, элементов с фиксированной формой внутри динамичного контента.

Применение

В современной веб-разработке display используется повсеместно:

✵ структурирование контента: с помощью display: block можно создавать разделы, блоки текста, заголовки и другие элементы, которые должны занимать всю ширину родительского элемента.
✵ оформление элементов: display: inline-block позволяет размещать элементы в строке, но при этом задавать им ширину и высоту, что позволяет создавать более сложные макеты.
✵ скрытие элементов: с помощью display: none можно скрывать элементы с страницы, что удобно для управления отображением контента.
✵ создание гибких макетов: display в сочетании с другими свойствами CSS позволяет создавать сложные макеты с адаптивным отображением элементов на разных устройствах.

Примеры:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример display</title>
    <style>
        .inline {
            display: inline;
            background-color: lightblue;
            padding: 10px;
        }

        .block {
            display: block;
            background-color: lightgreen;
            padding: 10px;
            margin-bottom: 10px;
        }

        .inline-block {
            display: inline-block;
            background-color: lightcoral;
            padding: 10px;
            width: 100px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="inline">Inline элемент</div>
    <div class="inline">Inline элемент</div>
    <div class="block">Block элемент</div>
    <div class="block">Block элемент</div>
    <div class="inline-block">Inline-block элемент</div>
    <div class="inline-block">Inline-block элемент</div>
</body>
</html>