Задать вопрос
  • Вопрос по асинхронному js?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    async sendNewData() {
        await this.requestToServer(url);
        console.log(this.failMessage);
    }

    Весь исправленный код, втч. синтаксические ошибки:
    class Lists {
        constructor(items, failMessage) {
            this.items = items;
            this.failMessage = failMessage;
        }
    
        async requestToServer(url) {
            let response = await fetch(url, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json;charset=utf-8',
                }
            });
    
            if (response.ok) {
                this.items = await response.json();
            } else if (response.status == 422) {
                this.failMessage = await response.json();
            }
        }
    
        async sendNewData(url) {
            await this.requestToServer(url);
            console.log(this.failMessage);
        }
    }
    Ответ написан
    Комментировать
  • Что такое Docker простыми словами?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Что такое Docker простыми словами

    простыми словами

    Если совсем прям простыми, то - это некая легковесная оболочка, которая способна изолировать приложение внутри себя от внешнего мира. Очень похож (по логике) на системы виртуализации VMware, VirtualBox, Parallels итп, но сам не является им.

    Возможности:

    - Контейнеризация: Docker позволяет паковать приложения вместе со всеми их зависимостями в контейнеры, обеспечивая тем самым их независимость от конкретной инфраструктуры.
    - Переносимость: Контейнеры Docker могут быть запущены на любом компьютере, который поддерживает Docker, независимо от операционной системы. Это делает распространение и развертывание приложений намного проще.
    - Изоляция ресурсов: Каждый контейнер Docker работает в изолированной среде и не влияет на другие контейнеры или хостовую систему.
    - Слоистая файловая система: Docker использует слоистую файловую систему для хранения данных, что позволяет существенно экономить дисковое пространство и упрощает обновление и распространение контейнеров.
    - Сетевые возможности: Docker позволяет настраивать сетевые параметры каждого контейнера, что позволяет создавать сложные многокомпонентные приложения.
    - Docker Hub: Docker Hub – это репозиторий, где можно хранить и делиться контейнерами. Это облегчает развертывание и распространение приложений.
    - Docker Compose: Это инструмент для определения и запуска многоконтейнерных - Docker-приложений. С помощью Compose вы можете использовать файл YAML для конфигурации служб вашего приложения, а затем с помощью одной команды создать и запустить все службы.
    - Docker Swarm: Docker Swarm предоставляет нативные возможности Docker для оркестрации и масштабирования кластера Docker.
    Ответ написан
    Комментировать
  • Что лучше учить в связке с React для бекенда?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    что лучше мне выучить для бекенда Node js или Next js

    NestJS
    Ответ написан
    Комментировать
  • Как различить клик по `td` и клик по `a` в `td`?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    $('td a').click(function(event){
        event.stopPropagation();
        // code from a
    });
    
    $('td').click(function(){
        // code from td
    });
    Ответ написан
    1 комментарий
  • Какой подход к CSS использовать в 2023 году?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    CSS-IN-JS, CSS-modules

    Но я бы выбрал CSS-modules, т.к:
    1. Производительность клиента, а SSR не всегда возможен.
    2. Отсутствие смешивания CSS и JS.
    3. Отсутствие дополнительного обучения для использования CSS-IN-JS.
    Ответ написан
    2 комментария
  • Footer отображается на разных страницах сайта по разному, как сделать чтобы он был везде одинаковый?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Верстка изначально не подразумевает широких блоков, поэтому использовал псевдо-классы с абсолютным позиционированием, чтобы принудительно выйти за пределы родителя, добавить в конец файла со стилями:

    .footer {
        position: relative;
        overflow: visible;
    }
    
    .footer:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -9999px;
        right: -9999px;
        background: gray;
    }


    Адрес Вашего CSS: /local/templates/public2016/template_styles.css
    Ответ написан
    6 комментариев
  • Как будет выглядеть этот Go код на Python?

    Mike_Ro
    @Mike_Ro Куратор тега Python
    Python, JS, WordPress, SEO, Bots, Adversting
    import socket
    import ssl
    
    def test_connection(address):
        certs_return = ""
        context = ssl.create_default_context()
        context.check_hostname = False
        context.verify_mode = ssl.CERT_NONE
    
        try:
            with socket.create_connection((address, 443), timeout=10) as sock:
                with context.wrap_socket(sock, server_hostname=address) as ssock:
                    cert = ssock.getpeercert()
                    for (issuer, entry) in cert['issuer']:
                        certs_return += "{}={}\n".format(issuer, entry)
        except Exception as e:
            certs_return = "0"
    
        return certs_return
    Ответ написан
    2 комментария
  • Как на owlCarousel реализовать слайдер с центральным элементом, который больше остальных?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    подскажите библиотеку, в которой можно - такую же легкую, как и эта, то есть, без наворотов.

    https://swiperjs.com/demos
    https://swiperjs.com/plugins

    https://carousel-slider.uiinitiative.com/
    https://triple-slider.uiinitiative.com/
    Ответ написан
    1 комментарий
  • Как получить соседние элементы?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    let children = Array.from(e.parentNode.children);
    let index = children.indexOf(e);
    if (index > -1) {
        children.splice(index, 1);
    }
    Ответ написан
    Комментировать
  • Как временно заблокировать событие window scroll?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    let isScrolling = false;
    
    window.addEventListener('scroll', function(e) {
      if(isScrolling) {
        e.preventDefault();
        return;
      }
      
      // handler
    });
    
    function scrollTo() {
      isScrolling = true;
    
      window.scrollTo({
        top: 100,
        behavior: "smooth"
      });
    
      setTimeout(() => isScrolling = false, 500);
    }
    Ответ написан
    1 комментарий
  • Как сделать, чтобы с помощью input можно было производить поиск(в моем случае книг, каждая книга-отдельный объект json в js файле)?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    // get DOM elements
    const searchInput = document.getElementById('searchInput');
    const resultsContainer = document.getElementById('resultsContainer');
    
    // search from array
    function searchBooks(query) {
        return CLASS5.filter(book => {
            return book.query.toLowerCase().includes(query.toLowerCase())
                || book.athor.toLowerCase().includes(query.toLowerCase())
                || book.pages.toLowerCase().includes(query.toLowerCase())
                || book.age.toLowerCase().includes(query.toLowerCase())
                || book.classn.toLowerCase().includes(query.toLowerCase());
        });
    }
    
    // print
    function displayResults(results) {
        resultsContainer.innerHTML = '';
    
        if (results.length === 0) {
            resultsContainer.innerHTML = '<p>Ничего не найдено...</p>';
            return;
        }
    
        results.forEach(book => {
            const bookCard = document.createElement('div');
            bookCard.innerHTML = `
                <h2>${book.query}</h2>
                <p>${book.athor}</p>
                <p>${book.pages}</p>
                <p>${book.age}</p>
                <p>${book.classn}</p>
                <img src="${book.images}" alt="Book Image">
            `;
            resultsContainer.appendChild(bookCard);
        });
    }
    
    // handler
    searchInput.addEventListener('input', (event) => {
        const query = event.target.value;
        const results = searchBooks(query);
        displayResults(results);
    });
    Ответ написан
    4 комментария
  • Проекты After effects в формат svg?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Вопрос о правомерности такой практики зависит от условий, при которых Вы получили исходный проект After Effects. Если проект обладает лицензией, которая разрешает его использование, изменение и продажу производных работ, тогда такое использование может быть допустимым. Однако, если лицензия ограничивает такое использование, то перекодирование проекта в SVG и последующая продажа могут нарушать эти условия.

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

    такое продавать можно? Или это нарушение прав

    Нельзя, нарушение в последнем пункте. Но! Если Вы сделаете из этого эффекта не полную копию в виде svg, то можно.
    Ответ написан
    3 комментария
  • Какую функцию лучше использовать?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    - Вариант 1 (метод sameDay): Этот метод сравнивает год, месяц и дату двух объектов Date. Этот метод более надежен, поскольку он не изменяет исходные объекты Date. Он просто сравнивает их. Если Вы не хотите изменять исходные даты, это лучший выбор.
    - Вариант 2 (setHours): Этот метод устанавливает время обоих объектов Date на полночь (0 часов, 0 минут, 0 секунд, 0 миллисекунд) и затем сравнивает их. Это может быть проблемой, если Вы в дальнейшем планируете использовать исходные даты, так как метод setHours меняет исходные объекты. Важно помнить, что объекты Date в JavaScript передаются по ссылке, а не по значению. Поэтому, если вы используете этот метод и сохраняете исходные даты, Вам нужно будет клонировать их перед вызовом setHours.
    Ответ написан
    Комментировать
  • Почему не работает функция?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Скрипт выполняется до загрузки DOM?

    Попробуйте так:
    document.addEventListener('DOMContentLoaded', (event) => {
        const videoBtn = document.querySelector('#video-btn');
        const videoPicture = document.querySelector('.video__picture'); 
    
        videoBtn.addEventListener('click', function () {
            videoPicture.classList.add('none');
        });
    });
    Ответ написан
    2 комментария
  • Зачем next js нужен еще дополнительный сервер для задач на бэке?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Зачем вообще нексту еще другой сервер, если некст и так всё может делать сам?

    Сильное заявление. Next это в первую очередь - генератор сайтов, SSR, SSG итп, а вот Nest это целый комбаин бэкенда для JS:

    - Подключение и работа с базами данных: Nest.js может использовать различные ORM, такие как TypeORM, Sequelize или Mongoose, для работы с базами данных.
    - Создание RESTful API: В то время как Next.js предоставляет базовые возможности для создания API, Nest.js имеет более широкие возможности для создания сложных RESTful API.
    - Аутентификация и авторизация: Nest.js предоставляет поддержку для создания сложных систем аутентификации и авторизации.
    - Обработка ошибок: Nest.js предоставляет встроенные механизмы для обработки ошибок.
    - Валидация входных данных: С помощью библиотек, таких как class-validator, Nest.js может проверять входные данные на соответствие определенным правилам и структурам.
    - Middleware: Nest.js предоставляет встроенные механизмы для использования middleware, что позволяет производить предварительную обработку запросов.
    - Загрузка файлов: Nest.js может управлять загрузкой файлов и данных multipart/form-data.
    - Websockets и microservices: Nest.js имеет встроенные возможности для работы с веб-сокетами и микросервисами.
    - Dependency Injection: Nest.js имеет собственную систему внедрения зависимостей, основанную на TypeScript, что облегчает тестирование и повышает модульность кода.
    - CRON jobs и задачи в фоне: Nest.js позволяет легко создавать фоновые задачи и запускать задачи по расписанию.

    Почитать: https://habr.com/ru/articles/570886/
    Ответ написан
    Комментировать
  • Ссылка в заголовке или заголовок в ссылке — как правильно/лучше?

    Mike_Ro
    @Mike_Ro Куратор тега Поисковая оптимизация
    Python, JS, WordPress, SEO, Bots, Adversting
    но а как лучше и правильнее?

    a>h

    Внутри тега заголовка желательно избегать вложенных тегов. Если прям трубы горят, то span можно запихнуть, но я бы не рекомендовал даже его.
    Ответ написан
    Комментировать
  • Как лучше делать адаптацию по телефон в px или в %?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Кто знает в чем лучше делать адаптив в px или в %

    rem, который зависит от размера шрифта в html/body. Меняете размер шрифта - пропорционально меняется все, что задано в rem.
    Ответ написан
    Комментировать
  • Как создать функцию копирования объектов с подставным именем нового объекта?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Вы пытаетесь создать новый объект и дать ему имя, передав это имя в функцию. Это не работает, потому что в JavaScript имена переменных должны быть определены явно, они не могут быть созданы или изменены динамически во время выполнения.

    Возвращаем копию объекта, затем присваиваем эту копию новой переменной:
    let user = {
       name: "David",
       age: 25,
    }
    
    function objectClone(object) {
       let newObject = {};
    
       for (let key in object) {
          newObject[key] = object[key];
       }
    
       return newObject;
    }
    
    let user2 = objectClone(user);
    
    console.log(user2.name); // выводит "David"
    Ответ написан
    2 комментария
  • Как вставить в таблицу данные из массива?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Можно использовать индекс столбца как индекс для доступа к внутренним массивам данных:
    let Table = this.$refs.theTable
    
    // rows
    for(let rowIndex = 0; rowIndex < Table.rows.length; rowIndex++) {
        let row = Table.rows[rowIndex];
    
        // cells
        for(let cellIndex = 0; cellIndex < row.cells.length; cellIndex++) {
    
            // is data?
            if(this.allDataOfDays[cellIndex] && this.allDataOfDays[cellIndex][rowIndex]) {
                row.cells[cellIndex].innerText = this.allDataOfDays[cellIndex][rowIndex];
            }
        }
    }
    Ответ написан
    Комментировать
  • Как создать текстовый файл, чтобы его можно было потом открыть?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    В браузере:
    // set localStorage
    localStorage.setItem('myKey', 'myValue');
    
    // get localStorage
    let value = localStorage.getItem('myKey');
    
    console.log(value); // myValue


    На диске, используя NodeJS:
    const fs = require('fs');
    
    // write
    fs.writeFile('myFile.txt', 'myValue', (err) => {
        if (err) throw err;
        console.log('The file has been saved!');
    });
    
    // read
    fs.readFile('myFile.txt', 'utf8', (err, data) => {
        if (err) throw err;
        console.log(data); // myValue
    });
    Ответ написан
    1 комментарий