📅 Шаг 11. CSS — Состояния и сетка

📚 Псевдоэлементы, псевдоклассы, Grid

🎯 Что повторил:

• ::before, ::after, :hover, :focus

• grid-template-columns, grid-gap, grid-area

📌 Практика для тебя: сверстай карточку с декоративными элементами и сеткой Grid

#css
#шаг_в_it

📎 Визуальная шпаргалка:

Grid = display: grid;  
Состояния: :hover, :focus, :disabled

🥕 Grid Garden — выращивай морковку с помощью CSS Grid!

🎮 В игре 28 уровней, и каждый — это новая задача:

• применяешь grid-column-start, grid-row, grid-area и другие свойства

• учишься управлять колонками, строками и областями

• видишь результат сразу — морковка растёт, если всё правильно!

📚 Игра охватывает:

• базовые и продвинутые свойства CSS Grid

• работу с шаблонами (grid-template-columns, grid-template-rows)

• позиционирование элементов и управление порядком (order)

🔗 Ссылка на игру Grid Garden

✍️ Делись результатами в комментариях 👇

📅 Шаг 12. CSS — Адаптация и анимации

📚 Адаптив, переменные, Sass, анимации

🎯 Что повторил:

• @media, min-width, max-width

• @keyframes, animation, transition, transform

• var(), clamp(), calc()

• препроцессор Sass, миксины

📌 Практика для тебя: сверстай адаптивный блок с анимацией и переменными. Попробуй подключить Sass.

#css
#шаг_в_it

📎 Визуальная шпаргалка:

Адаптив: Mobile First  
Переменные: :root { --main-color: red }  
Анимации: @keyframes slide → animation: slide 1s ease;

Поговорим сегодня о выборе операционной системы для твоего ПК.

У себя на компьютере использую две операционные системы, windows 11 и Linux Mint. Каждая установлена на отдельном жестком диске.

По состоянию на июль 2025 года общая доля операционных систем Microsoft у пользователей составляет 71.27%.

Чем же привлекает Linux Mint.

Linux Mint предлагает веб-разработчикам ряд преимуществ перед Windows 11, особенно в плане работы с консолью и общей гибкости окружения.

1. Нативная поддержка Linux-инструментов

Веб-разработка часто требует работы с Git, Node.js, Python, Ruby, Docker, Nginx/Apache и другими инструментами, которые в Linux работают "из коробки" или устанавливаются одной командой.

В Windows многие утилиты требуют WSL (Windows Subsystem for Linux), что добавляет накладные расходы.

В Linux Mint все работает нативно, без эмуляции.

2. Мощная консоль (Bash/Zsh/Fish) с полноценным пакетным менеджером

Консоль в Linux Mint (обычно Bash или Zsh) намного удобнее, чем PowerShell или CMD в Windows:

Преимущества терминала в Linux Mint:


✅ apt / dpkg – удобный менеджер пакетов (вместо choco/winget в Windows).

✅ Гибкость скриптов – Bash-скрипты мощнее .bat/.ps1.

✅ Полноценные права – не нужно постоянно запускать sudo (в отличие от UAC в Windows).

✅ SSH и инструменты DevOps (curl, wget, rsync, scp, tmux) работают без костылей.

✅ Простое управление процессами (ps, kill, htop, systemctl).

Примеры удобных команд:

# Установка Node.js, Git, Python
sudo apt install nodejs git python3

# Запуск локального сервера Python
python3 -m http.server 8000

# Мониторинг процессов
htop

В Windows аналогичные действия требуют либо WSL, либо установки отдельных программ.


3. Лучшая поддержка серверных технологий

- Веб-серверы (Nginx, Apache) настраиваются проще.

- Docker работает быстрее (в Windows он использует виртуальную машину).

- Базы данных (PostgreSQL, MySQL, Redis) проще развернуть.


4. Легкая кастомизация и стабильность

- Linux Mint (Cinnamon) менее ресурсоемкий, чем Windows 11.

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

- Можно тонко настроить систему под свои нужды (альтернативные DE, tiling-менеджеры и т. д.).


5. Безопасность и отсутствие bloatware

- Нет телеметрии, как в Windows.

- Меньше уязвимостей для атак (особенно актуально для веб-разработки).

- Нет ненужных предустановленных программ.


6. Совместимость с профессиональными инструментами

- VS Code, IntelliJ IDEA, PHPStorm работают так же хорошо, как в Windows.

- Neovim/Emacs лучше интегрированы в систему.

- Удобная работа с контейнерами (Podman, LXC).

В свое время, долго использовал Linux в качестве основной системы.

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

#soft

Какой системой пользуешься ты? Пиши в комментариях 👇

Ярким свидетельством мощи консольных команд Linux, по сравнению с графическим диспетчером файлов Windows, разберем на примере.

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

В командной строке это займет одну строчку:

cp -u *.html destination

#soft

Немного юмора.

Поговорим сегодня о методе "слепой" печати для разработчика.

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

Для начала нужно правильно расположить руки на «домашнем» ряду клавиш. Мизинец левой руки касается буквы «Ф», безымянный — «Ы», средний — «В», а указательный — буквы «А». Указательный палец правой руки занимает букву «О», средний — «Л», безымянный — «Д», а мизинец — букву «Ж». Специальные бугорки на буквах «А» и «О» помогают быстро найти нужное положение.

Большие пальцы лежат на пробеле. Каждая рука отвечает за конкретную зону на клавиатуре.

Владение слепой (или десятипальцевой) печатью — это один из самых недооцененных суперскиллов веб-разработчика. Это не просто «приятно уметь», это реальный профессиональный инструмент, который сильно влияет на эффективность.

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

1. Существенное увеличение скорости и эффективности

Это самое очевидное преимущество.

• Код пишется быстрее:

Вы меньше тратите времени на механический набор текста и больше — на обдумывание архитектуры, логики и алгоритмов.

• Быстрое внесение правок:

Рефакторинг, переименование переменных, правки по комментариям ревьюера — все это происходит в разы быстрее.

• Скорость работы с консолью:

Ввод команд в терминале (Git, npm, ssh и т.д.) становится молниеносным и безошибочным. Это критически важно, когда нужно быстро выполнить несколько команд подряд.

Результат: Вы просто больше успеваете за тот же промежуток времени.

2. Снижение когнитивной нагрузки и усталости

Это, пожалуй, даже важнее скорости.

• Мозг свободен для сложных задач:

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

• Меньше усталости:

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

Результат: Вы работаете более сфокусированно, дольше сохраняете концентрацию и меньше устаете.

3. Улучшение качества кода и снижение количества ошибок

Слепая печать неразрывно связана с мышечной памятью.

• Автоматизм в написании синтаксиса:

Пальцы сами помнят, как написать function, const, if (condition) { }, сложные комбинации символов вроде =>, &&, === и т.д. Это сводит к минимуму опечатки, связанные с неверным нажатием.

• Поток состояний (Flow State):

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

Результат: Меньше времени тратится на отладку синтаксических ошибок (очепяток) и больше — на исправление ошибок логики.

4. Эргономика и здоровье

• Правильное положение: При слепой печати вы сидите ровно, смотрите прямо перед собой на экран, а не горбитесь, вглядываясь в клавиши. Это правильная и здоровная поза для работы за компьютером.

• Профилактика болезней: Снижается риск развития туннельного синдрома (боли в запястьях) и проблем с шеей и спиной.

Результат: Вы инвестируете в свое долголетие и здоровье как специалиста.

На что именно влияет слепая печать в контексте веба?

• Набор HTML: Быстрое и точное проставление тегов, атрибутов, закрывающих элементов.

• Набор CSS: Молниеносное написание свойств, значений, селекторов. Особенно удобно для часто используемых свойств вроде display: flex;, position: absolute; и т.д.

• JavaScript/Typescript: Быстрый набор сложного синтаксиса, промисов, async/await, обработчиков событий.

• Работа с терминалом (Bash, Zsh, PowerShell): Вы не боитесь длинных команд. git push origin feature/new-authentication-module вводится за секунды.

• Работа с GitHub/GitLab: Написание качественных и подробных коммитов и описаний пул-реквестов перестает быть рутиной.

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

1. Онлайн-тренажеры:

Klava.org

Клавогонки

Keybr.com

Ratatype

Самый популярный и эффективный способ.

2. Постоянная практика:

Начните с 15-20 минут в день. Главное — делать это регулярно и НИКОГДА не смотреть на клавиатуру во время учебы. Даже если печатаете медленнее обычного.

3. Доведите до автоматизма:

Сначала выучите основную раскладку (буквы), потом обязательно переходите на специальные символы, которые важны для программирования: {} [] () <> ; : ? & | / \ $ # @ ! ~ % ^.

#полезности

🖥 Почему важно уметь пользоваться командной строкой

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

Вот почему стоит освоить командную строку:

- ⚡️ Скорость и эффективность: команды выполняются быстрее, чем клики мышкой.
- 🔧 Гибкость: можно автоматизировать задачи, обрабатывать файлы, управлять системой.
- 🧠 Глубокое понимание системы: работа через терминал раскрывает внутреннюю архитектуру ОС.
- 📦 Доступ к мощным инструментам: многие утилиты доступны только через CLI (Command Line Interface).
- 🛠 Незаменимость в программировании: Git, Docker, SSH, cron — всё это живёт в терминале.

Приведу пример команды, которая одной строкой создаёт несколько папок с вложенными подкаталогами и файлами внутри - с помощью mkdir, touch и фигурных скобок Bash:

mkdir -p project/{src/{components,utils},docs,tests} && touch project/{README.md,src/components/App.js,src/utils/helpers.js,docs/manual.txt,tests/test_app.js}

🔍 Что делает эта команда:

- mkdir -p project/{...} - создаёт основную папку project и внутри неё:
- src/components
- src/utils
- docs
- tests
- touch ... - создаёт файлы внутри этих папок:
- README.md в project/
- App.js в project/src/components/
- helpers.js в project/src/utils/
- manual.txt в project/docs/
- test_app.js в project/tests/

📁 Структура получившихся папок:

project/
├── README.md
├── docs/
│   └── manual.txt
├── src/
│   ├── components/
│   │   └── App.js
│   └── utils/
│       └── helpers.js
└── tests/
    └── test_app.js

Интересно, сколько времени бы ушло на создание папок и файлов с помощью мыши.
И это только одна из возможностей, которую дает работа в консоли.

📖 Что почитать: книга "Командная строка Linux. Полное руководство." Уильям Шоттс.

Поделитесь вашим опытом.

В продолжении темы про командную строку.
Держите полезные сочетания клавиш для повышения эффективности работы в bash

⏩ Навигация

> Ctrl+A переместить курсор в начало строки
> Ctrl+E переместить курсор в конец строки
> Ctrl+F переместить курсор на один символ вправо
> Ctrl+B переместить курсор на один символ влево
> Alt+B / Esc+B переместить курсор влево на одно слово


---

⏩ Редактирование

> Ctrl+U удалить все и вернуться в начала строки
> Ctrl+K удалить все после курсора
> Ctrl+W удалить слово перед курсором
> Alt+D удалить слово после курсора
> Ctrl+Y вернуть удаленное
> Ctrl+D удалить символ под курсором
> Ctrl+H аналогично backspace
> Alt+T смена позиции текущего слова на предыдущее
> Ctrl+T замена местами двух символа перед курсором
> Alt+U перевод слова в заглавные после курсора
> Alt+L перевод слова в строчные после курсора
> Ctrl+_ отмена последнего ввода

---

⏩ Bash History

> Ctrl+R режим обратного поиска
> Ctrl+P переход к предыдущей команде
> Ctrl+N переход к следующей команде
> Ctrl+O выполнить найденную команду
> Ctrl+G выход из режима поиска
> !! выполнить предыдущую команду
> !vim выполнить последнюю команду, которая начиналась на vim
> !vim:p вывести последнюю команду, которая начиналась на vim
> !n запустить n команду из history

---

⏩ Общие хоткеи

> Ctrl+C завершить команду
> Ctrl+L очистить экран
> Ctrl+S приостановить вывод, остановить прокрутку
> Ctrl+Q возобновить прокрутку
> Ctrl+D закрыть оболочку
> Ctrl+Z приостановить процесс

Привет дорогие друзья. 👋
Сегодня я хочу поговорить о выборе языка для веб-разработки.

Если представить веб-сайт или приложение как ресторан, то:
- Frontend - это обеденный зал, официанты и меню. Это всё, что видит и с чем взаимодействует пользователь.
- Backend — это кухня, склад с продуктами и управляющий. Это скрытая от глаз часть, которая отвечает за:
- Бизнес-логику: Выполнение основных функций приложения (например, обработка платежа, поиск по каталогу).
- Работу с данными: Хранение, извлечение и обновление информации в базах данных.
- Авторизацию и аутентификацию: Проверка прав пользователей.
- Взаимодействие с внешними сервисами: (например, с платежными системами, почтовыми серверами).
- Обеспечение безопасности и производительности.

Короче: Backend - это "мозг" приложения, который работает на сервере и отвечает за всю внутреннюю логику.

Так как с "внешней" стороной веб-разработки я был знаком, решил пощупать "внутреннюю" кухню. И остановился на языке Python (https://www.python.org/).

Что привлекает:
- Что это: Высокоуровневый язык с акцентом на читаемость кода.
- Плюсы:
- Простой и понятный синтаксис
- Огромное количество библиотек и фреймворков (Django, Flask, FastAPI)
- Лидер в Data Science, ML и AI
- Высокая скорость разработки

- Минусы:
- Относительная низкая производительность по сравнению с компилируемыми языками. Для большинства веб-проектов это некритично.
- Глобальная блокировка интерпретатора (GIL) может быть ограничением для CPU-интенсивных задач в многопоточном режиме.

Наверняка, найдётся среди вас, дорогие друзья, тот кто может возразить и спросить: почему же я не выбрал JavaScript?
Можно быть Fullstack-разработчиком, используя один язык (JS на фронтенде и бэкэнде).
Скажу так: всему свое время 😉

✍️ А что бы вы выбрали? Пишите в комментариях 👇

🖥 Выбор ОС для backend‑разработки: LMDE vs Windows + WSL

Backend‑разработчику важно не только владеть фреймворками и базами данных, но и правильно выбрать операционную систему для работы. Сегодня сравним два популярных варианта: LMDE (Linux Mint Debian Edition) и Windows + WSL (Windows Subsystem for Linux).

🌿 LMDE - нативный Linux для разработчика

Плюсы:
- 🔧 Нативная Linux‑среда: Python, Django, SQLAlchemy, Docker - всё работает «из коробки».
- 🌍 Совместимость: большинство серверов в продакшне используют Linux, поэтому окружение максимально приближено к боевому.
- 📦 Пакетный менеджмент: apt и репозитории Debian обеспечивают стабильность и предсказуемость.
- ⚡️ Производительность: меньше накладных расходов, чем у Windows + WSL.

Минусы:
- Требует привыкания, если основной опыт был в Windows.
- Ограниченный доступ к проприетарным инструментам (MS Office, некоторые IDE).

🪟 Windows + WSL - гибридный подход

Плюсы:
- 🖥 Удобство: привычный интерфейс Windows + Linux‑окружение внутри WSL.
- 🔗 Интеграция: VSCode, PyCharm и другие IDE работают в Windows, но запускают код в WSL.
- 🚀 Постепенный переход: можно осваивать Linux без отказа от Windows.

Минусы:
- 🐌 Производительность ниже из‑за дополнительного слоя абстракции.
- 📂 Файловая система работает медленнее при большом числе файлов.
- 🐳 Docker и сетевые сервисы сложнее в настройке, чем на нативном Linux.


🎯 Вывод

- LMDE - лучший выбор для тех, кто хочет работать в максимально приближенном к продакшн окружении, ценит стабильность и производительность.
- Windows + WSL - компромисс для разработчиков, которым нужен Windows для повседневных задач, но при этом важно иметь доступ к Linux‑среде.

P.S.
Я давно и успешно использую конфигурацию с двумя операционными системами на своих компьютерах, где Linux выступает в качестве надежного дополнения к Windows. Сегодня это решение особенно актуально, учитывая, что официальная поддержка и выпуск обновлений для Windows 10 прекращены.
Переход на Windows 11 часто требует значительного обновления аппаратного обеспечения, что не всегда возможно или целесообразно. В этом контексте Linux предлагает отличное преимущество: он эффективно работает даже на старых ПК и при этом продолжает регулярно получать критические обновления безопасности и свежее ПО, продлевая срок службы вашего оборудования и обеспечивая его защиту.
Так что если у Вас есть старый ПК, новый вы не планируете покупать, обращайтесь. Помогу установить Linux в качестве основной или дополнительной системы 😀 ✊

Обходим лимиты Telegram 🚀.

Узнал об ограничении длины поста в бесплатной версии TG :
Только текст - до 4096 символов.
С фото/видео - до 1024 символов.

Чтобы это обойти и писать без ограничений, создаю дополнительно свой блог.

Как теперь будет:
🔹 Длинные материалы - читаем на сайте.
🔹 Идеи и анонсы - здесь, в Telegram.

✅ Посты любой длины на сайте.
✅ В Telegram - краткие анонсы и мысли.
✅ Полный контроль над контентом.

Блог будет доступен по адресу:
https://www.dev-sg.ru

Хороших выходных! ✊

Добро пожаловать в наш блог!
https://dev-sg.ru/
Написал вступительную статью.
https://dev-sg.ru/blog/2025-12-15-dobro-pozhalovat-v-blog-backend-razrabotchika/
Жду ваших комментариев.

P.S. Блог разработан на основе фреймворка Astro. Дизайн блога придумывался по ходу написания кода.✊