Vann Damm

В общем, сам решил вопрос. У cacheable-response можно в параметре cache указать свой экземпляр Keyv, передав в конструктор класса нужный store. Соответственно, если передать туда @keyv/redis, то кеш будет храниться в Redis. При желании можно просто из Redis удалять нужный ключ и все - вот и инвалидация.
Может немного неправильно объяснил, так что вот код моего server.js:

const express = require('express');
const next = require('next');
const redirects = require("./redirects");
const cacheableResponse = require('cacheable-response');
const port = parseInt(process.env.PORT, 10) || 3001;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const KeyvRedis = require('@keyv/redis');
const Keyv = require('keyv');

const handle = app.getRequestHandler();

const keyvRedis = new KeyvRedis('redis://127.0.0.1:6399'); // TODO: Get from dotenv

const ssrCache = cacheableResponse({
    ttl: 1000 * 60 * 120, // 2 hours
    get: async ({ req, res, pagePath, queryParams }) => ({
        data: await app.renderToHTML(req, res, pagePath, queryParams)
    }),
    cache: new Keyv({ store: keyvRedis }),
    send: ({ data, res }) => res.send(data)
});


app.prepare().then(() => {
    const server = express();

    redirects.forEach(({ from, to, type = 301, method = 'get' }) => {
        server[method](from, (req, res) => {
            res.redirect(type, to)
        })
    });

    server.use((req, res, next) => {
        res.append('Set-Cookie', "HttpOnly;Secure;SameSite=Strict");
        next();
    });

    server.get('/posts/:slug', (req, res) => {
        const queryParams = { slug: req.params.slug };
        const pagePath = '/post';
        return ssrCache({
            req,
            res,
            pagePath,
            queryParams
        });
    });

    server.get('/', (req, res) => {
        const pagePath = '/';
        return ssrCache({
            req,
            res,
            pagePath
        });
    });

    server.all('*', (req, res) => {
        //console.dir(req.url);
        return handle(req, res)
    });

    server.listen(port, err => {
        if (err) throw err;
        console.log(`> Ready on http://localhost:${port}`)
    })
});

есть простое правило: больше коммитов, меньше конфликтов.

это не значит, что нужно коммитить каждую минуту. это значит что как только вы написали законченный код, даже если это фрагмент другой задачи, его стоит коммитить.

Да, запускайте ноду под каждый проект и разводите через nginx.
pm2 вам в помощь для запуска и логов.

Лучше фреймворк. Зачем делать то, что уже сделано?

Хреново у вас с гуглом

Нашел ответ в интернетах:

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

From <input id="start" type="number" value=1> – To <input id="end" type="number" value=4>
<button id="button">Click to select</button>

let range = new Range();

    range.setStart(p, start.value);
    range.setEnd(p, end.value);

    // применим выделение, объясняется далее
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(range);

1. mutation observer
2. увидеть в нем addedNodes с фреймом
3. навесить обработчик на контент фрейма как обычно

Никаких "конфликтов" у вас там нет.
Когда вендоры подключены, всё корректно работает. Форма отправляется. Это можно посмотреть в отладчике браузера.

Когда есть вендоры — все скрипты работают. И форма отправляется посредством ajax на mail.php. А тот возвращает ошибку 404. На сайте не предусмотрена обработка ошибок, вот вам и кажется что "ничего не происходит".

Когда вы отключаете вендоры, скрипты ломаются, и уже ничего не перехватывает обработку формы. И форма отправляется по старинке, но уже по другому адресу — order.php который показывает сообщение об успехе.

Кто же вас заставлял создавать кучу однотипных переменных, если для этого существуют массивы? Или, в терминологии sass - мапы.

$colors: {
  1: #333,
  5: #111,
  100: #222,
}

@each $index, $color in $colors {
  #var#{$index} {
    color: $color;
  }
}

useEffect - это хук, который позволяет использовать сайд эффект. В классах его аналогом было использование componentDidMount, componentDidUpdate и componentWillUnmount. В нем можно делать подписки, отправлять запросы управлять анимацией и т. д.

const [data, setData] = useState(null);

useEffect(() => {
  const controller = new AbortController()
  fetchData(controller.signal).then(setData)

  return () => controller.abort()
}, [fetchData, setData])

useCallback и useMemo предназначены для оптимизации. useCallback получает на функцию и массив аргументов, и возвращает одну и туже функцию, до тех пор, пока аргументы не изменились. useMemo отличается тем, что он возвращает не саму функцию, а результат её выполнения. По большому счету они являются взаимозаменямыми.
Таким образом, useMemo используется для сохранения результатов тяжёлых вычислений, например обработка массива.

const data = useMemo(() => array.map(mapper).filter(predicate).reduce(reducer), [array])

А useCallback используется, когда важна постоянность ссылок на функцию. Например, когда мы передаём ссылку в компонент, который использует React.PureComponent или React.memo, или, когда функция используется в качестве аргумента в других хуках

const handler = useCallback(() => {
  // что-то сделать 
}, [])

useEffect(() => {
  handler(value)
  // если не использовать useCallback, эффект будет срабатывать постоянно 
}, [handler, value])

document.querySelectorAll('.quest1').forEach(quest => quest.style.display = 'none');
document.querySelectorAll('.quest2').forEach(quest => quest.style.display = 'none');

Для описанных целей существует плагин autosize.

Способ надёжнее простого dd по ssh:

mkdir /target
mount none -t tmpfs -o size=1G /target/
debootstrap stable /target/ https://deb.debian.org/debian/
echo "Killer_system" > /target/etc/debian_chroot
chroot /target
mount none -t proc /proc/
mount none -t sysfs /sys/
mount none -t devtmpfs /dev/
mount none -t devpts /dev/pts/
apt install openssh-server
echo "Port 11122" >> /etc/ssh/sshd_config
echo "PermitRootLogin yes" >> /etc/ssh/sshd_config
/etc/init.d/ssh start
passwd root

Теперь подключаетесь к ssh, запущенному из озу:
ssh root@<IP> -p 11122
Передёргиваем диск:

echo 1 > /sys/block/sda/device/delete
for i in /sys/class/scsi_host/host?/scan ; do echo "- - -" > $i ; done

Теперь sda станет sdb
dd if=/dev/urandom of=/dev/sdb bs=4096
В конце работы:
echo b > /proc/sysrq-trigger
Это перезапустит сервак, но он конечно уже не загрузится.

В отличии от предыдущего способа, мы 100% сможем дождаться завершения работы dd

Лучше создавать спрайт и добавлять его в документ, а иконки забирать по id.
Компонент на примере Styled Components:

import React from 'react';
import styled from 'styled-components';

const SVG = styled.svg`
  display: inline-block;
  vertical-align: middle;
`;

const Icon = ({ name, ...props }) {
  if (!name) {
    throw new Error('Unknown icon name!');
  }
  return (
    <SVG {...props}>
      <use xlinkHref={`#icon-${name}`} />
    </SVG>
  );
}

export default Icon;

Cтилизованая иконка c разными состояниями:

import React from 'react';
import styled from 'styled-components';
import { Icon } from './components';

const StyledIcon = styled(Icon)`
  fill: ${props => props.state.fill};
`;

const Example = ({ iconState }) => <StyledSVG name="profile" state={iconState} />;

export default Example;

Styled Components, тут лишь для примера. Подобные компоненты легко реализуются и без использования этой библиотеки.

Нашел ответ чисто случайно. Каждый файл тестов запускается в Jest в отдельном контексте VM, поэтому мутация глобальных переменных работает только в рамках файла, поэтому это НЕ проблема, это никак не влияет на тесты вне текущего файла.

Код для Electron.js приложений после билда хранится в asar архиве.
Вы не должны упаковывать свою базу в этот архив.
Базу можно создавать, к примеру, рядом с исполняемым файлом приложения.
Удалите db.sqlite3 из списка files, а в своем приложении укажите следующий путь к базе:
`${process.execPath}/db.sqlite3`

Вся суть таких анимаций - много заранее заготовленных кадров, которые мы по очереди показываем. Чем больше кадров - тем плавнее анимация. Они могут быть в отдельных картинках или по много кадров в одной. На вашем сайте все это еще поделили - каждая часть бутылочки имеет свою последовательность кадров:

Каких-то конкретных преимуществ этого подхода по сравнению с одним кадром на все я не вижу. Использовать ли для этого WebGL? Ну можно. Точно также, как и обычный canvas. Как выводить картинки на него вы легко загуглите, остается только посчитать координаты расположения кадров в картинке (по идее дизайнер должен их там аккуратно по сеточке расставлять) и выводить их по очереди.

P.S.: По идее можно отрендерить видео и вместо ручного переключения кадров проматывать его в разные стороны с разной скоростью в зависимости от скролла. Но на практике что-то не видно, чтобы это массово делали, обычно используют именно отдельные кадры.