Переключение между SSH ключами в GitHub

Есть несколько причин следующей ошибки, при попытке подключения к репозиторию в GutHub:

ERROR: Repository not found.
fatal: Could not read from remote repository.

Самые распространенные причины - ключи не добавлены в аккаунт GitHub или неправильно настроены на локальном компьютере. Но я столкнулся с другой ситуацией, и алгоритм решения не был описан в интернете.

У меня было несколько ключей для доступа к разным репоизториям. Как переключаться между SSH ключами?

Если вы не уверены, что у вас установлены SSH ключи, посмотрите эту статью: Настройка SSH ключей для Github

Смена SSH ключей в GitHub

Если у вас несколько ключей, то алгоритм переключения между ними такой

Выведем логи подключения, чтобы убедиться что само подключение выполняется корректно
```
ssh -v git@github.com
```
Нужно будет ввести кодовую фразу
Если есть вот такой ответ, значит подключение удалось, но ключ не подошел
```
You've successfully authenticated, but GitHub does not provide shell access
```
Нужно прописать путь до ваших ключей, например
```
ssh-add ~/.ssh/my-key/mykey
```

Если вы видите ошибку

Could not open a connection to your authentication agent.

Нужно запустить SSH агент
```
eval "$(ssh-agent -s)"
```
В ответ получите (число может быть любое, это не важно)
```
Agent pid 1111
```
Снова повторяем
```
ssh-add ~/.ssh/my-key/mykey
```
Вводим фразу и видим
```
Identy added: ... (your@mail.com)
```

Обрезать фон на фото в Photoshop

Как обрезать фон для маркетплейса (Все Инструменты)

Открываем файл в Photoshop
На панели "Слои" два раза кликнуть на замок, чтобы удалить его
Добавить новый слой и перетащить его вниз под фото
Выбрать инструмент "Заливка", выбрать любой контрастный цвет, которого нет на фото, убедиться, что выбран новый слой и залить его этим цветом, кликнув на рабочую область
Выбрать слой с фото, нажать на маску
Теперь работаем только с маской. По маске нужно рисовать только черным или белым цветом. Под черным цветом фото будет 100% прозрачным и будет виден нижний слой. Поэтому мы сделали нижний слой максимально контрастным, чтобы видеть где остались неудаленные лишние пиксели на фото.
С помощью инструмента "Magic wand" (волшебная палочка) на слое-маске выбираем область вкруг товара, которую нужно удалить, и закрашиваем её с помощью любого инструмента черным цветом. Можно это сделать "Заливкой" или "Кистью". У волшебной палочки есть параметр "допуск" (обычно, на верхней панели). Это значение определяет насколько близкие по цвету пиксели будут входить в выделенную область. Нужно поэкспериментировать с настройками "Сглаживание" и "Смежные пиксели".
Должно получиться примерно так
Если где-то отрезалось лишнее, можно на маске закрасить эту область белой кистью
Для гладких закругляющихся областей удобно использовать инструмент "Перо". Он рисует тонкой синей полосой. Если поставить точку и потянуть, то мы получим кривую Безье. То есть точку, кривую в которой можно менять наклоняя касательную. Если замкнуть контур, то эту область можно выделить, кликнув по ней в окне "Контуры" с помощью
```
Ctrl + Левый клик мышки
```
.
Когда все готово, можно отключить слой с контрастным фоном, сохранить PSD исходник и файл в формате JPG. При сохранении в JPG фон с клеткой станет белым.
В итоге должна получиться такая картинка, готовая к загрузке на Все Инструменты или другой маркетплейс

Убрать автопараграфы из Категории Woocommerce

Мы можем переопределить функцию для вывода описания Категории товаров Woocommerce.

У меня бывают ситуации, когда мне нужно в описании вставить JavaScript код или добавить шорткоды, при этом стандартные фильтры, которые добавляют параграфы и разрывы строк ломают верстку

Ниже приведена функция, которую вы можете вставить в файл functions.php.

Она уберет вставку автопараграфов, позволит добавлять чистый html и JS код в описании категорий товаров Woocommerce и при этом даст возможность использовать шорткоды.


function woocommerce_taxonomy_archive_description() {
  if ( is_product_taxonomy() && 0 === absint( get_query_var( 'paged' ) ) ) {
    $term = get_queried_object();
 
    if ( $term && !empty( $term->description ) ) {

      add_filter( 'term_description_add_shortcode', 'do_shortcode', 11 );
 
      echo '<div class="term-description">' . apply_filters( 'term_description_add_shortcode', $term->description )  . '</div>';
    }
  }
}

Настройка SSH ключей для Github

Рассказываем как добавить SSH ключи для Github

Чтобы была доступна команда git из коммандной строки, нужно установить Git с оф сайта git-scm.com. Вместе с ним установится git bash.

Нужно настроить доступ по SSH к репозиторию. Для этого нужно сгенерировать ключи.

Чтобы проверить установлены ли ключи, в git bash воспользуйтесь командой ls -al ~/.ssh

Если в ответ получите No such file or directory, значит нужно создать ключи.

$ ssh-keygen -t ed25519 -C "your_email@example.com"

Нужно будет ввести фразу пароль

$ eval "$(ssh-agent -s)"

Возвратит что-то типа

Agent pid 1232

Дальше добавляем ключи в ssh-агент, он потребует ввести фразу пароль:

$ ssh-add ~/.ssh/id_ed25519

Копируем в буфер ключ

$ clip < ~/.ssh/id_ed25519.pub

Вставляем их в аккаунт на Гитхабе. Settings - SSH and GPG keys

Подготовка рабочего места Веб-разработчика

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

Google Chrome и плагины

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

Adblock Plus - как он связан с разработкой? Он может блокировать некоторое содержимое на странице, которое не относится к рекламе. Например, в виджете инстаграма, который воводит фото на сайт перестают отображаться картинки. Мы с клиентом быстрее решим проблему, если я это замечу при разработке.
CSS Grid Overlay - можно настроить и наложить свою сетку поверх содержимого страницы. Помогает выравнивать блоки на странице.
ColorPick Eyedropper, либо можно использовать Just Color Picker - это пипетки. Можно кликнуть в любое место на страницу, чтобы узнать код цвета. У обоих есть свои плюсы и минусы
CSSViewer - показывает CSS стили элемента при наведении
Facebook Pixel Helper - Проверяет установку пикселя Facebook`а на сайте
LastPass - хранит пароли к сайтам
LiveReload - использую для перезагрузки страницы в браузере при сохранении файла. Раньше я им пользовался в связке с плагином для Sublime text, а сейчас использую в связке с Gulp.
NoFollow - выделяет ссылки на сайте с атрибутом nofollow. Пригодится тем, кто занимается SEO оптимизацией
PerfectPixel - плагин позволяет загрузить фото макета и наложить его поверх верстки в браузере, чтобы контролировать отклонения
Stylish - позволяет написать стили для любого сайта, которые будут хранится в браузете и их будете видеть только вы. То есть вы можете поменять под себя на любом чужом сайте верстку. Можно сменить цвета, размеры, что угодно, просто дописам CSS код
Tag Assistant Legacy (by Google) - проверяю что подгружается через Google tag менеджер, правильно ли я добавил в него код.
Vue.js devtools - помогает в отладке скриптов на фреймворке Vue JS
Wappalyzer - показывает какие библиотеки и технологии использованы на сайт
Web Developer - позволяет отключать некоторые функции на сайтах. Например, Javascript. Вы можете проверить как будет работать ваш сайт без JS, либо отключить зависший скрипт на стороннем сайте.

Также нужно в Гугл Хроме отключить кэширование файлов. Иначе, при изменении изображений, CSS или JS файлов вы можете не увидеть изменений на сайте. Так как Хром загрузит их из кэша.

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

Отключение кэша к Гугл Хром

Open Server

Если разработка на PHP, то нужен сервер, и, скорее всего, нужна база данных. Для того, чтобы установить все враз я использую Open Server.

Когда то давно я использовал другую сборку под названием Denwer, но сейчас она уже не актуальна.

Пожалуй единственное, что я настраиваю в Open Server, это отправка почты через удаленный SMTP сервер. Это нужно, чтобы тестировать формы обратной связи на сайтах и прочие функции, требующие отправки почты.

Программы для редактирования кода

PhpStorm IDE

Сначала я пользовался только Sublime text (о нем ниже), переход на полноценную IDE был неочевиден. Сперва было не удобно, но в этой IDE скрыт такой мощный функционал, что сейчас уже возврат к Sublime text как к основному редактору уже просто невозможен.

В PhpStorm я устанавливаю бесплатный шрифты JetBrains Mono. Помимо того, что он красивый, он добавляет многие спецсимволы для программистов.

Также я меняю настройки форматирования кода по умолчанию и цветовую схему на Sublime-подобную - monokai.

Из плагинов к Шторму добавляю:

Extra Icons - добавляет иконки для файлов на вкладке проекта
Pug - подсветка синтаксиса Pug
Rainbow Brackets - раскрашивает скобки в разные цвета, чтобы легче было искать какая скобка где закрывается

Sublime text

Он незаменим, когда нужно быстро отредактировать файл не создвавя проект. Просто открываешь и редактируешь. Можно даже файл не создавать. Просто скопировал код, отредактировал, вернул на сайт. В PhpStorm такого нет и к этому я долго не мог привыкнуть.

Плагины, которые я использую в Sublime

Diffy - показывает различия между двумя открытыми вкладками
Emmet - позволяет посать код сокращениями. Если не знаете что это, посмотрите видео Соракса про Emmet. В PhpStorm от встроен по умолчанию.
Expand Selection to Quotes - этого плагина нет в стандартном списке. Он позволяет выделить текст между кавычек. Чтобы установить его, добавьте в список источников репозиторий на ГитХабе https://github.com/kek/sublime-expand-selection-to-quotes. Добавьте в Preferences -> Key Bindings - { "keys": ["ctrl+shift+c"], "command": "expand_selection_to_quotes"}
Pug - поддержка синтаксиса Pug
Sass - поддержка синтаксиса Sass
SublimeCodeIntel - немного приближает функционал к IDE, добавляя автоподстановку (Также автоподстановку добавили в четвертой версии Sublime Text)

Total Commander

Это файловый менеджер. Одна из причин, по которой мне не комфортно работать с макбуком это отсутствие хорошей альтернативы Total commader. Под mac os есть MC (Midnight Commander), но он не дотягивает.

Total Commander может очень многое, например

Подключаться по FTP
Находить отличия в файлах. Удобно, когда нужно синхронизировать локальные файлы с файлами на сервере
Групповое переименование с использованием разных переменных. Можно к именам файлов добавить счетчик или постфикс.
Всевозможные операции с архивами
Можно выполнить консолькую команду в текущей директории или открыть коммандкую строку
Искать текст внутри файлов (Например когда нужно найти где объявлена функция или css правило), в том числе внутри файлов MS Office.
Менять права на чтение/редактирование файлов на сервере

GitHub

Это система контроля версий. Чтобы была доступна команда git из коммандной строки, нужно установить Git с оф сайта git-scm.com. Вместе с ним установится git bash.

Читайте статью как сгенерировать SSH ключи и подключиться к GitHub по SSH.

Node JS и Gulp JS

Для того, чтобы установить Gulp, нужно установить Node js. Node - это JavaScript сервер на основе движка Гугл хрома V8. Скачать можно на сайте nodejs.org

Для сборки проектов использую Gulp 4. Набор пакетов меняется от сборки к сборке в зависимости от потребностей. Но он примерно такой:

gulp
gulp-autoprefixer
gulp-clean-css
gulp-concat
gulp-livereload
gulp-pug
gulp-sass
gulp-sourcemaps
gulp-uglify-es

Из пакета Adobe использую

Photoshop
Illustrator

Webpack

По сути, webpack это сборщик модулей для JavaScript приложений. Когда webpack собирает ваше приложение, он буквально строит дерево зависимостей, в которых нуждается каждый модуль, и генерирует один или несколько бандлов.

Начиная с версии 4 webpack не требует наличия конфигурационного файла для сборки проекта. Тем не менее он очень гибко настраивается.

Для начала вам необходимо понять базовые концепции

Entry
Output
Loaders (Загрузчики)
Plugins (Плагины)
Mode
Browser Compatibility (Совместимость с браузерами)

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

Точка входа

Точка входа показывает какой модуль webpack должен использовать первым для построения внутреннего дерева зависимостей. Webpack выяснит от каких других модулей и баблиотек зависит эта точка входа (напрямую или косвенно).

По умолчанию это значение ./src/index.js, но вы можете установить другое значение в настройках, например

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js'
};

Вывод

Вывод сообщает webpack место куда будет сохранен бандл и имя бандла. По умолчанию это ./dist/main.js.

Вы можете это настроить в поле output.

webpack.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

В этом примере мы использовали свойства output.filename и output.path чтобы сообщить webpack место и имя результирующего файла.

Возможно, вы обратили внимание, что модуль path импортируется в первой строке. Это основной модуль Node.js для управления путями файлов.

Загрузчики (loaders)

Из коробки webpack понимает только JavaScript и JSON файлы. Загрузчики позволяют webpack обрабатывать другие типы файлов и конвертировать их в модули, которые могут быть загружены в ваше приложение и добавилены в дерево зависимостей.

Обратите внимание, что возможность импорта любого типа модулей, таких как css-файлы, это функция характерная для webpack и не поддерживается другими сборщками или таск-ранерами. Это оправдано, поскольку позволяет разработчикам строить более точное дерево зависимостей.

В общем случае, загрузчики имеют два свойства в конфигурационном файле:

webpack.config.js

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

Конфигурация выше определяет свойство "правила" (rules) для единственного модуля с двумя обязательными свойствами test и use. Они говорят webpack компилятору следующее:

"Когда ты проходя через path встречаешь файл с расширением '.text' внутри выражения require()/import, используй raw-loader для преобразования прежде чем добавить в бандл".

Обратите внимание, что регулярные выражения для шаблонов поиска файлов не оборачиваются в кавычки, например, /.txt$/ это не тоже самое, что и '/.txt$/' или "/.txt$/". Первый вариант дает webpack инструкцию искать файлы оканчивающиеся на txt, а другие искать файлы по абсолютному пути '.txt', это скорее всего не то, что вы ожидаете.

Что нового в Bootstrap 5

Зависимости

Отказ от jQuery
Переход с Popper v1 на Popper v2

Переход на Dart Sass
Перенос документации с Jekyl на Hugo

Прекращение поддержки браузеров

Internet Explorer 10 and 11
Microsoft Edge < 16 (Legacy Edge)
Firefox < 60
Safari < 12
iOS Safari < 12
Chrome < 60

Сетка

Добавлен новый брейкпоинт xxl для размеров экранов на 1400px и более.
Отступы между колонок теперь задаются в rem (1.5rem или примерно 24px, вместо 30px). Теперь:
- Появились новые классы .g-*, .gx-* и .gy-*, чтобы задавать вертикальные/горизонтальные отступы.
- Вместо .no-gutters теперь .g-0
У колонок больше не задан по умолчанию position: relative, поэтому если нужно вернуть такое поведение, то воспользуйтесь классом .position-relative
Удалены некоторые классы .order-*, которые редко использовались. Остались только классы с .order-1 до .order-5.
Удален компонент .media
box-sizing: border-box теперь используется только в bootstrap-grid.css, вместо глобального.

Контент

Добавлены два новых размера для заголовков .display-5 и .display-6
Ссылки подчеркиваются по умолчанию (не только при наведении), если не являются частью определенных компонентов
Переработан дизайн таблиц. К тегу table можно применять классы цвета бордера table.table.table-bordered.border-primary
Вложенные таблицы больше не наследуют стили
Удалены классы .thead-light и .thead-dark в пользу классов .table-*, которые можно применять ко всем элементам таблицы (thead, tbody, tfoot, tr, th, td)
Удален класс .pre-scrollable
Удален класс .text-justify
Для списков <ul> и <ol> стандартный браузерный padding-left сброшен с 40px на 2rem

Формы

Добавлены плавающие label
.custom-* стили объединены с обычными
- .custom-check теперь .form-check
- .custom-check.custom-switch теперь .form-check.form-switch
- .custom-select теперь .form-select
- .custom-file и .form-file заменены на стили выше в .form-control
- .custom-range теперь .form-range
- Удален класс .form-control-file и .form-control-range
Удалены .input-group-append и .input-group-prepend
Удалены классы форм для сетки. Используйте обычные классы сетки вместо .form-group, .form-row, .form-inline
label в формах теперь требует наличия класса .form-label
.form-text больше не задает свойство display
Иконки валидации больше не применяются к <select> с классом multiple

Accordion

Добавлен новый компонент

Alerts

В примерах теперь используются иконки

Badges

Используйте классы свойств background вместо .badge-* (например, .bg-primary вместо .badge-primary)
Используйте .rounded-pill вместо .badge-pill—use
Удалены состояния hover и focus для бейджей внутри ссылок и кнопок
Увеличены стандартные отступы padding для бейджей с .25em/.5em на .35em/.65em

Хлебные крошки

Упрощено стандарнтое представление хлебных крошек. Удалены стили padding, background-color, border-radius
Добавлено новое кастомное свойство CSS - --bs-breadcrumb-divider для изменения без компиляции CSS.

Кнопки

Toggle кнопки, включая checkboxes или radio. Больше не требуют JavaScript и получили новую разметку.
Удален класс .btn-block из утилит. Если требуется, то оборачивайте кнопки в .d-grid и .gap-*.
Обновлены стили для более контрастных состояний hover и active
Отключенные кнопки теперь получили свойство pointer-events: none;

Card

Удален класс .card-deck. Оберните карточку в класс колонок и добавьте родительский .row-cols-* контейнер для создания серий карт.
Удален класс .card-columns

Слайдеры (Carousel)

Добавлен .carousel-dark вариант с темными текстом и индикаторами

ASUS RTX 3060 Ti TUF Gaming

Мы уже слышали, что ASUS готовит TUF Gaming модель RTX 3060 Ti, но теперь смогли получить фотографии этой карты. В целом дизайн кулера идентичен RTX 3070 TUF Gaming. Радиатор идентичен, и карта, использует ту же конструкцию печатной платы.

RTX 3070 и RTX 3060 Ti используют одинаковый графический чип GA104. Но мощность 3070 - 220 Вт, а 3060 Ti - 200 Вт. Поэтому были внесены конструктивные изменения в компоненты подачи питания. Мы можем увидеть их, посмотрев на расположение конденсаторов на задней панели. Важный момент, в отличие от RTX 3070 TUF с двумя разъемами для подключения питания, версия RTX 3060 Ti будет иметь единственный 8-контактный разъем. В конструкции системы охлаждения сохранена компоновка с тремя кулерами и толщиной 2,5 слота.

NVIDIA официально представит свою модель GeForce RTX 3060 Ti 2 декабря 2020 года. RTX 3060 Ti TUF GAMING OC (overclocking вариант) должен стоить немного выше рекомендованной NVIDIA розничной цены, которая, как ожидается, составит 399$. С другой стороны, TUF non-OC может быть ближе к этой цене.

ASUS GeForce RTX 3060 Ti TUF Gaming OC, Source: VideoCardz

Фото упаковки этой модели, которые утекли в сеть на прошлой неделе:

ASUS GeForce RTX 3060 Ti TUF Gaming OC packaging, Source: PC Master Race Facebook

Разница между Джуниором, Мидлом и Сеньором

Перевод статьи Amando Abreu на Medium

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

Вы не джуниор, если:

Вы единственный разработчик в компании;
Вы елинственный разтаботчик на проекте;
Вас не обучает более опытный разработчик.

В реальности, вы не можете оставаться джуниором более 6 месяцев. Если вы знаете как использовать Git и задеплоить проект - вы уже не джуниор.

Разница между Джуниором, Мидлом и Сеньором

Это дискуссионная тема. Что делает вас сеньором?

Должны ли вы владеть всеми языками от Фортрана до Котлина?
Должна ли у вас быть борода?
Должно ли это быть указано в вашем контракте?
У вас должно быть не менее 20 футболок с профильных конференций?

В реальности это сочетание зрелости и знаний

Давайте определим что такое зрелость:

В психологии зрелость - это способность адекватно реагировать на окружающую среду.

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

Эффект Даннинга-Крюгера

Различия в уровнях

Небольшая разбивка как каждый уровень видит мир.

Джуниоры

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

Мидлы

Мидлы на 100% уверены, что то, что они читали на прошлой неделе это абсолютно верный выбор и надо все переписать прямо сейчас. Технический знания обычно очень высокие, но могут быть оторваны от потребностей бизнеса и приводить к накоплению нерешенных технических вопросов.

Сеньоры

Знает, что он не знает, и собирает отзывы со всех уровней бизнеса, прежде чем принять решение, и, возможно, даже переопределить проблему.

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

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

Если у вас высокий уровень технических знаний, то в ту минуту, когда вы понимаете, что многого не знаете - из других частей бизнеса - вы начинаете переход от Мидла в Сеньору. Именно здесь синдром самозванца ударит сильнее, чем когда-либо прежде.

Нет развития

Это то, что я слышу чаще всего и лично чувствую больше всего:

Я перестал развиваться

Во многих компаниях легко остановиться в прогрессе.

Если вы чувствуете, что вам нужно сменить работу, начните с себя:

Если вы не чувствуете достаточных технических знаний, изучайте сами! Спросите себя, каких знаний вам не хватает и вперед учиться. Либо спросите коллегу, либо возьмите книгу;
Учитесь продавать и вести переговоры - вам это будет нужно всю жизнь, от собеседования до продвижения по службе;
Учитесь общаться и быть напористым.

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

Шпаргалка по регулярным выражениям

Многие пользовались поиском файлов в своей операционной системе. Например, "*.txt", где * это любая последовательность символов, а ? - это один произвольный символ. Так вот. Это не регулярные выражения. Подобные выражения называются файловыми глобами или Групповыми символами (wildcards).

Дальше про регулярные выражения

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

Начало и конец строки

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

^ - начало строки. ^Отчет - найдет все строки, начинающиеся со слова "Отчет"
$ - конец строки. txt$ - найдет все строки заканчивающиеся на "txt"

Специфика заключается в том, что они совпадают с определенной позицией в строке, а не с символами текста.

Выражение ^$ совпадет с пустой строкой.

Символьный класс [...]

Символьный класс [квадратные скобки] - это очень важное понятие. Потому что одни и те же символы могут обозначать совершенно разные вещи внутри него и снаружи. Например, точка "." за пределами символьного класса является метасимволом и обозначает любой литерал. А внутри скобок [.] воспринимается буквально и будет совпадать с точкой.

[...] - в квадратных скобках можно перечислить символы, которые могут находиться в данной позиции.

Выражение [e] - совпадает с буквой "е", а выражение [ea] - совпадет с любой из этих букв.

Дефис внутри символьного класса

Внутри символьного класса дефис - это интервал. Например, [0123456789] = [0-9]

Выбрать все html-теги заголовков можно конструкцией <H[1-6]>.

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

Инвертированный символьный класс

[^..] - класс совпадет с любыми символами, не входящими в него. Внутри символьного класса "^" имеет уже другой смысл.

[^1-6] - совпадет с любыми символами не принадлежащими интервалу 1-6.

Выбор нескольких альтернатив

| - означает "или". Например, Bob|Robert. Используется как метасимвол вне символьного класса. То есть внутри [|] он будет воспринят буквально, как поиск вертикальной черты.

Подвыражения, объединенные таким способом называются альтернативами.

Конструкцию выбора можно отделять от остального выражения круглыми скобками, то есть gray|grey = gr(a|e)y.

Экранирование

Если нужно, чтобы метасимвол воспринимался буквально, нужно поставить перед ним слеш \

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

Аналогично слеш превращает некоторые литералы в метасимволы. Например, \t - знак табуляции.

Метасимволы и квантификаторы

Квантификаторы определяют количество экземпляров элемента после которого стоят.

Метасимвол	Обозначение	Пример
. (точка)	заменяет любой символ (кроме переноса строки)
? (знак вопроса)	предшествующий ему символ является не обязательным	`(July\|Jul)` = `(July?)`
+ (плюс)	предшествующий символ встречается один или несколько раз
* (звездочка)	предш. символ встречается любое количество раз, в том числе 0 раз
{min, max}	количество совпадений от min до max	`[a-zA-Zа-яА-Я]{3,12}` - букв должно быть не менее 3, но и не более 12
{0,1}	Эквивалентно метасимволу `?`
{1,}	Эквивалентно метасимволу `+`
{0,}	Эквивалентно метасимволу `*`
( ) круглые скобки	Применяются для группировки, сохранения совпавшего текста или ограничения конструкций выбора
\t	Табуляция
\n	Перенос строки
\r	Возврат каретки
\s	Любой пропуск. Объединяет в себе пробелы, табуляции, перенос строки, возврат каретки
\S	Все, что не относится к \s
\b	Граница слова. После него должны следовать словесные символы и тогда это начало слова. Либо перед ним должны стоять словесные символы и тогда это конец слова.
\w	Любая цифра, буква или знак подчеркивания	[a-zA-Zа-яА-Я0-9_]
\W	Все, что не относится к \w
\d	Цифры	[0-9]
\D	все, что не относится к \d	[^0-9]

Обратные ссылки

Позволяют искать текст, который совпал с предыдущей частью выражения.

Например, нам нужно найти повторяющееся слово в тектсе. \b([a-zA-Z]+) \1 - здесь метасимвол \1 будет ссылкой на подвыражение в скобках. Сначала мы ищем начало слова, за ним будут следовать одна или несколько букв, затем пробел и потом эта же последовательность букв.

Кажой паре скобок будет соответствовать номер \1 \2 \3 ....

Пары скобок нумеруются в соответствии с порядковым номером открывающейся скобки слева направо. Поэтому можно вкладывать скобки друг в друга.

Несохраняющие круглые скобки

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

Когда мы ссылаемся на скобки, удобно отделить остальные пары скобок не предназначенные для ссылок.

Для этого существует конструкция (?: ). Это обеспечивает группировку без сохранения. То есть этим скобкам не будет присвоен номер.

Не будут участвовать в нумеровании ссылок. При присвоении \1 \2 \3 эти скобки можно не учитывать
Увеличат производительность, особенно в больших циклах.
Используются для наглядности.