Михаил Р.

Делаю форму регистрации на Next.js, 4 страницы. Хочу ускорить загрузку страниц, но не понимаю, какой рендеринг для этого использовать

Здесь необходимо уточнение, что понимается под "ускорить загрузку", если Вы имеете ввиде именно сборка страницы, то выбирайте пре-рендеринг. Выбирать между SSR и ISR (необходимо страницу заранее сбилдить, либо использовать кеш), SSG (тут итак билд страницы идет заранее, если fallback не равен true).

SSR
ISR
SSG

JS не нужен, все относительно просто:

from selenium import webdriver
import requests
import os

# юзаем хром
driver = webdriver.Chrome()

# ссылка на сайт для примера (может быть временная, поэтому бдим в оба)
driver.get('https://cdndl.zaycev.net/track/24932675/4srdJGcFYp791F9ABjYLyvNgexnUL8z7GFNMQiNEsrSRee43ZHFr7YoijrrsDraGx7sYdrvkXeKCzu8CwmWR5jBtHr5i49hH8LZ21oYQM6NQzzKomzZKtphTL5f6dNqGddRuMCQNeHGHMkY64WvroQwEvattc4FcXXhJFrxecgAwnEuHvUWxonULTacHy2wXrVhQAWGPgeXg7gnxMr5MNQ6wq9k35Lh3Dkrnuac678AgKKFkN4QY9ymyEL5gi7JfiqomuSVTsYDNb4WHrrFk2ixFia5Lq8ZahJmRgCGCPqJ8ny2jykXrQekfAJdC8e9rxL8wUnLMBcpPeGFJyZ1p64U2VptfeY')

# ищем элемент по css селектору
audio_element = driver.find_element_by_css_selector("source[type='audio/mpeg']")

# извлекаем url из элемента
audio_url = audio_element.get_attribute('src')

# качаем файл
response = requests.get(audio_url)
if response.status_code == 200:
    # если файл успешно качнули, то сохраняем в downloads (папка downloads уже должна существовать)
    with open('downloads/audio.mp3', 'wb') as f:
        f.write(response.content)

driver.quit()

CORS заголовки должны быть установлены на сервере, который отвечает на Ваш запрос (в данном случае, Google API), а не на Вашем клиенте. Это механизм безопасности браузеров, и заголовки CORS должны быть установлены на стороне сервера. Если сервер настроен так, чтобы не принимать запросы с Вашего домена или IP-адреса, то на клиенте (в Вашем React-приложении) эту проблему не решить.

Можно поднять свой локальный сервер, например на express.js и использовать его как прокси:

import express from 'express';
import cors from 'cors';
import axios from 'axios';

const app = express();

app.use(cors());

app.get('/getBooks', async (req, res) => {
  try {
    const result = await axios.get('https://www.googleapis.com/books/v1/users/1112223334445556677/bookshelves&key=myKeyApi');
    res.json(result.data);
  } catch (error) {
    console.error(error);
    res.status(500).send(error);
  }
});

app.listen(4000, () => {
  console.log('Proxy server running on http://localhost:4000');
});

Либо попробовать заюзать прокси на клиенте, указав его в package.json:
{"proxy": "https://www.googleapis.com"}

Вероятно, Вы не учли символы > и _, которые также являются частью Вашей строки bytes. Коды этих символов (62 и 95) в десятичной системе и являются теми числами, которые вызывали у Вас вопросы.

data = b'>\x02\xfe\xbf_\xec\xe6\xee\x00R'

for i in range(len(data)):
    hex_repr = '\\x{:02x}'.format(data[i])
    print(i, data[i], f"({hex_repr})")

# 0 62 (\x3e)
# 1 2 (\x02)
# 2 254 (\xfe)
# 3 191 (\xbf)
# 4 95 (\x5f)
# 5 236 (\xec)
# 6 230 (\xe6)
# 7 238 (\xee)
# 8 0 (\x00)
# 9 82 (\x52)

Если Вы хотите, чтобы размеры ячеек были определены исключительно размерами изображений, то гриды не лучший вариант, а вот флексы - да. Для заполнение колонки изображением, использовал object-fit (contain/cover).


Если задача будет еще сложнее, то лучше использовать masonry grid, например https://masonry.desandro.com/ .

Got error selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable: Element is not currently visible and may not be manipulated

Как можно поправить? На экране он виден

Для парсера он не виден, по разным причинам.

Попробуйте так:

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

driver = webdriver.Chrome()
driver.get("example.com")

# находим и кликаем на элемент .SumoSelect
dropdown_container = driver.find_element(By.CSS_SELECTOR, ".SumoSelect")
dropdown_container.click()

# ждем появления элемента li.opt label, но не более 10 сек
option_to_select = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.CSS_SELECTOR, "li.opt label"))
)

# итерируемся по всем option и кликаем, если текст option равен AB
for option in options:
    if "AB" == option.text.strip():
        option.click()
        break
else:
    print("Не удалось найти нужную опцию.")

driver.quit()

Почему когда я указываю большие разбиваемого и количества слогаемых,вылетает ошибка:
print(partition(1024,5))

Превышено количество рекурсивных вызовов в Python.

Можно увеличить глубину рекурсий:

import sys
sys.setrecursionlimit(5000)

Либо, переписать функцию в итеративном стиле:

def partition(n, k):
    stack = [(n, k, [])]
    while stack:
        current_n, current_k, current_partition = stack.pop()
        
        if current_n == 0 and current_k == 0:
            print(" + ".join(map(str, current_partition)))
        elif current_n == 0 or current_k == 0:
            continue
        elif current_n < 0:
            continue
        else:
            for i in range(1, current_n+1):
                new_n = current_n - i
                new_k = current_k - 1
                new_partition = current_partition + [i]
                stack.append((new_n, new_k, new_partition))

partition(5, 3)

breakpoints.scss:

$breakpoint_sm: 300px;
$breakpoint_md: 700px;
$breakpoint_xl: 1000px;

BestComponent.scss:

@import "breakpoints";

@media screen and (max-width: $breakpoint_md) {
  // ...
}

index.scss:

@import "fonts";
@import "breakpoints";

_app.tsx:

import { FC } from "react";
import { AppProps } from "next/app";
import "./styles/index.scss";

const App: FC<AppProps> = ({ Component, pageProps }) => (
  <Component {...pageProps} />
);

export default App;

Если Вы пишите "реактивные" приложения, то я бы рекомендовал уходить от классического css/scss к css-in-js, например используя emotion.js.

Но тут видите, мы все равно подключаем
Dmitrijs Balcers "breakpoints"; в BestComponent, а надо без импорта, сразу

В случае с SCSS переменными, они не могут быть доступны глобально без импорта, как это возможно с CSS переменными, которые определены в :root. Это ограничение SCSS и его способа компиляции в CSS.

Варианты:
- Использовать переменные :root:

:root {
  --breakpoint-sm: 300px;
  --breakpoint-md: 700px;
  --breakpoint-xl: 1000px;
}

@media screen and (max-width: var(--breakpoint-md)) {}

- Использовать sass-loader в webpack для автоматического импорта переменных в каждый файл:

{
  test: /\.scss$/,
  use: [
    "style-loader",
    "css-loader",
    {
      loader: "sass-loader",
      options: {
        additionalData: `@import "path/breakpoints.scss";`
      }
    }
  ]
}

- Использовать css-in-js и не изобретать велосипеды.

Можно ли обойтись без неё

Можно, законом не запрещено.

или же это может хоть и маленьким, но фактором роста?

Да.

UPD:

Так нет, я же не xml карту имел ввиду, а html

Если все Ваши страницы хорошо перелинкованы, то смысла в "html-карте" нет, но xml-карта по прежнему актуальна.

Исходя из тега CSS GRID, и достаточно "не точного тз", ответ будет примерно такой (если я не правильно понял тз, то пример работы колонки "Описание заказа" - подскажет, как работать с другими колонками и рядами):


HTML:

<div class="order">
  <div class="order__item order__item-number">Номер заказа</div>
  <div class="order__item order__item-sum">Сумма</div>
  <div class="order__item order__item-status">Статус заказа</div>
  <div class="order__item order__item-transport">Транспортная компания</div>
  <div class="order__item order__item-description">Описание заказа</div>
  <div class="order__item order__item-buttons">Кнопки</div>
</div>

CSS:

/* desktop */

.order {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two columns */
}

.order__item {
  border: 1px solid black;
  padding: 10px;
}

/* first column */
.order__item-number,
.order__item-sum {
  grid-column: 1;
  background-color: #f2f2f2;
}

/* two column */
.order__item-status,
.order__item-transport,
.order__item-description,
.order__item-buttons {
  grid-column: 2;
  background-color: #e6e6e6;
}

/* modile */

@media (max-width: 768px) {
  .order__item-description {
    grid-column: 1 / span 2; /* span two columns */
    background-color: #d4d4d4;
  }
}

Очистка title у изображений из колонки post_title:

UPDATE wpaq8a_posts SET post_title = '' WHERE post_mime_type = 'image/jpeg';

Если параметры динамически изменяются в зависимости от действий пользователя с интерфейсом (фильтры, пагинация итп.), статическая генерация не лучший вариант. В таком случае, лучше использовать хуки useState и useEffect для хранения и изменения get параметров, и последующего выполнения запроса к API.

Но если прям невтерпеж, то, как вариант:

export const getServerSideProps = async (context) => {
  const page = context.query.page || 1;
  
  try {
    const res = await axios.get(`tracks?page=${page}`);
    return {
      props: {
        tracks: res.data.items,
      },
    }
  } catch (e) {
    return {
      notFound: true,
    }
  }
}

export const getStaticProps = async (context) => {
  const page = context.params.page;
  // code
}