• Как заэкспортировать в js?

    scoffs
    @scoffs
    Frontend | C# | Student
    Ошибка не в js, а в настройках eslint. Гуглится за 3 секунды.
    https://stackoverflow.com/questions/36367656/eslin...

    // .eslintrc.modules.json
    {
        "extends": "./.eslintrc.json",
        "parserOptions": {
            "sourceType": "module"
        },
    }
    Ответ написан
  • Как пропустить китайские иероглифы через регулярку?

    scoffs
    @scoffs
    Frontend | C# | Student
    Возможно это поможет
    _string.replace(/[^a-zа-яё\u4E00-\u9FFF0-9 `,:-]/gim, " ")


    \u4E00 - начальный символ диапазона китайских иероглифов в кодировке Unicode.
    \u9FFF - конечный символ диапазона китайских иероглифов в кодировке Unicode.
    Ответ написан
    5 комментариев
  • Как оптимизировать js скрипт?

    scoffs
    @scoffs
    Frontend | C# | Student
    Я бы посоветовал еще отказаться от var и перейти на letи const

    Инициализировать переменные через запятые также не лучшая затея

    Примерно я написал как-то так
    const bannersClick = document.querySelector('.banners__click');
    const bannersInfo = document.querySelector('.banners');
    const bannersClose = document.querySelector('.banners__close');
    
    function addClass(element, className) {
      element.classList.add(className);
    }
    
    function setRightStyle(element, value) {
      element.style.right = value;
    }
    
    function handleClick() {
      addClass(this, 'slideInRight');
      setRightStyle(this, '400px');
      bannersInfo.classList.remove('slideOutLeft');
      addClass(bannersInfo, 'slideInRight');
      setRightStyle(bannersInfo, '0');
    }
    
    function handleClose() {
      bannersInfo.classList.remove('slideInRight');
      addClass(bannersInfo, 'slideOutLeft');
      setRightStyle(bannersInfo, '-410px');
      setRightStyle(bannersClick, '-10px');
    }
    
    bannersClose.addEventListener('click', handleClose);
    bannersClick.addEventListener('click', handleClick);
    Ответ написан
    Комментировать
  • Как убрать приглушение фоновой музыки при воспроизведении тега audio на JavaScript?

    scoffs
    @scoffs
    Frontend | C# | Student
    У меня пока возникает вопрос зачем это делать, если это вполне логичное поведение.

    И вроде как браузер / API браузера не имеет контроля над громкостью. Это связано с ограничениями безопасности и конфиденциальности браузеров (предотвращения возможности злоумышленниками записи или слежки за пользователями через звуковые данные)

    Возможные шаги решения / компромиссы:
    • Убедитесь, что ваши звуковые файлы имеют подходящую громкость
    • Используйте более качественные аудиоформаты. Некоторые форматы, такие как MP3, могут звучать более тихо или менее четко при одинаковых настройках громкости. Попробуйте использовать форматы с более высоким качеством звука, такие как WAV или FLAC
    • Попробуйте изменить уровень громкости настройками звука на устройстве пользователя. В некоторых случаях, пользователь может установить громкость фоновой музыки на более высокий уровень, чтобы сделать ее более заметной

    Не факт, что поможет, но хоть что-то.
    Ответ написан
    Комментировать
  • Почему не отображается checkbox при клике на него, React?

    scoffs
    @scoffs
    Frontend | C# | Student
    Возможно надо что-то типа этого:
    export default function CheckBox() {
        const [isChecked, setIsChecked] = useState(false);
    
        const handleChange = () => {
            setIsChecked(!isChecked);
        };
    
        return (
            <div className='todo-item__container-field'>
                <input
                    className='todo-item__checkbox'
                    type='checkbox'
                    name='checkbox'
                    checked={isChecked}
                    onChange={handleChange}
                />
                <span className='todo-item__span'></span>
            </div>
        );
    }


    Залил бы в песочницу, чтобы самому можно было потыкать и подебажить
    Ответ написан
    Комментировать
  • Удаляется ли хук таким образом и как это можно проверить?

    scoffs
    @scoffs
    Frontend | C# | Student
    Хук удаляется

    Проверить можно так:
    Вы можете использовать функцию has_filter для проверки наличия хука upload_dir после вызова remove_filter.

    if ( ! has_filter( 'upload_dir', 'my_func' ) ) {
        echo 'Хук upload_dir успешно удален.';
    } else {
        echo 'Не удалось удалить хук upload_dir.';
    }
    Ответ написан
    2 комментария
  • Нужно ли json файлы с переводом выносить на бэк?

    scoffs
    @scoffs
    Frontend | C# | Student
    Тут как посмотреть:
    • Если вы планируете добавлять новые языки или обновлять переводы регулярно, может быть полезно хранить файлы на бэкэнде. Это обеспечит более гибкую систему управления переводами и обновлениями без необходимости изменения клиентского кода.
    • Если содержимое переводов является конфиденциальным или чувствительным, вынос файлов на бэкэнд может предоставить дополнительные меры безопасности
    • Если вы хотите использовать кэширование для оптимизации производительности, хранение JSON файлов на бэкэнде позволит вам настроить соответствующие заголовки кэширования для HTTP-ответов, что снизит нагрузку на сервер и ускорит загрузку переводов
    Ответ написан
    1 комментарий
  • Как верстать такие блоки?

    scoffs
    @scoffs
    Frontend | C# | Student
    На первых двух скринах подойдет displey: flex
    На третьем было бы неплохо увидеть полный скрин, в теории там просто текст по центру, а названия планет через positio: absolute
    Ответ написан
    Комментировать
  • Как сделать бесконечный фон сайта с одной стороны?

    scoffs
    @scoffs
    Frontend | C# | Student
    В теории это какой-то дополнительный блок или псевдоэлемент, на который наложена маска (можно через clip-path)
    Ответ написан
    Комментировать
  • Как вывести по умолчанию массив в autoComplete.js?

    scoffs
    @scoffs
    Frontend | C# | Student
    Оно?
    new autoComplete({
      data: {
        src: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'],
      },
      resultsList: {
        render: true, // Отобразить элементы массива по умолчанию
      },
    });
    Ответ написан
    Комментировать
  • Как создать базу данных и связать с JAVASCRIPT?

    scoffs
    @scoffs
    Frontend | C# | Student
    У меня есть мелкий проект
    Там MERN стек - MongoDB / Express / React / NodeJS, может поможет

    А ванильный пример будет выглядеть как-то так:

    Для начала надо вообще сказать монго на пк, а потом и в проект
    npm install mongodb

    Потом можно в папке server подключиться к БД
    const { MongoClient } = require('mongodb');
    
    const url = 'mongodb://localhost:27017'; // URL базы данных
    const dbName = 'mydatabase'; // Имя базы данных
    
    const client = new MongoClient(url);
    
    async function connectToDatabase() {
      try {
        await client.connect();
        console.log('Connected to the database');
        return client.db(dbName);
      } catch (error) {
        console.error('Error connecting to the database:', error);
      }
    }
    
    module.exports = connectToDatabase;


    Делаем базовые маршруты
    const express = require('express');
    const connectToDatabase = require('./db'); // Путь к файлу подключения к базе данных
    
    const app = express();
    app.use(express.json());
    
    // Маршрут для сохранения данных в базу данных
    app.post('/data', async (req, res) => {
      const { email, phoneNumber, fullName } = req.body;
    
      try {
        const db = await connectToDatabase();
        const collection = db.collection('data'); // Имя коллекции
    
        const result = await collection.insertOne({
          email,
          phoneNumber,
          fullName,
        });
    
        res.status(201).json(result.ops[0]); // Отправить сохраненный документ обратно клиенту
      } catch (error) {
        console.error('Error saving data to the database:', error);
        res.status(500).json({ error: 'An error occurred' });
      }
    });
    
    app.listen(3000, () => {
      console.log('Server listening on port 3000');
    });


    Ну и базовая разметка
    <form action="/data" method="POST">
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>
      
      <label for="phoneNumber">Phone Number:</label>
      <input type="tel" id="phoneNumber" name="phoneNumber" required>
      
      <label for="fullName">Full Name:</label>
      <input type="text" id="fullName" name="fullName" required>
      
      <button type="submit">Submit</button>
    </form>


    require лучше заменить на import (в packages.json указать надо "type": "module")
    Ответ написан
    3 комментария
  • Как получить массивы объектов с одинаковыми ключами из другого массива объектов?

    scoffs
    @scoffs
    Frontend | C# | Student
    Кажется тебе тут поможет `reduce`
    const array = [
      {id: 1, name: 'Test_1'},
      {id: 2, name: 'Test_2'},
      {id: 3, name: 'Test_3'},
      {id: 4, name: 'Test_1'},
      {id: 5, name: 'Test_2'}
    ];
    
    const groupedArrays = array.reduce((result, obj) => {
      // Проверяем, существует ли уже массив с данным значением name
      const existingArray = result.find(arr => arr[0].name === obj.name);
      
      // Если такой массив уже существует, добавляем текущий объект в него
      if (existingArray) {
        existingArray.push(obj);
      } else {
        // Если такого массива еще нет, создаем новый массив с текущим объектом
        result.push([obj]);
      }
      
      return result;
    }, []);
    
    // Печатаем результат
    groupedArrays.forEach(arr => {
      console.log('____');
      console.log(arr);
    });
    Ответ написан
  • Как правильно расположить элементы через стили?

    scoffs
    @scoffs
    Frontend | C# | Student
    Тебе не что-то типа этого надо?
    <div class="parent-span">
      <span class="child-span">Дочерний span</span>
      Родительский span
    </div>

    .parent-span {
      display: flex;
      justify-content: center;
    }
    
    .child-span {
      align-self: flex-start;
    }
    Ответ написан
    Комментировать
  • Какие порекомендуете сайты с набором элементов UI?

    scoffs
    @scoffs
    Frontend | C# | Student
    Я бы советовал посмотреть в сторону более современных UI библиотек, например, MUI или Tailwindcss
    Ответ написан
    Комментировать
  • Тяжелый ли bootstrap 5?

    scoffs
    @scoffs
    Frontend | C# | Student
    Не такой уж и тяжелый, можешь подключить его через CDN или порыться в документации и попробовать другой метод
    Ответ написан
  • Почему сначала нужно писать import, а только потом require?

    scoffs
    @scoffs
    Frontend | C# | Student
    А в чем, собственно, прикол использовать require и import в одном проекте? лучше придерживаться чего-то одного
    Ответ написан
    Комментировать