Полина Емельянова

https://doka.guide/css/grid-template-areas/?ysclid...

Можно построить свою сетку и по этой сетке разложить блоки, и при адаптиве менять раскладку блоков если нужно
grid-template-areas - строим сетку
grid-template-columns - определяем ширину колонок
grid-template-rows - высоту блоков
gap - отступы

А так вообще макет сделан корректно тут сетка из 8 колонок
2 блока имеют 3 колонки в ширину и 1 блок 2 колонки в ширину
можно сделать 2 класса W-3 и W-2 им прописать ширину и просто добавлять нужный класс к нужному блоку
ширина 1 колонки в процентах 12,5%

Используем clip-path и много-много CSS-переменных

В итоге никак это не победить.
Выход: отказаться от flex в контейнере со скроллом. Я у себя в js сделал проверку на ios с добавлением специального класса контейнеру, и в нем прописал отдельные стили под ios.

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

.image-wrap-selector {
    margin-right: calc( (100vw  -  min( 100vw , var(--container-width) ) ) / -2 )
}

ну и для img

.image-wrap-selector img {
    width: 100%;
}

вроде как то так.
если ошибся надеюсь мысль уловите

Песочница не рабочая.

Если объяснять проблему, то суть в том, что браузер видя display: none, который потом, я полагаю, меняется на display: block(допустим), показывает его без анимации. Если вы добавили что-то вроде opacity: 0 -> opacity: 1, анимации все равно не будет, потому что браузер сначала применит opacity, потом display. Браузер пытается запихнуть все изменения свойств стилей как бы в одну пачку операций.

Решение: сначала делаем display, потом, в следующей операции применяем стили анимации.

Как сделать применение стилей анимации в следующей операции? Один из способов - setTimeout(callback, 0);

Если бы мы пытались находить понятия в родном языке, а не заимствовали без перевода и понимания иностранные, то IT было бы менее загадочной областью. Замените слово "endpoint" в тексте на "точка входа" или "точка взаимодействия".

UPD. Получив пару одобрительных комментариев решил дополнить ответ.
Семантика. "Endpoint" дословно переводится как "конечная точка". По смыслу это похоже на конец верёвки. Хоть мы и можем сказать, что у неё есть начало и конец, мы часто говорим, что верёвка имеет два конца.
Слово "Endpoint" подчёркивает отсутствие иерархии.

В контексте антивирусной защиты под Endpoint понимают любое конечное защищаемое устройство: компьютер, смартфон, ноутбук, сервер и т.д. Говорят "защита конечных точек" (Endpoint Protection).
Провайдеры подразумевают под Endpoint место, докуда нужно провести кабель. Это может быть как квартира в жилом доме, столб, щиток в подъезде или здание предприятия.
В компьютерных сетях есть схожее понятие Socket ("розетка") это пара IP-адрес и порт, по которым будет происходить "общение".

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

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

"Endpoint" же используется для одноранговых сущностей. Например, когда абонент одного оператора связи звонит абоненту другого оператора связи. Представим что звонок происходит с одного стационарного телефона на другой. В таком случае абонент на другом конце будет Endpoint-ом с которым можно связаться, набрав номер телефона (URL). До него есть путь или маршрут: код страны + код города + номер телефона. Но ему можно не только позвонить, но и отправить факс, поэтому перед номером телефона нужно указать и способ (протокол) коммуникации:
Телефон: +7 (495) 123-45-67
Факс: +7 (495) 123-45-68

Скорее всего, вы столкнулись с понятием Endpoint в контексте API/Веб-сервисы. Там Endpoint будет выглядеть как специальная ссылка (URL). Например:
https://api.site.ru/v1/users — Endpoint для получения списка пользователей.
https://api.site.ru/v1/orders — Endpoint для работы с заказами.

Чем отличается Endpoint от любого другого URL в данном случае? Если URL ведёт к статичной HTML-странице — это просто URL. Если он предназначен для программного взаимодействия (API) — это Endpoint. Представьте что есть SIM-карта с номером +7 (123) 456-78-90. Вы привыкли, что обычно при звонке на сотовой телефон отвечает человек и говорит: "Алло!". Но эта SIM-карта стоит в модеме автомобильной сигнализации. И при звонке вы вместо привычного "Алло!" услышите автоответчик с докладом о состоянии автомобиля и предложением нажать "1" для запуска двигателя.

Почему в данном случае используется понятие "Endpoint" а не "сервер"? Сервером можно назвать "site.ru", но https://api.site.ru/v1/users и https://api.site.ru/v1/orders это уже "конечные точки" на нём, "абоненты" к которым вам нужно обращаться с запросами. Или по своим вопросам, если продолжать аналогию с телефонной связью.

А вот пример Endpoint-а для настройки Database Mirroring в SQL Server:
TCP://MYSYSTEM.Adventure-works.MyDomain.com:7022
TCP://MYSYSTEM.Adventure-works.MyDomain.com:7033
Как видите, здесь используется протокол более низкого уровня.

Т.о. Endpoint-ом называется URL, который является точкой входа для взаимодействия с API или сервисом.

Встречаются немного различные интерпретации этого понятия. Например такая. Каждый api-сервис имеет endpoint, к которому и нужно обращаться, например отправлять http-запрос. Обычно это url. Т.о. endpoint - это url. Или такая. url включает в себя маршрут (основная часть адреса сервиса) и endpoint (часть url, которая содержит например имя вызываемого метода). Существует один маршрут и у него несколько эндпоинтов. Т.о. здесь endpoint - это только часть url.

Подключить скрипт

<script src="https://vk.com/js/api/videoplayer.js"></script>

в src iframe обязательно добавить &js_api=1

<iframe src="https://vk.com/video_ext.php?oid=-22822305&id=456241864&hd=2&js_api=1" width="853" height="480" allow="autoplay; encrypted-media; fullscreen; picture-in-picture;" frameborder="0" allowfullscreen ></iframe>

const player = VK.VideoPlayer(document.querySelector('#id iframe'));
player.pause();

Документация vk https://dev.vk.com/ru/widgets/video#%D0%A1%D0%BE%D...

import requests

class YandexAPIClient:
    def __init__(self, api_key):
        self.header = {'Authorization': f'OAuth {api_key}'}
        self.base_url = "https://api-metrika.yandex.ru/stat/v1/data"

    # Запрос для выборки по просмотру страниц
    def fetch_page_views(self, start_date, end_date):
        params = {
            'date1': start_date.strftime('%Y-%m-%d'),
            'date2': end_date.strftime('%Y-%m-%d'),
            'id': id,
            'metrics': 'ym:s:visits, ym:s:users, ym:s:bounceRate, ym:s:pageDepth, ym:s:avgVisitDurationSeconds',
            'dimensions': 'ym:s:startURL',
            'filters': "ym:s:isRobot=='No'",
            'limit': 100000
        }
        response = requests.get(self.base_url, params=params, headers=self.header)
        response.raise_for_status()
        return response.json()

Вот код, которым пользуюсь я
Ссылка на документацию: Тык

я сейчас промучался некоторое количество времени, не понимая, почему observer моментально выводит картинки, а не при скролле.
Оказалось, что так как картинки еще не загружены, они "схлопывались" не имея высоты в самом верху страницы, который, естественно, попадал в видимую часть.
После этого они сразу и загружались)))
Надеюсь это сообщение сэкономит кому-нибудь время и нервы/