Как сделать красивую консоль в Mac и Linux
- 9 апреля 2015
Если у вас OS X, поставьте iTerm2, он лучше стандартного Terminal.app. Если у вас Linux, то у вас наверняка уже есть неплохой терминал, или вы можете самостоятельно поставить любой, который вам нравится. Я вот люблю Sakura. Ещё я обычно меняю цветовую схему. Стандартные чёрные мне не очень нравятся, есть крутая схема Solarized. Как её устанавливать тоже зависит от вашего терминала.
Теперь настроим непосредственно шелл. Шелл — это оболочка, в которой выполняются команды. Он показывает вам так называемое приглашение, оно обычно состоит из имени пользователя, имени компьютера и пути к тому месту, где вы сейчас находитесь. И выполняет команды, которые вы в него вводите. Стандартный шелл выглядит так:
Скучновато, правда? Первое, что мы сделаем — сменим оболочку с bash на zsh. Bash — это стандартная оболочка, которая поставляется в комплекте большинства систем. Zsh — это более современная оболочка со множеством плюшек. По сравнению с bash улучшены автодополнение, алиасы, хоткеи. Всё, что может bash, zsh может тоже, так что не вижу причин не переходить. У пользователей OS X zsh уже есть на компьютере, а пользователям Linux, скорее всего, нужно его установить. В Ubuntu и Debian это делается просто:
Пользователи остальных систем наверняка справятся с установкой. Теперь нужно сделать, чтобы zsh был вашей оболочкой по умолчанию, то есть использовался каждый раз, когда вы открываете терминал. Для этого есть команда chsh
(change shell):
У вас спросят пароль администратора. По мере ввода на экране ничего изменяться не будет, просто напечатайте ваш пароль и нажмите Enter. Появится сообщение о том, что ваш шелл изменён:
Теперь нужно выйти из системы и снова зайти. Когда вы откроете терминал, увидите приветственное сообщение zsh. Он предлагает вам ничего не делать, записать в свои настройки только комментарии, чтобы это сообщение не появлялось в следующий раз или пойти в меню настройки:
Мы, ничего не делая, выйдем (нажмём q), потому что знаем секрет. Секрет в том, что не нужно писать длинный конфиг, если вы новый пользователь: частые проблемы и хотелки уже решили другие, и родилась такая замечательная штука — Oh My ZSH. Это набор плагинов и настроек, которые решают самые популярные задачи и делают ваш шелл просто офигенным. Установим его, следуя инструкциям с официального сайта:
curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh
Установка прошла, но ничего не поменялось? Надо закрыть терминал и снова открыть его, чтобы настройки, которые приехали к нам из oh-my-zsh, прочитались и применились. Закрыли-открыли, теперь видим новое приветствие:
Это стандартная тема oh-my-zsh под названием robbyrussell (по имени автора). Мы можем поставить любую из тем, которые поставляются с oh-my-zsh. Я, например, использую Bureau, когда-то я её писала, потому что не нашла подходящей. Чтобы поменять тему, напишите её название (маленькими буквами, как на странице со списком тем) в файле .zshrc
. Он лежит в вашей домашней папке (/Users/Ваш_логин
или /home/ваш_логин
). Поскольку он начинается с точки, он скрыт. Включите отображение скрытых файлов. Тему нужно прописать в переменную ZSH_THEME
, это в районе восьмой строки, вот так:
Сохраните файл и снова перезапустите терминал (или откройте в нём новую вкладку). Теперь шелл выглядит по-новому:
Это тема Bureau. В верхней строчке сначала имя пользователя, потом имя машины, потом путь к папке, где пользователь сейчас находится. Справа текущее время. В следующей строке просто символы, которые обозначают, что ввод здесь, а справа после шестиугольника текущая версия Node. js, ветка Git (если пользователь сейчас в Git-репозитории), и кружочки, которые обозначают, что есть несохранённые изменения. В этой теме версия Node. js показывается только если вы используете Node Version Manager.
А это тема Лёши, можете её взять из GitHub и сохранить в папке ~/.oh-my-zsh/themes
, или установить простой командой:
curl https://gist.githubusercontent.com/meritt/53dcaf7f8f5ecaa62b2b/raw/ec63d857f9ad565011047ab5b486d159ddf0e2ef/meritt.zsh-theme -o ~/.oh-my-zsh/themes/meritt.zsh-theme
Не забудьте прописать тему meritt
в вашем файле .zshrc
.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Figma Dev Mode становится платным. Всё пропало?
Если вы всё пропустили, то на днях в Фигме появилась такая плашка:
Коротко: Dev Mode, скоро выходит из бета-версии и станет платным. Dev Mode — это тот новый режим, который умеет удобно сразу показывать весь нужный CSS и свойства в одном месте. Мы уже рассказывали о нём в «Доктайпе».
Но прошло полгода и лавочка закрылась. Отвечаем на самые распространенные вопросы, которые могли у вас появиться (потому что они появились и у нас).
- 30 января 2024
Dev Mode в Figma. Быстрый обзор бета-версии
Если вы читаете эту статью, Dev Mode в Figma наконец-то вышел в открытую бету. Быстренько рассказываем, что это такое, и как его включить и настроить.
Раньше верстальщикам была доступна только вкладка Inspect с базовой информацией о стилях конкретного элемента.
Некоторые разработчики не рекомендовали копировать стили оттуда, потому что всегда это работало с нюансами. Пока сложно сказать, насколько стили стали точнее, но работать стало определённо удобнее. Сами Adobe называют Figma новым пространством для разработчиков, с возможностями, которые помогают быстрее переводить дизайн в код. Давайте проверим.
- 10 августа 2023
Горячие клавиши Figma для быстрой работы
Figma — это инструмент для создания дизайна, который очень любят веб-разработчики. Одна из причин, почему Figma так популярна — это горячие клавиши. Они помогают работать быстрее и проще. Давайте рассмотрим самые важные из них.
Скрыть или показать интерфейс Фигмы (Ctrl + \ или ⌘ + \ для Mac)
Эта комбинация клавиш позволяет вам быстро убрать все лишнее с экрана, чтобы вы могли сосредоточиться на своем дизайне. Или, наоборот, показать все элементы интерфейса, если вам нужно что-то найти или изменить.
Быстрый поиск по меню (Ctrl + / или ⌘ + / для Mac)
Эта комбинация клавиш открывает поиск по меню. Это очень удобно, когда вы знаете, что вам нужно, но не помните, где это находится. Просто начните вводить то, что вы ищете, и Figma покажет вам нужный пункт меню. Если пользуетесь Spotlight или PowerToys, вам будет очень удобно.
А если не пользуетесь — попробуйте.
- 7 августа 2023
Старт в Figma для верстальщика
Figma — это онлайн-редактор графики для дизайнеров интерфейсов и веб-разработчиков. Это удобная, бесплатная альтернатива Photoshop.
Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.
- 2 августа 2023
Инструменты для работы со шрифтами
Работа со шрифтами и типографикой — важная часть вёрстки текста. Новые шрифты появляются очень часто, за этим сложно уследить. Существует множество инструментов, которые помогают находить нужные шрифты, управлять ими и улучшать внешний вид текста.
Рассмотрим несколько инструментов для работы со шрифтами, которые будут полезны при создании сайта.
- 29 июня 2023
10 горячих клавиш VS Code, которые ускорят вашу работу
Горячие клавиши — добро, польза и экономия времени. Давайте разберёмся, как с их помощью упростить себе жизнь в Visual Studio Code.
- 13 июня 2023
10 лучших тем для VS Code
VS Code — популярный редактор кода со множеством полезных инструментов. Сегодня мы поделимся с вами 10 темами, чтобы работать стало ещё приятнее. Выбирайте на свой вкус и цвет.
- 11 июня 2023
10 полезных плагинов VS Code для вёрстки
Visual Studio Code — один из самых популярных редакторов кода. Его удобно использовать, и у него есть множество полезных расширений, с помощью которых легко оптимизировать работу. Такие плагины помогают допускать меньше ошибок при написании кода, да и значительно сокращают время работы.
Чтобы установить расширения, перейдите во вкладку «Extensions» и в поиске найдите подходящие плагины.
- 9 июня 2023
17 полезных плагинов JavaScript в VS Code
Редактор кода Visual Studio Code помогает быстрее писать код, например, он подчёркивает ошибки красным цветом и показывает подсказки. Но работу можно сделать ещё приятнее, если установить нужное расширение.
Плагинов VS Code много. Здесь мы расскажем об одних из самых популярных — они пригодятся при работе с JavaScript.
- 6 июня 2023
Подборка микроанимаций для фронтенда с CodePen в 2023
⭐ Микроанимация — короткое взаимодействие, которое помогает пользователю лучше сориентироваться в интерфейсе и почувствовать совершенное действие.
Например, нажатие на кнопку лайка в социальных сетях или изменение фона, индикатор загрузки, и многое другое. Микроанимация используется везде, где есть интерфейс пользователя, а именно, веб-сайтах, мобильных приложениях, играх. На примерах с CodePen покажем, какими они бывают.
- 12 апреля 2023