Задать вопрос
  • VsCode сломался, как решить?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Запустите vscode без расширений --disable-extensions и без своих настроек --user-data-dir
    Проверяете (можно еще логи посмотреть --upload-logs)
    Если помогло, то включаете по одному расширению и смотрите какое ломает все.
    Не помогло, открываете консоль (dev tools) смотрите ошибки

    Ну или просто переустановите. Благо все настройки в облаке можно сохранить

    ps согласно теме на редит можно еще проверить клавиатуру на залипшие клавиши:
    I have been facing same issue for more than a month. After investigation, culprit turns out to be faulty num lock key on keyboard. It was being pressed repeatedly and continuously by itself.

    Check if this is same case in your issue. YOU can use keyboardTest s/w to detect keystrokes.

    https://www.passmark.com/products/keytest/

    только можно любой другой тестер использовать тык
    Ответ написан
  • Как сделать border со смещением?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Разделите li на два блока: иконку и текст. Для текста задайте бордер:
    Ответ написан
  • Как скрыть форму на js?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Добавьте стили display: none для формы:
    Ответ написан
    Комментировать
  • Как правильно перебрать вложенный массив и вывести результат?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    <?php
    $goods = [
        'ASUS TUF' => ['Игровые ноутбуки', 'Ноутбуки для работы'],
        'ARDOR GAMING NEO' => ['Игровые ноутбуки', 'Ноутбуки для работы'],
        'MSI Katana' => ['Игровые ноутбуки', 'Ноутбуки для работы'],
        'HUAWEI MateBook D 16 2024 MCLF-X' => ['Ноутбуки для работы', 'Ультрабуки'],
        'Samsung Book3 Pro 360 NP960' => ['Ноутбуки для работы', 'Ультрабуки', 'Ноутбуки-трансформеры']
    ];
    
    echo "<ul>";
    foreach ($goods as $name => $categories) {
        echo "<li>$name: " . implode(", ", $categories) . "</li>";
    }
    echo "</ul>";
    ?>
    Ответ написан
    Комментировать
  • Как установить программу Finger Suite на Windows 10?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    0. У Вас написан какой-то scrapper, который использует playwright или puppeteer
    1. Устанавливаете npm i playwright или npm i fingerprint-injector
    2. Добавляете в код:
    const browser = await puppeteer.launch({ headless: false });
    const page = await newInjectedPage(
        browser,
        {
            // constraints for the generated fingerprint
            fingerprintOptions: {
                devices: ['mobile'],
                operatingSystems: ['ios'],
            },
        },
    );

    3. Запускаете
    4. Появилась ошибка - разбираетесь
    5. Не получилось разобраться - пишите сюда еще раз вопрос
    Ответ написан
    Комментировать
  • Умное количество элементов в сетке GRID?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Так?
    .parent {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(calc(100% / 3 - 10px), 1fr));
      gap: 10px; 
    }

    Ответ написан
    1 комментарий
  • Почему браузер не может получить доступ к "/"? 'Cannot GET / '?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Вам надо указать папку со статическими файлами (документация):
    ...
    app.use(express.static(__dirname)) // вот эту строчку добавьте
    app.use(bodyParser.urlencoded({ extended: false }));
    ...


    Если вам локально надо подписать сертификаты, то в терминале (habr):
    openssl genrsa -out localhost-key.pem 2048
    
    openssl req -new -x509 -sha256 -key localhost-key.pem -out localhost.pem -days 365
    Ответ написан
    3 комментария
  • Как создать правильный компонент?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Скорее всего вам будет полезно узнать о Compound components. Что-то такое:
    <List>
      <List.Item>
         <List.Checkbox ...> Some text
      </List.Item>
      <List.Item>
         Some text <List.Checkbox ...> 
      </List.Item>
      <List.Item>
         <List.Dropdown ...>
      </List.Item>
    </List>

    Вот реальный пример из chakra ui:
    import { List } from "@chakra-ui/react"
    import { LuCheckCircle, LuCircleDashed } from "react-icons/lu"
    
    const Demo = () => {
      return (
        <List.Root gap="2" variant="plain" align="center">
          <List.Item>
            <List.Indicator asChild color="green.500">
              <LuCheckCircle />
            </List.Indicator>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit
          </List.Item>
          <List.Item>
            <List.Indicator asChild color="green.500">
              <LuCheckCircle />
            </List.Indicator>
            Assumenda, quia temporibus eveniet a libero incidunt suscipit
          </List.Item>
          <List.Item>
            <List.Indicator asChild color="green.500">
              <LuCircleDashed />
            </List.Indicator>
            Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
          </List.Item>
        </List.Root>
      )
    }
    Ответ написан
    1 комментарий
  • Почему не оборачивается обрезается текст при использовании flex?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Потому что у вас из-за white-space блок info занимает всю длину текста:
    672bb2a011545204235404.png
    Задайте блоку info overflow hidden, чтобы он знал до какого размера ему обрезать текст:

    ну и я бы в 3 колонки (аватар, имя/сообщение, дата/кол) сделал на flex, а не в 2 как у вас, чтобы размеры были одинаковые.
    Ответ написан
    1 комментарий
  • Как вернуться на первый шаг в форме?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    // Функция для переключения на определенную вкладку
    function toTab(n) {
      // Проверяем, является ли индекс n отрицательным
      if (n < 0) {
        return;
      }
    
      var x = document.getElementsByClassName("tab");
    
      // Проверяем, не превышает ли индекс n количество вкладок
      if (n >= x.length) {
        return;
      }
    
      // Скрыть текущую вкладку:
      x[currentTab].style.display = "none";
      // Устанавливаем новую текущую вкладку
      currentTab = n;
      // Отображаем нужную вкладку:
      showTab(n);
    }


    <button type="button" id="nextBtn" onclick="toTab(0)">Вернуться к первому шагу</button>
    Ответ написан
    2 комментария
  • Как понять что скрипт перестал работать после того как развернули браузер?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Я запутался в том, что хочу сделать.

    Одному вам известно, что у вас на уме

    но знаю что setTimeout работает криво,

    Современные браузеры снижают частоту таймеров, чтобы сэкономить ресурсы. Поэтому и "криво" работает как вам кажется. Аналогично "криво" будет работать любой требующий ресурсов код - WebSocker и тд.

    накапливается или вовсе перестает работать

    Это проблемы у вас в коде

    Как мне перезапускать скрипт после развертывания браузера телефона

    0. Вынесите реализацию подключения к websocket'у в отдельную функцию и проверяйте состояние соединения перед каждым действием:
    let socket;
    const url = "ws://your-websocket-server-url";
    
    function connect() {
      socket = new WebSocket(url);
      socket.onopen = () => {};
      socket.onmessage = (event) => {};
      socket.onerror = (error) => {};
      socket.onclose = (event) => {};
    }
    
    function reconnect() {
      if (socket && socket.readyState !== WebSocket.CLOSED) return;
      .....
    }
    
    function send(message) {
      if (socket && socket.readyState === WebSocket.OPEN) {
        socket.send(message);
        return
      }
      console.warn("WebSocket is not open. Message not sent:", message);
      ....
    }

    1. Отправляйте переодически ping сообщение для проверки состояния соединения. Если нет ответа, переподключаемся (и проверяем состояние соединения перед переподключением).
    2. Добавьте слушатель visibilitychange для отслеживания "развертывания" вкладки:
    document.addEventListener('visibilitychange', () => {
        // document.hidden
        if (document.visibilityState === 'visible' && websocket.readyState === WebSocket.CLOSED) {
            reconnect();
        }
    });


    ps забыл упомянуть про PushAPI если необходимо получать сообщения в фоновом режиме (94.65% на caniouse):
    API to allow messages to be pushed from a server to a browser, even when the site isn't focused or even open in the browser.
    Ответ написан
    1 комментарий
  • Как заставить Alacritty корректно обрабатывать сочетания клавиш с fn?

    alsolovyev
    @alsolovyev Автор вопроса
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Проблема в winit, которая отвечает за обработку окон.
    Если кому интересно, то можно отслеживать состояние баг-реппорта на github тут и тут
    Ответ написан
    Комментировать
  • Как преобразовать сайт в приложение на iOS бесплатно?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Изучайте Progressive web app
    Progressive Web App (PWA) — это веб-приложение, которое сочетает возможности сайтов и мобильных приложений. Оно работает в браузере, но при этом может устанавливаться на устройство как приложение, работать офлайн, поддерживать push-уведомления и обеспечивать быстрый отклик за счёт кэширования.
    Ответ написан
    Комментировать
  • Почему третья карточка не становиться в ряд?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Видимо потому что при calc вы еще вычитаете отступы какие-то flex: 0 1 calc(100% / 3 - 12px * 2 / 3), а 33.333% это просто 100% / 3
    Ответ написан
  • Пустая страница при деплое, как исправить?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Если вы просто открываете index.html в браузере, то у вас должны быть ошибки в консоле. Что-то тип:
    [Error] Origin null is not allowed by Access-Control-Allow-Origin. Status code: 0
    [Error] Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. Status code: 0 (index-n_ryQ3BS.css, line 0)

    Не дает загрузить файлы из-за безопасности.
    Запустите какой сервере простой (live-server или python3 -m http.server) или используйте vite preview:
    // package.json
      "scripts": {
        // ....
        "preview": "vite preview"
        // ....
      },
    Ответ написан
    2 комментария
  • Можно ли тестировать javascript код по кнопке на клиенте?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Нет, jest только под nodejs работает (или через запросы на сервер можно какие костыли придумать).
    Есть еще Mocha, которая:
    JavaScript test framework running on Node.js and in the browser

    Можно ее использовать.

    Jest это лишь инструмент, который помогает писать тесты. Вы можете и не использовать его для тестирования:
    const sum = (a, b) => a + b;
    
    test('adds 1 + 2 to equal 3', () => {
      expect(sum(1, 2)).toBe(3);
    });

    const sum = (a, b) => a + b;
    
    function testSum(description, a, b, expected) {
      const result = sum(a, b);
      if (result === expected) {
        console.log(`✓ ${description}`);
      } else {
        console.error(`✗ ${description}: expected ${expected} but got ${result}`);
      }
    }
    
    testSum('adds 1 + 2 to equal 3', 1, 2, 3);

    Пишите свои обертки и запускайте их на клиенте.
    Ответ написан
    Комментировать
  • Как добиться срабатывания transition для checkbox?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Потому что не задали изначальное состояние для background-image. например пустое изображение:
    .newsletter__label::before {
      transition: background .2s ease-in;
      content: "";
      width: 1.875rem;
      height: 1.875rem;
      border: 1px solid #3a173c;
      margin-bottom: .875rem;
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=");
    }



    Но лучше делать через opacity или scale3d
    Ответ написан
  • Как получить все id элементов после рендеринга DOM?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Вам надо на след. секцию скролить? Например через IntersectionObserver:
    https://playcode.io/2099856
    https://playcode.io/2099876 - если нужно получить ref у компонента (через forwardRef)

    ps в коде можете посмотреть как можно добавить все элементы в список
    Ответ написан
    Комментировать
  • Где попрактиковаться с табличными данными, как Pandas, в JS?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    А что вам мешает взять задачи для питоновской Pandas'ы? google.com
    Поиск выдает репы с задачками и решения к ним. Код на python вам не нужен, но output посмотреть можно.
    Решайте задачи - сверяйте output:
    https://github.com/aakankshaws/Pandas-exercises
    https://github.com/guipsamora/pandas_exercises
    https://github.com/tommyod/awesome-pandas
    https://medium.com/%40foklacu/the-ultimate-collect...

    ps на крайний случай можно конвертировать код из python в js, если совсем какие-то проблемы появились с задачей
    Ответ написан
    1 комментарий
  • Как на JavaScript расшифровать строку с помощью ключа?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Так (для nodejs)?
    const crypto = require("crypto");
    
    const encryptedData =
      "jPNGTNLtGIBc7Jv2UXj7a3FNQk13eUJ5T3VIUXlOS0ZVOEpnMUpPMnhvQXg5bE5kMGFHejVxaTFnYTA9";
    const key = "qEExPE+jkJxQUt8fSO+XwzXgRGh6kLHy+lWEe6Z8T6s=";
    
    const decodedKey = Buffer.from(key, "base64");
    const decodedData = Buffer.from(encryptedData, "base64");
    const ivLength = 16; 
    
    const iv = decodedData.slice(0, ivLength);
    const encryptedText = decodedData.slice(ivLength);
    
    const decipher = crypto.createDecipheriv("aes-256-cbc", decodedKey, iv);
    
    try {
      let decrypted = decipher.update(encryptedText, null, "utf8");
      decrypted += decipher.final("utf8");
      console.log("Расшифрованная строка:", decrypted);
    } catch (error) {
      console.error("Ошибка расшифровки:", error.message);
    }
    Ответ написан
    4 комментария