• Как можно обновить head в next.js?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Я бы использовал существующий компонент Head, вместе с контекстом и состоянием, а так же кастомный HeadProvider:
    // _app.js
    import {HeadProvider} from './HeadProvider';
    
    function App({Component, pageProps}) {
        return (
            <HeadProvider>
                <Component {...pageProps} />
            </HeadProvider>
        );
    }

    // HeadProvider.js
    import React, {createContext, useContext, useState} from 'react';
    
    const HeadContext = createContext();
    export const useHead = () => useContext(HeadContext);
    
    export function HeadProvider({children}) {
        const [headData, setHeadData] = useState({
            title: 'Init title',
            description: 'Init description',
            keywords: 'Init keywords'
        });
    
        return (
            <HeadContext.Provider value={{headData, setHeadData}}>
                {children}
            </HeadContext.Provider>
        );
    }

    // MyBestHead.js
    import Head from 'next/head';
    import {useHead} from './HeadProvider';
    
    export function MyBestHead() {
        const {headData} = useHead();
    
        return (
            <Head>
                <title>{headData.title}</title>
                <meta name="description" content={headData.description}/>
                {/* more head items */}
            </Head>
        );
    }

    // MyComponent.js
    import React, {useCallback} from 'react';
    import {useHead} from './HeadProvider';
    
    export function MyComponent() {
        const {setHeadData} = useHead();
    
        const handleClick = useCallback(() => {
            setHeadData({
                title: 'New title',
                description: 'New description',
                keywords: 'New keywords'
            });
        }, [setHeadData]);
    
        return (
            <button onClick={handleClick}>Update Head Data</button>
        );
    }
    Ответ написан
    1 комментарий
  • Как проверить объект на присутствие неизвестного ключа?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    function isPermittedObject(obj) {
      if (!obj) return false;
      
      const permitted = new Set(["v", "c", "g"]);
      let max = 1;
    
      for (const key in obj)
        if (!permitted.has(key) || !max--) 
          return false;
      return true;
    }
    
    console.log(!isPermittedObject({
      v: 1,
      c: 3,
      g: 5
    }))
    
    console.log(!isPermittedObject({
      v: 1
    }))
    Ответ написан
    Комментировать
  • Как проверить объект на присутствие неизвестного ключа?

    @StockholmSyndrome
    const valid = (obj, allowedKeys) => (v => v.length === 1 && allowedKeys.includes(v[0]))(Object.keys(obj))
    Ответ написан
    Комментировать
  • Как в моем случае правильно обработать статику в Nginx?

    @dodo512
    Полный путь к файлу формируется из значения root и строки в try_files.
    Если root /var/www/staticHandle, то в try_files нужно передать "/../static/photos/image.jpg".
    В $uri уже есть "/photos/image.jpg" осталось добавить "/../static".

    try_files $imgdir/$imgfile /../static$uri /../static1$uri /../static2$uri /../static3$uri @image;
    Ответ написан
    Комментировать
  • Почему такая долгая загрузка в Яндекс Диск?

    @Maxim_Q
    Яндекс специально ограничивает скорость и вставляет палки в колеса при использовании Яндекс Диска по webdav, это уже разбирали тысячу раз и все матюкались на это дело. Янедексу не выгодно чтобы вы напрямую подключались к диску, т.к. за вами нельзя шпионить через их приложения.
    Это никак не исправить и никак на это не повлиять, проблема не у вас, а у Яндекса и он это решать не будет.
    Ответ написан
    Комментировать
  • Как по проще сделать редирект к большому списку URL?

    ky0
    @ky0 Куратор тега Nginx
    Миллиардер, филантроп, патологический лгун
    В любом случае будет простыня. Можно сделать через map - и унести простыню в отдельный конфиг.
    Ответ написан
    Комментировать
  • Можно ли в css сделать сквозную кнопку?

    szQocks
    @szQocks
    pointer-events: none;
    Ответ написан
    Комментировать
  • Почему теряется интервал (Next.js)?

    szQocks
    @szQocks
    при изменении зависимостей, создаётся новая функция в useCallback, в котором создаётся ссылка на новый интервал, ссылка на старый интервал - потеряна

    если переменную interval заменить на ref, то всё сработает, но лучше бы - логику по интервалу вынести в useEffect, а в handlePlay - менять только флаг стейта
    Ответ написан
    1 комментарий
  • Как убрать дубли с помощью canonical?

    vpetrov
    @vpetrov
    частный SEO-специалист, textarget.ru
    Частичные копии - не технические дубли. Поисковая система такой canonical может запросто проигнорировать. Вопрос правильнее решить настройками шаблонизации мета и (или) уникализации контента.
    Кроме того, ситуация может иметь временный характер, тем более - в Яндекс. Он постоянно что-то пересчитывает, закидывает в индекс и выбрасывает - иначе не умеет.
    Ответ написан
    Комментировать
  • Как сделать равномерное слияние многомерного массива?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const flatZip = arrs => arrs
      .reduce((acc, arr) => (
        arr.forEach((n, i) => (acc[i] ??= []).push(n)),
        acc
      ), [])
      .flat();
    
    
    const result = flatZip([
      [ 1, 2, 3, 4 ],
      [ 5, 6, 7, 8 ],
      [ 9, 10, 11 ],
    ]);
    Ответ написан
    Комментировать
  • Как при авторизации через VK API передать дополнительные данные?

    Geminix
    @Geminix
    Фуллстек nuxt, .net разработчик
    из описания API
    state — произвольная строка, которая будет возвращена вместе с результатом авторизации

    не оно?
    Ответ написан
    1 комментарий
  • Как в scss подгружать шрифты для разных языков?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Почитайте про unicode-range, браузер сам разберется.
    Краткая суть такая: если на странице нет символов из указанного диапазона, то шрифт не загружается. Если же есть хоть один символ, то загрузится весь шрифт.

    https://developer.mozilla.org/en-US/docs/Web/CSS/@...
    Ответ написан
    Комментировать
  • Как проверить два объекта по шаблону?

    Stalker_RED
    @Stalker_RED
    Если писать проверку кодом, то все просто
    function check(data) {
    	return Object.hasOwn(data, 'd') && data.m === 1;
    }

    https://jsfiddle.net/wzt492vL/

    Если нужен именно объект с правилами, то записать в него регулярки, например?
    const rule = {
     d: /.+/,
     m: /1/,
    }
    
    function check(data) {
    	let result = true;
      for (const key in rule) {
        if (!Object.hasOwn(data, key)) return false;
        if(!rule[key].test(data[key])) return false;
      }
      return result;
    }
    https://jsfiddle.net/8u46rw3d/
    Ответ написан
    2 комментария
  • Как проверить два объекта по шаблону?

    Enokin
    @Enokin
    Full-stack разработчик
    const template = {
        d: "какие то слова к которым не нужно привязываться, главное что бы был ключ d",
        m: "Числовое целое поле"
    };
    
    function validateAgainstTemplate(obj, template) {
        let keys = Object.keys(obj);
        for (let key of keys) {
            if (!template.hasOwnProperty(key)) return false;  // если в шаблоне нет такого ключа
            if (key === "m" && obj[key] !== 1) return false;  // если значение ключа m не равно 1
        }
        return true;  // если все проверки пройдены
    }
    
    let testObj1 = {
        d: "слово",
        m: 1
    };
    
    let testObj2 = {
        d: "слово",
        m: 23,
        s: "слово 2"
    };
    
    console.log(validateAgainstTemplate(testObj1, template));  // true
    console.log(validateAgainstTemplate(testObj2, template));  // false
    Ответ написан
    1 комментарий
  • Почему показывает что данные контекста пустые, хотя это не так?

    Alexandroppolus
    @Alexandroppolus
    кодир
    Скорее всего, этот твой console.log(like) вызывается до того, как лайчинские загружены. Потому в консоли рисуется Array(0). Далее ты кликаешь на треугольник, но к этому моменту данные уже приходят и потому видны. "Array(0)" не меняется, остаётся как есть.

    Проблема твоего стора Like в том, что это нихрена не стор. Он не уведомляет никого об изменении своих данных. Компоненты не перерисовываются. Проще всего здесь использовать mobx, тогда достаточно будет добавить пару строчек в классе Like. Ну, или какой-то иной стейт-манагер.
    Ответ написан
    2 комментария
  • Как в Next.js изменить url страницы без обновления данных?

    @lolpni
    https://www.abenezerbelachew.com/blog/modal-routin...

    P.S. Такой подход называется Modal Routing
    Ответ написан
    Комментировать
  • Как реализовать ТОП просмотров за день, неделю и месяц?

    saboteur_kiev
    @saboteur_kiev
    software engineer
    В свободное от нагрузки время аггрегировать данные за прошлые периоды.
    Прошел день, за прошлый день посчитал, добавил в отдельную таблицу сумму одной строкой и прошлый день весь можно грохнуть.
    Ответ написан
    Комментировать
  • Как реализовать ТОП просмотров за день, неделю и месяц?

    nokimaro
    @nokimaro
    Меня невозможно остановить, если я смогу начать.
    Не храните каждый просмотр, храните кол-во просмотров каждой страницы за день.
    Так как минимальная группировка это день, то стоит данные так и хранить
    item_id
    date_day
    counter


    если нужно отдельно отсеивать повторные просмотры одного пользователя, то для этого можно завести отдельную таблицу для того чтобы делать проверки перед увеличением счётчика
    item_id + user_id

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

    ещё один трюк который использую для построения топа за день/неделю/месяц это внутри каждого элемента хранить три счётчика для сортировки
    item_id
    counter_1
    counter_7
    counter_30

    Смысл в том что в течении дня эти счётчики увеличиваются при просмотрах независимо от счётчиков с аналитикой
    Раз в сутки делается синхронизация, и для каждого item_id выставляются актуальные значения по сумме из аналитики и дальше снова целый день счётчики накручиваются независимо добавляя актуальные данные за день без необходимости что-то синхронизировать каждый час.
    Ответ написан
    2 комментария
  • Как равномерно заполнить 3 массива с учетом высоты элементов?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Ошибка в том что columnHeight нужно обновлять по тому же индексу, что и columns.
    Ну еще есть проблемы с тем, что исходные данные не упорядочены, а значит массивы будут заполняться не равномерно. Притом сортировать лучше по убыванию.
    Так же, если нужен оригинальный порядок, то его нужно сохранить, а потом так же восстанавливать сортировкой.

    // Сохраняем исходные индексы и сортируем по высоте по убыванию
    const preparedData = data
        .map((e, i) => ({i, e}))
        .sort((a, b) => b.e.height - a.e.height);
    
    for (const el of preparedData) {
        const { height } = el.e;
        // тут никогда не вернет -1, так как мы ищем элемент который точно есть в массиве - минимальный
        const index = columnHeight.indexOf(Math.min(...columnHeight));
        // обновляем данные массивов по выбранному индексу
        columnHeight[index] += height;
        columns[index].push(el);
    }
    
    // нормализуем columns
    for (let i = 0; i < columns.length; ++i) {
        // восстановим исходный порядок, отсортировав по сохраненному индексу по возрастанию
        columns[i].sort((a, b) => a.i - b.i);
        // избавимся от сохраненных индексов, оставив только исходные объекты
        columns[i] = columns[i].map(({ e }) => e);
    }
    Ответ написан
    Комментировать
  • Как определить слово во множественном числе или нет?

    Rsa97
    @Rsa97
    Для правильного вопроса надо знать половину ответа
    Вне контекста никак.
    Вася сидел до́ма.
    Вокруг стояли дома́.
    Ответ написан
    3 комментария