Михаил Р.

Outline это контур элемента с внешней его стороны, то есть сразу за border. В отличие от border он никак не влияет на элементы, их ширину и расположение. Ключевое слово inset в свойстве outline: inset 100px green; устанавливает этот контур в виде псевдотрехмерной рамки за счёт осветления правой и нижней границ и затемнения левой и верхней относительно указанного цвета. Ширина 100px, цвет зелёный.

Баг создаёт свойство outline-offset: -125px;, которое задаёт смещение контура. При положительном значении контур будет расширяться во все стороны. А при отрицательном будет сжиматься внутрь элемента.

Спецификация CSS Basic User Interface Module Level 3 в статусе рекомендации говорит о том, что контур элемента со свойством outline-offset при отрицательном значении не должен становиться меньше, чем двукратная вычисляемая ширина контура. То есть если в примере у нас размеры элемента 100x100 пикселей и контур задан у нас шириной 100px, то при outline-offset: -125px; он должен сжаться внутрь элемента на 125px со всех сторон, а спецификация визуально ограничивает сжатие до outline-offset: -50px; (по 50px внутрь с каждой стороны элемента). То есть контур должен просто сойтись вместе со всех сторон, образуя квадрат в нашем случае и насколько больше не ставь отрицательное значение, больше он сжиматься не должен. Но реализация в браузерах не учитывает это поведение и выдаёт непонятные фигуры, если отрицательное значение слишком большое.

https://www.w3.org/TR/css-ui-3/#outline-offset


Поведение при отрицательном outline-offset должно быть как на гифке. Если дальше уменьшать значение, ничего меняться не должно.

Их не пишут, нельзя вот так вот взять и написать yotube.
Во первых не стоит называть такие проекты сайтами. Сайт это просто аккуратно оформленная страничка с данными доступная по протоколу http.
Т.е вордовский документ размещенный в сети интернет это и есть сайт.

А то что вы назвали - vk.com, imhonet, youtube это не сайты.
Это программно аппаратные комплексы.
Т.е нужны сервера, датацентры размещенные в ключевых точках, нужна система обеспечивающая взаимодействие этих серверов.
Это продукт труда множества системных администраторов, программистов, инженеров, электриков, маркетологов, и.т.д..

СВОЙСТВА!!! flex-basis flex-grow и flex-shrink
flex-basis - это та ширина, будем называть так, которая неотъемлима у элемента. Не хотите ее юзать - используйте min-width.
flex-grow - это "жадность" того или иного элемента. Т.е. сколько свободного пространства он съест, по сравнению с соседом (Спека: Определяет, сколько пространства может занимать флекс внутри контейнера. По дефолту = 0). Вспоминаем ФБоксовский способ прижатия футера к низу:
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.content {
flex: 1 0 auto;
}
.footer {
flex: 0 0 auto;
}

и flex-shrink - это то, как будут сжиматься элементы, если места хватать не будет. Антагонист flex-grow. По дефолту = 1, в отличие от flex-grow = 1 (Это ТОЛСТЫЙ намек)
Спека: Устанавливает коэффициент сжатия флексов в контейнере и задаёт, насколько элемент будет уменьшаться по отношению к другим флексам, чтобы разместить все элементы в одну строку

Базис задавать НАДО! если желаете адаптивности, при заданном flex-wrap: wrap;
Спека: Свойство flex-basis определяет основу флекса, которая является начальным размером элемента.
ВОПРОСЫ?!
https://webref.ru/css/flex-basis
https://webref.ru/css/flex-grow
https://webref.ru/css/flex-shrink

Нужны ответы? Берете простеньки макетик, а-ля Бутстрап и верстаете весь!!! на флексах. После 5-й верстки наступит Дзен! ИМХО!

Такая мини CMS уже встроена в Django, называется Flatpages. Можно посмотреть как она устроена — там очень простой код.

А еще лучше использовать Wagtail, на сегодняший день — это лучшая CMS для Django.

Если я правильно понял функционал

class AppException extends Exception {}

class Test{
  public function create(array $data){
    if(empty($data['message'])){
      throw new AppException('Сообщение не может быть пустым');
    }
  }
}

$test = new Test();

try{
  $test->create(array('message' => 'v'));
  // redirect
}catch(AppException $e){
  echo $e->getMessage();
}

Идея в том, что при использовании исключений, никаких ручных проверок делать не надо. Если исключения не было - значит всё нормально. А если было, то код попросту не будет исполнен.

SVG

Самое лучшее решение — отобрать у дизайнера компьютер.
Это я вам как дизайнер говорю.

Кажется, что <pre> будет самым простым вариантом.

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

В npm такое соглашение:
1.0.0 - начальная стабильная версия
1.0.1 - patch release, небольшие исправления, функциональность не меняется
1.1.0 - minor release, добавление новой функциональности, сохраняется поддержка старой функциональности
2.0.0 - major release, новая функциональность, не сохранена поддержка прерыдущих версий

[link]

https://regex101.com/r/sUbQnC/1

Советую приглядываться к youmightnotneedjquery

var cart = {};

function addToCart() {
    var articul = this.dataset.id;
    cart[articul] = 1;
    console.log(cart);
}

document.getElementById('addToCart').addEventListener('click', addToCart);

.css - файл стилей
.min.css - сжатый файл стилей (удалены переносы и пробелы)
.css.map - файл сохраняющий структуру исходного файла (Less, sass, stylus и т.п.) для отладки

Это минифицированная версия CSS. Оригинал чаще всего находится в виде файлов SASS или LESS.
.map - это карта для восстановления отступов и переносов строк, когда вы откроете файл в браузере.

При использовании сжатия трафика Gzip, минификация файлов необязательна, но также ускоряет загрузку.
stackoverflow.com/questions/807119/gzip-versus-minify

Но какая разница? У вас ведь скрипты ещё и с базами данных общаются?
Предположим, написали вы сервис на чистом РНР без фреймворков, а для теста написали аналогичный сервис на Python/Django. Предположим, что на чистом РНР можно получить 10к запросов/сек, а на Django - жалкие 4к. Печаль.

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

Итого: на РНР запрос будет выполняться за 5.0001мс, на Python/Django - за 5.00025мс... Неужели есть какая-то разница?