• Как по клику подгрузить файл css в nodeJs?

    dedalik
    @dedalik
    Веб разработчик
    Чтобы файл подключился нужно этот файл вставить в дом в теге link

    // vanilla js
    document.querySelector('.elem-to-click').addEventListener('click', function() {
      var link = document.createElement( "link" );
      link.href = "style.css";
      link.type = "text/css";
      link.rel = "stylesheet";
    
      document.getElementsByTagName( "head" )[0].appendChild( link );
    });
    
    // jQuery
    $('.elem-to-click').on('click', function() {
      $('head').append('<link rel="stylesheet" type="text/css" href="style.css">');
    });
    Ответ написан
    Комментировать
  • Как импортировать модули в Web Workers?

    dedalik
    @dedalik
    Веб разработчик
    В node.js модули импортируются с помощью require()

    const { parentPort } = require('worker_threads');
    Ответ написан
    Комментировать
  • Автокомплит, как сделать несколько value и получить второй запрос?

    dedalik
    @dedalik
    Веб разработчик
    Привет, у `easyAutocomplete` есть встроенные функции, с помощью которых можно получить дополнительные данные. В вашем случае вам подойдёт функция `getSelectedItemData()`, которая отобразит `id`. Далее этот `id` вам нужно приложить к вашему скрипту `(/price.php?city="+ id")`.

    Пример получения дополнительных данных из массива:

    <input id="function-data" />
    <input id="data-holder" />


    var options = {
    	data: [
    		{"character": "Cyclops", "realName": "Scott Summers"},
    		{"character": "Professor X", "realName": "Charles Francis Xavier"},
    		{"character": "Mystique", "realName": "Raven Darkholme"},
    		{"character": "Magneto", "realName": "Max Eisenhardt"}
    		],
    
    	getValue: "character",
    
    	list: {
    
    		onSelectItemEvent: function() {
    			var value = $("#function-data").getSelectedItemData().realName;
    
    			$("#data-holder").val(value).trigger("change");
    
                            // Тут вы можете делать манипуляции с вашим вторым скриптом
    		}
    	}
    };
    
    $("#function-data").easyAutocomplete(options);
    Ответ написан
    Комментировать
  • Slick slider как сделать чтобы листал слайд при скроле?

    dedalik
    @dedalik
    Веб разработчик
    Попробуйте так:
    .on('wheel', function (e) {
        e.preventDefault();
    
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        if(delta > 0) {
            $(this).slick('slickPrev');
        }
        else {
            $(this).slick('slickNext');
        }
        return false;
    });
    Ответ написан
    1 комментарий
  • Как добавить анимацию для раскрывающего поиска?

    dedalik
    @dedalik
    Веб разработчик
    Нужно убрать добавление свойства display: none

    let searchValid = false;
    
    $('.search__icons').click(function() {
        if(searchValid == false){
          $('.search__icons').css('background', '#F8F8F8');
          $('.search__input').css('display', 'block');
          $('.search__input').css('width', '515px');
          $('.search__icons').css('border-radius', '3px 0 0 3px');
          $('.search__input').addClass('search__input--anim');
          $('.contact__number').css('display', 'none');
          searchValid = true;
        } else {
          $('.search__icons').css('background', '#F9E8FA');
          //$('.search__input').css('display', 'none'); - из-за этого не срабатывает анимация
          $('.search__input').css('width', '0');
          $('.search__input').css('padding', '0');
          $('.search__icons').css('border-radius', '3px');
          $('.search__input').addClass('search__input--anim');
          $('.contact__number').css('display', 'block');
          searchValid = false;
        }
        
    });
    Ответ написан
    Комментировать
  • Можно ли отследить отмену загрузки страницы на жабаскрипт?

    dedalik
    @dedalik
    Веб разработчик
    Можно отследить, что пользователь закрыл окно браузера и в промежутке перед закрытием выполнить скрипт
    https://developer.mozilla.org/ru/docs/Web/API/Wind...

    window.addEventListener("beforeunload", function(event) { 
    // страница браузера закрывается
    });

    В вашем случае ещё можно использовать Document.visibilityState, в тот момент, когда пользователь возвращается на страницу с гифкой отключаем гифку
    https://developer.mozilla.org/en-US/docs/Web/API/D...

    let wasHidden = false;
    
    const onVisibilityChange = () => {
      if (wasHidden && document.visibilityState === 'visible') {
        // Тут убираем гифку
      }
      if ( document.visibilityState === 'hidden' ) {
        wasHidden = true;
      }
    };
    
    document.addEventListener('visibilitychange', onVisibilityChange);
    Ответ написан
    Комментировать
  • Как отследить ЗАЖАТИЕ кнопки javascript?

    dedalik
    @dedalik
    Веб разработчик
    Можно проверять нажатие кнопки мыши, задать промежуток времени, которое определяет, что пользователь удерживает кнопку, в примере 1 сек

    const timeout = 1000;
    let idTimeout;
    
    window.addEventListener('mousedown', function() {
      idTimeout = setTimeout(function() {
          // Кнопка нажата более 1 секунды
      }, timeout);
    });
    
    window.addEventListener('mouseup', function() {
      clearTimeout(idTimeout);
    });
    Ответ написан
  • Как передать ключ от апи на сайте что бы его не увидели?

    dedalik
    @dedalik
    Веб разработчик
    Если запросы производятся с фронтенда, то никак. Его можно просто скрыть, от глаз не профессионала. Но по факту, более менее знающий человек его найдёт.
    Если с бэкенда то можно.

    Ваш аккаунт будет привязан к домену, поэтому вам ничего беспокоится о ключе.
    Ответ написан
  • Как отследить, какой скрипт JS изменил содержимое элемента?

    dedalik
    @dedalik
    Веб разработчик
    На форуме наверное тонна кода, поэтому можно просто взять id или class контейнера, в который загружаются данные и пройтись поиском по всем файлам проекта.
    Все события на js вешаются на элементы по id, class и атрибутам
    Ответ написан
    Комментировать
  • Как воспроизвести локальный файл?

    dedalik
    @dedalik
    Веб разработчик
    Привет!

    Если не ошибаюсь, это должно выглядет так:

    var audio = new Audio(chrome.runtime.getURL('Sounds/1.mp3'));
    audio.play();


    И в manifest.json

    "web_accessible_resources": [ "*.mp3" ]
    Ответ написан
  • Как сделать автоматическое перемещение файлов из списков в указанную папку?

    dedalik
    @dedalik
    Веб разработчик
    На питоне не подскажу, на node.js так можно сделать:

    const fs = require('fs'); 
    fs.readdir(folderName, function(err, files) {
        if (err) {
           // обработка ошибки
        } else {
           if (!files.length) {
               // каталог пустой
           } else {
              // каталог содержит файл
              const oldPath = 'old/path/file.cs'
              const newPath = 'new/path/file.cs'
    
              fs.rename(oldPath, newPath, function (err) {
                  if (err) throw err
                     console.log('Файл перемещён')
                  })
            }
        }
    });


    Документация тут:
    https://nodejs.org/docs/latest/api/fs.html#fspromi...
    https://nodejs.org/docs/latest/api/fs.html#fs_fs_r...

    Также, если есть необходимость проверки директории в авто режиме, можно использовать cron
    https://www.npmjs.com/package/node-cron
    Ответ написан
  • Как написать нормальной функцией?

    dedalik
    @dedalik
    Веб разработчик
    Привет, да с id это не правильно, так как можно забыть и про дублировать одинаковые id. Можно попробовать через loop, что-то вроде этого:

    const panels = document.getElementsByClassName("panel");
    const i;
    
    for (i = 0; i < panels.length; i++) {
      panels[i].addEventListener("click", function() {
       // тут ещё можно поставить удаление у всех акордионов класса 'active', если необходимо
        this.classList.toggle("active");
        const panel = this.nextElementSibling;
        if(this.classList.contains('active')){
             this.classList.add('changing-icon');
        } else {
           this.classList.remove('changing-icon');
        }
       if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        }
      });
    }


    <button class="panel">Аккордеон 1</button>
    <div class="panel-body">
      <p>текст аккордеона</p>
    </div>
    Ответ написан
    Комментировать
  • Как сделать запрос на сервер в форме которая находится в popup?

    dedalik
    @dedalik
    Веб разработчик
    Здравствуйте!

    Похоже на то, что самой формы нет в DOM, при загрузке страницы и когда открыт попап js не знает о том, что в DOM появилась новая форма и js не срабатывает. Можно затестить так, инициализируйте вашу функцию во время открытия попапа, если проблема в этом, форма будет срабатывать.

    const forms = document.querySelectorAll('form');
      forms.forEach(form => {
        form.addEventListener('submit', function (e) {
          e.preventDefault();
          const formData = new FormData(this);
    
          ajaxSend(formData)
            .then((response) => {
              form.reset();
            })
            .catch((err) => console.error(err))
        });
      });
    Ответ написан
    2 комментария
  • Почему сервер возвращает CORS localhost'у, а задеплоенному приложению - нет?

    dedalik
    @dedalik
    Веб разработчик
    Добрый день,
    CORS (Cross-Origin Resource Sharing) механизм, который использует дополнительные заголовки HTTP, чтобы дать браузерам указание предоставить веб-приложению, работающему в одном источнике, доступ к ответу на запрос к ресурсам из другого источника.

    Точно трудно написать какое вам необходимо решение, так как не известно какой сервер вы используете. Давайте предположим, что вы используете express.js, тогда на стороне сервера вам необходимо сделать следующее:

    var app = express();
    
    app.use(function(req, res, next) {
      res.header("Access-Control-Allow-Origin", "*");
      res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
      next();
    });


    * - вместо звёздочки можно указать точный домен сайта.
    Ответ написан
    Комментировать
  • Как хранить страницы в mongodb?

    dedalik
    @dedalik
    Веб разработчик
    Коллекция pages, которая хранит все данные о страницах, на выходе получается вот так:
    {
         id: "dsfgwrgrwgrgertghert345y345wrg",
         title: "Главная",
         slug: "glavnaya",
         content: "Описание страницы"
    }


    Для корзины нужно создать отдельную коллекцию, в которой будут храниться товары, добавленные пользователем в корзину. Но так как у вас нет регистрации, видимо корзина, какая-то не стандартная..

    Для страницы Товары, лучше создать свою коллекцию Products:
    {
         id: "dsfgwrgrwgrgertghert345y345wrg",
         title: "Товар 1",
         slug: "tovar-1",
         content: "Описание продукта",
        ... тут доп параметры продуктов
    }
    Ответ написан
    3 комментария
  • Как использовать javascript для junior backend разработчика на php?

    dedalik
    @dedalik
    Веб разработчик
    Я вас скажу, что наоборот, каши не будет, просто вы увидите, что все языки очень похожи, только отличается синтаксис. У всех есть переменные, функции, типы, классы и тд.

    Как говорил мой преподаватель, дополнительно изучение нового языка, наоборот откроет для вас новые знания и понятия. Чем больше языков вы знаете, тем легче вам перейти с одного языка на другой или освоить новый.

    По поводу junior fullstack, сделать можно, только проект у вас выйдет как junior. Если вы будете получать новые знания, то каждый раз, когда вы будете возвращаться в проект, вам будет казаться, что это за парень, который так написал код ))

    Если про javascript, то если у вас нет сложной логики, которая требует использовать библиотеки react, vue, angular, то писать фронтенд на чистом javascript, я бы не советовал, так как вы будете писать много лишнего кода. Лучше использовать jQuery, а дополнительный функционал можно описать в функциях с помощью js. Это облегчит разработку на стадии обучения.
    Ответ написан
    Комментировать
  • Зачем саппорты предлагают "почистить кеш браузера"??

    dedalik
    @dedalik
    Веб разработчик
    Привет!

    Просят почистить кеш, чтобы кешированные локально файлы были удалены и взамен скачаны новые обновлённые файлы

    Да, вы правы, браузер кеширует всё что может(картинки, css, js, html, media и др) локально у каждого пользователя. У каждого файла, который запрашивает браузер есть своё время кеша, каждый разработчик может настроить время жизни кеша на своё усмотрение.

    Зачем? Чтобы не скачивать одинаковые файлы при повторном открытие браузера, тем самым сохраняя трафик и увеличивая время повторной загрузки.

    Кнопка F5 не чистит кеш, а только обновляет страницу и подтягивает все файлы из кеша и с сервера.

    Статистика использует кукисы, локальное хранилище и др. посмотреть, что сохраняет браузер можно в инструментах для разработчика F12, вкладка аппликация
    6225f23bdecc1306312129.png

    На следующем скрине вкладка Network(сеть) тут можно посмотреть все скачанные файлы при посещении страницы. На стрелке показаны файлы, которые браузер отображает с кеша, эти файлы открываются мгновенно.
    6225f317557f0496719221.png

    Если у вас открыта панель разработчика, вы можете почистить кеш с помощью кнопки обновить страницу. Нажмите и удерживайте кнопку и у вас появятся дополнительные параметры для очистки кеша.
    6225f396246da591838637.png

    Также можно отключить кеш во вкладке Network(сеть), не всегда работает, но что-то делает
    6225f41548fbc299130890.png
    Ответ написан
  • Какой хук в WP для того, чтобы сразу при регистрации завернуть в него событие?

    dedalik
    @dedalik
    Веб разработчик
    Есть готовый хук Wordpress, который срабатывает как новый пользователь был зарегистрировался на сайте. Подробнее тут https://wp-kama.ru/hook/user_register

    Использовать можно как-то так:

    add_action( 'user_register', 'registration_save', 10, 1 );
     
    function registration_save( $user_id ) {
     
        if ( isset( $_POST['first_name'] ) )
            update_user_meta($user_id, 'first_name', $_POST['first_name']);
     
    }
    Ответ написан
    Комментировать
  • Что здесь подкоректировать чтобы в поисковом фильтре можно было второй раз отфильтровать без перезагрузки страницы?

    dedalik
    @dedalik
    Веб разработчик
    https://codesandbox.io/s/exciting-murdock-5m91c - готовый пример. Кешированный объект, с которого происходит фильтр, а стейт просто заполняется отфильтрованным значением
    Ответ написан
    Комментировать
  • Какие есть бесплатные трекеры ошибок в JS?

    dedalik
    @dedalik
    Веб разработчик
    Попробуй это - https://sentry.io/pricing/ есть бесплатная версия
    Ответ написан
    Комментировать