Pavel Karinin

для задания соответствия DNS-имен IP-адресам нужен DNS-сервер. про DNS в микротиках вам уже ответили.
для задания соответствия DNS-имен портам нужен HTTP reverse proxy на хосте, на который указывают данные DNS-записи. например, nginx.

В WinBox зайдите в IP -> DNS -> кнопка "Static" и там задайте соответствие между IP и доменом.

Как вариант:
1) Нарисовать круги инструментом ellipse. Слить их в 1 слой (Ctrl+E). Затем правой кнопкой по слою и Rasterize layer.
2) Обвести девушку - например инструментом polygonal lasso. Выбрать слой с кругами - далее Select-Modify-Feather (указываем насколько px сгладить выделение -круги же растушеваны) и нажать Delete.
3) Ctrl+клик на иконке слоя с кружками (чтобы появилось выделение), потом выбираем девушку и delete.
Сохранить как png.

Bootstrap содержит много лишнего по причине своей универсальности, приспособленности "на любой случай".
После n-ого десятка проектов накопился свой багаж решений. База для форм, кнопок, галерей, комментариев и т. д. Все решения лаконичные, без лишнего мусора и благодаря этому легко масштабируются под новые проекты.
Сетка опять же своя. Была создана однажды и дополнялась/редактировалась от проекта к проекту пока не стала условно идеальной.

var item_unitaz = [
{'item_id':1, 'article':'DE23421312', 'name':'Привет','type':2},
{'item_id':2, 'article':'DE12421442', 'name':'Пока','type':32},
{'item_id':3, 'article':'DE78677833', 'name':'Воробей','type':68},
{'item_id':4, 'article':'DE23442235', 'name':'Петух','type':45}];

function compareUnitaz(a, b) {
     return a.type - b.type;
}
item_unitaz.sort(compareUnitaz)

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

UPD: На примере:
1. Создаешь фигуру, сверху вставляешь изображение prntscr.com/jcxgrj
2. Фигура должна быть под слоем с картинкой, на картинку нажимаешь правой кнопкой -> создать обтравочную маску prntscr.com/jcxh7o
3. Результат: prntscr.com/jcxhd4

Использую vscode+webpack+pug+scss+бэм. Из физических инструментов, основной моник: lg ultrawide 29um69g, рядом прикручен моник от ноутбука повешенный вертикально, подключенный через универсальный скаллер.

0) Запускаю Spotify :-)

1) Произвожу установку всех необходимых модулей для сборки. В моем случае у меня набор конфигураций для webpack (отдельные файлы для pug, scss, static и.т.д., выбираю что нужно).

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

3) Запускаю VS Code, открываю нужную папку.

4) Пишу размету на Pug. Пишу с БЭМ, если встречаю повторяющийся блок, то открываю файл _mixins.pug, в который пишу миксины для повторяющихся блоков, например товаров, пунктов меню, каких-то блоков и.т.д. Pug умеет делать циклы, это ускоряет сильно.

5) Когда HTML готов, начинаю делать каркас. Если дизайн сделан по сетке, определяю контейнеры, колонки, строки в свои классы (не пишу в html тучи классов аля col-md-6, а пишу в SCSS инклуды в нужные мне блоки, типа @include make-col(2) и.т.д.).

6) Экспортирую картинки из Avocode. Очень делается просто, указываю папку и просто кликаю экспорт и ввожу название файла и расширения. Преимущественно для иконок использую svg, если нет svg, то ищу эту иконку в интернете (дизайнеры редко рисуют иконки сами, но зато любят вставлять их не в векторе). Если иконка простая, могу сам ее в inkscape обвести, ну и если нет, то экспортирую png в 2х размере (благо авокод это позволяет, если конечно дизайнер не вставил в исходном маленьком размере). Когда есть контакт с дизайнером, трясу его, ибо растр это плохо для иконок.

7) Пишу стили блоков из страницы. На этом этапе можно на втором монике параллельно смотреть футураму или
Арчера :-) Но чаще на широком монике слева браузер, справа VS Code, а на втором монике Avocode (может меняться местами с браузером). Мысленно нарезаю страницу на блоки. Для каждого блока (БЭМ) создаю отдельный scss файл (кто-то даже для элемента создает, но мне лень), из него сразу выписываю все селекторы. Иногда могу сначала выписать все селекторы со страницы (но так лучше не делать, т.к. во время работы может потребоваться изменить что-то в разметке), но чаще для одного блока выполняю этот пункт и за ним сразу выполняю пункт 8, потом для нового блока опять 7 и 8 и.т.д.

8) Пишу css код вместе с Avocode, у него беру нужные мне параметры (а он уже подставил в них переменные), и вставляю в мой код. И параллельно сверяю со скрином макета используя вот это расширение https://chrome.google.com/webstore/detail/perfectp...

9) Пишу адаптив. Я не могу привыкнуть к методологии mobile-first, поэтому пишу всегда сначала полную версию сайта. Я понимаю, что это чревато всякими проблемами и это типа не модно, но мне норм.

10) Медиа-запросы пишу прямо в блоках, для каждого блока/элемента/модификатора может быть отдельный медиа-запрос. Но для начала определяю breakpoint'ы для разных экранов (чтобы их не было сотни разных), если использую Bootstrap, то беру его breakpoint'ы.

11) Добавляю анимашки. Даже если заказчик не просил отдельно (и если не указал отдельно, что нельзя), он все равно будет доволен, а с animate.css+onscreen.js это вообще работа 10 минут. Сложные анимации обговариваю отдельно, чтобы не сделать ненужную работу.

11) Все снова сверяю, пишу скрипты где надо. Для слайдеров в 99% случаев подходит slick (с доработками конечно, но там хорошее API), для других случаев могу написать свой.

12) Сдаю заказчику и жду ответа сидя на тостере/пикабу.

Это чисто мой опыт, опыт фрилансера, не знаю, как делают другие и не могу на 100% утверждать что это 100% правильный способ. Я так и не смог заставить свой конфиг webpack правильно вставлять спрайты svg.
Надеюсь чем-то поможет мой ответ.

1) Определение инструментов, их настройка
2) Выделение общих/переиспользуемых компонентов
3) Самое сложное - придумывание названий
4) Вёрстка

Что может лучше практиковать навыки чем реальные задачи? Берите макеты и верстайте.

Ну на CSS селекторы есть вот такая штука https://flukeout.github.io/
Есть вот такая крутая штука для флексов www.flexboxdefense.com https://flexboxfroggy.com/#ru https://cssgridgarden.com/#ru

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

Для чего нужен этот тихий ужас? Его больше не будет, как динозавров.

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

Если слои кэша в Concurrent списках, то без разницы, кто его в этот момент читает. Мы для кэша используем Lazy.

Я так понимаю, что данные хоть и будут изменяться, то не часто, иначе нет смысла в кэше. В нашем случае, когда приходят новые данные или мы их обновляем, мы руками вызываем _cache.Layer.Reset()

если в момент чтения того или иного свойства происходит обновление или удаление, то я должен оборачивать в блокировку режима чтения каждое поле/свойство?

Что-то это уже не похоже на кэш. Может быть, когда изменяется объект, то из кэша убирать его _после_ изменения. Тогда последующие потоки получат верный объект. А операции добавления и удаления в ConcurrentDictionary потокобезопасны. Т.е. идея в том чтобы не изменять объект в кэше никогда, а только удалять и добавлять.

Существует смежная проблема: поля в некоторых сущностях являются списками ...

Ну, теже ConcurrentQueue, СoncurrentStack поддерживают GetEnumerable, который делает копию всего списка. Тогда не страшно, что кто-то изменит список.
Тогда можно без сторонних библиотек обойтись. Вообще, сложно что-то сказать конкретно без кода.