Команда 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>

Ну что, самое время нырять в крипту?

Мне было совсем нечего делать и я создал акк и загрузил свой новый альбом (если ешё не послушали — срочно надо!) на Audius — современную, модно-молодёжную площадку.

Audius — децентрализованный музыкальный стриминговый сервис, который был запущен в 2019 году. Он построен на блокчейн-технологии и ориентирован на прямое взаимодействие между артистами и их поклонниками, минуя традиционные посреднические структуры (типа лейблов и стриминговых платформ).

На скрине ниже — красивый визуалайзер, который появляется, когда играет какой-нибудь трек.

Надеюсь, кто-нибудь когда-нибудь занесёт мне крипто-копеечку за мои музыкальные труды. Если что, ссылочка вот: https://audius.co/tatuuma

Ах да. Audius недоступен в России без ВПН.

Обожаю эти несколько степеней офигевания. Особенно под вечер перед сном.

Сначала ты офигеваешь, что существует такая прикольная альтернатива Саундклауду, как Hearthis.at. Довольно быстрая, кастомизируемая и дружелюбная платформа для меломанов и музыкантов.

Потом офигеваешь, что ты на этой платформе как артист уже присутствуешь (Что?! Когда и как я там зарегистрировался и уж тем более успел накидать туда своих треков?). Ну да ладно, прикольно.

А уже аккурат перед сном ты окончательно обескуражен цифрой прослушиваний твоей музыки на этом сайте. Например, у трека Light Room целых 17 тысяч прослушиваний! ПРОСТО ЧТО ВООБЩЕ ПРОИСХОДИТ?

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

Кому интересно: https://hearthis.at/tatuuma/