• Как поменять скроллбар на сайте?

    standy
    @standy
    Самый лучший способ, это css. Поскольку большинство скроллбаров на javascript подменяют нативный интерфейс скрола, из-за чего, например, перестают работать клавиши (приходится эмулировать на js), и перестает работать плавная прокрутка при нажатии средней кнопки мыши.

    Статьи на тему кастомизации скроллбара на css:
    css-tricks.com/snippets/sass/custom-scrollbars-mixin
    codemug.com/html/custom-scrollbars-using-css
    Нужно учитывать, что в данный момент нет способа для ФФ

    Для большей кроссбраузерности, и чтобы получить больше свободы в кастомизации, я написал собственный плагин на jquery: jquery.custom-scroll
    Отличительная особенность от других плагинов — он не убирает нативный скролл полностью, а прячет, благодаря чему нет проблем описанных выше.
    Есть похожее решение на js - baron.js - он не требует jquery, но весит вчетверо больше.
    Ответ написан
  • Как разобраться с терминалом linux? Что детально делает эта команда?

    sudo apt-add-repository -y ppa:brightbox/ruby-ng
    В debian-подобных дистрибутивах есть возможность создавать и подключать нестандартные репозитории с пакетами, они называются PPA. Команда apt-add-repository добавляет в систему репозиторий brightbox/ruby-ng. Ключ -y означает автоматически отвечать Да на все вопросы команды.

    Однако я не знаю, зачем это нужно, ведь дальше ruby мы нигде не устанавливаем и не используем.

    sudo apt-get update
    Эта команда обновляет информацию обо всех пакетах из всех репозиториев. То есть подтянет версии для пакетов из репозитория brightbox/ruby-ng. Обратите внимание, что это только загрузка сведений о пакетах и их версиях, а реальное обновление может быть только после apt-get upgrade или apt-get install.

    sudo apt-get -y install curl
    Устанавливаем программу curl. Скорее всего она будет установлена из репозитория ubuntu. Ключ -y также означает «Установить без всяких вопросов и предупреждений».

    curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
    Здесь curl загружает установочный скрипт для node 10 и передаёт его интерпретатору bash для выполнения. Ключ -s означает, что curl не должен выводить никаких своих сообщений (иначе bash попытается их выполнить), ключ -L означает разрешить обработку HTTP-редиректов при загрузке скрипта. Весь текст скрипта передаётся оператором «|», который называется «пайп».

    В установочном скрипте есть команды для подключения ppa-репозитория для Node 10 для конкретно вашего дистрибутива.

    Вообще это не очень безопасный способ, ведь здесь выполняется скрипт из интернета с правами администратора.

    sudo apt-get -y install nodejs
    Устанавливаем Node и NPM из нового репозитория.

    sudo npm i -g gulp rimraf npm-check-updates bower
    С помощью установленного NPM глобально устанавливаем пакеты gulp, rimraf, npm-check-updates и bower.

    Не знаю, зачем в 2019 году может понадобиться bower, но ладно. gulp и rimraf я бы тоже ставил локально в проект, но если их много, то глобальная установка сэкономит место на диске. Также крайне не рекомендую при работе с npm и node использовать sudo. Если возникает проблема с правами при глобальной установке пакетов, то лучше заранее правильно настроить систему.

    sudo chown -R $USER:$(id -gn $USER) /home/$USER/.config
    Эта команда восстанавливает владельца на директорию .config и лежащие в ней файлы и поддиректории. Затрудняюсь сказать, зачем это нужно. Возможно права повреждаются предыдущей командой sudo npm.

    И вообще прав ли я, когда говорю репозиторий ubuntu где лежат все репозитории? Как его посмотреть?

    При установке пакеты ищутся во всех установленных репозиториях. Из того, где версия новее, они и скачиваются. Поэтому репозиторий для node 10 замещает версию node из родного репозитория ubuntu.

    Подробнее о репозиториях и как посмотреть, какие из установлены, можно здесь.

    Посмотреть, какие пакеты входят в репозитории ubuntu, можно здесь.

    Также в репозитории есть программа synaptic, где вы можете посмотреть и установить или удалить доступные в вашей системе пакеты.
    Ответ написан
  • Что такое Virtual DOM?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Ну вот есть DOM. Он медленный, и дергать его просто так не стоит. А есть виртуальный DOM, что-то типа прослойки между вашим кодом и реальным DOM. Вы можете дергать виртуальный DOM сколько вам душе угодно, а прослойка эта соберет всю инфу о том как вы чего делали, и попробует оптимизировать взаимодействие с реальным DOM что бы вышло как можно меньше действий.

    Пример - задача простая, у вас есть таблица и нужно постоянно обновлять ячейки новым значением. Значение приходят из апишки раз в пару десятков милисекунд (какая-то реалтайм статистика к примеру). Значения эти - просто массив данных.

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

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

    Если же прослойку эту сделать со своим интерфейсом, можно получить слой абстракции для работы с UI. Именно это предлагает тот же React. Слой абстракции над UI. Вы можете работать с реактом, но UI будет отрисовываться не через DOM а скажем... это может быть нативный интерфейс мобильной платформы (гуглить native-react). Ну и т.д.
    Ответ написан
  • Где глобальный package.json?

    h0w4rd
    @h0w4rd
    Python dev.
    На Windows это:
    C:\Program Files\nodejs\node_modules
    "глобального package.json" нет, не было и не будет.
    Да и ставить что-то не локалько - очень-очень (!!!!) плохая затея. Только Typescript, Babel и прочее, что нужно использовать в командной строке можно поставить. Остальное просто категорически не рекомендуется.
    Ответ написан
  • Как работает MVVM в js фреймворках?

    @grinat
    Model - методы
    View - template
    ViewModel - то что в data

    MVC/MVP
    Model - методы
    View - template
    Presenter/Controller - там бы лежал который бы пинал вьюху и заставлял ее обновляться, или принимал данные от всяких инпутов и перенаправлял в модели, получал бы что-то от модели и затем бы пинал вьюху
    Presenter - это декстоп, controller для вэб, суть таже.

    Чтобы кодить понимать не надо. Из js фреймворков что-то понимать надо в angular/backbone/nestjs, в vue/react/express это все не надо.
    Ответ написан
  • Как работает MVVM в js фреймворках?

    Robur
    @Robur
    Знаю больше чем это необходимо
    Там же прямо написано что vue это НЕ MVVM. Зачем вы хотите понять где там mvvm если его там нет?

    Они вдохновились этим подходом, запилили свой, можете назвать это паттерном "vue" и успокоиться :)

    прочитайте общие описания паттернов - зачем их вообще сформулировали, какие проблемы они должны решать, запомните подходы и на этом все.
    Каждый фреймворк сейчас предлагает свою архитектуру, а с учетом того что это все как конструктор - вы можете сверху нагородить что угодно.
    Ответ написан
  • Python и JS, на них во фрилансе далеко можно уехать (если без связок)?

    Zoominger
    @Zoominger
    System Engineer
    У меня для вас плохие новости.
    Даже если вы выучите дополнительно какой-нибудь фреймворк (и даже несколько), вы лишь из одной толпы желающих поработать хоть за какие-то деньги просто перейдёте в другую, не менее огромную.
    Я серьёзно.
    Ответ написан
  • Как разобраться с тем, что такое TCP/IP?

    Jump
    @Jump
    Системный администратор со стажем.
    Прикладной это уровень приложений. Используется удобный протокол для обмена данными по сети. Этих протоколов огромное количество. RDP, HTTP, FTP, и прочие.
    Они описывают как будет происходить обмен данными, но не имеют отношение к доставке данных. Доставляет данные транспортный протокол.
    Пример протокола прикладного уровня в обычной жизни - посылка, телеграмма, письмо. Вот это протоколы прикладного уровня.
    JSON, REST API, и SQL к этому никакого отношения не имеют. Это не сетевые протоколы
    JSON, REST API это протоколы обмена данными, а SQL это язык написания запросов к базам данных.

    Транспортный -это уровень транспортировки.
    Его задача доставить пакет по адресу, решить все задачи с этим связанные.
    Пример из обычной жизни - почта или транспортная компания. Она принимает посылки, и обеспечивает их доставку по назначению. Заметьте - в реальности она их не возит, только обеспечивает доставку.

    Сетевой - это уровень определения маршрута. Определяет путь доставки.
    Если брать пример из реальной жизни это логистический отдел почты или транспортной компании, который решает когда какую посылку, каким маршрутом удобнее отправить.

    Канальный уровень - это уровень работы с физической доставкой.
    Пример из реальной жизни - отдел который упаковывает, посылки и грузит их поезд, самолет, автомобиль, следит за повреждением упаковки груза и общается с перевозчиком.

    Физический
    уровень - физическая передача данных.
    Например передача по оптике, или по медному проводу.
    Пример из реальной жизни - водитель везущий товар.

    В итоге вы для общения с удаленным собеседником выбираете протокол общения - письмо(прикладной уровень)
    Отдаете его на почту (транспортный уровень), почтовое отделение отдает его в отдел сортировки и логистики(сетевой уровень), из отдела логистики оно с экспедитором (канальный уровень) отправляется к перевозчику, который его и везет(физический уровень)
    И все в обратном порядке в месте получения.
    Ответ написан
  • Что такое такое rest api?

    @eandr_67
    web-программист (*AMP, Go, JavaScript, вёрстка).
    API социальных сетей - это вполне типичные примеры реализации REST API.

    REST (RESTful) - это общие принципы организации взаимодействия приложения/сайта с сервером посредством протокола HTTP. Особенность REST в том, что сервер не запоминает состояние пользователя между запросами - в каждом запросе передаётся информация, идентифицирующая пользователя (например, token, полученный через OAuth-авторизацию) и все параметры, необходимые для выполнения операции.

    Всё взаимодействие с сервером сводится к 4 операциям (4 - это необходимый и достаточный минимум, в конкретной реализации типов операций может быть больше):
    1. получение данных с сервера (обычно в формате JSON, или XML)
    2. добавление новых данных на сервер
    3. модификация существующих данных на сервере
    4. удаление данных на сервере

    Операция получения данных не может приводить к изменению состояния сервера.

    Для каждого типа операции используется свой метод HTTP-запроса:
    1. получение - GET
    2. добавление - POST
    3. модификация - PUT
    4. удаление - DELETE

    Т.е. :

    GET-запрос /rest/users - получение информации о всех пользователях
    GET-запрос /rest/users/125 - получение информации о пользователе с id=125
    POST-запрос /rest/users - добавление нового пользователя
    PUT-запрос /rest/users/125 - изменение информации о пользователе с id=125
    DELETE-запрос /rest/users/125 - удаление пользователя с id=125
    Ответ написан
  • GET и POST при получении данных?

    profesor08
    @profesor08 Куратор тега JavaScript
    Возвращает массив из 10 объектов, так как ты запрашиваешь данные
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    const json = await ().json(); // возвращает массив из 10 объектов


    Возвращает {id: 11}, так как ты отправляешь данные
    const response = await fetch("https://jsonplaceholder.typicode.com/users", {
      method: "POST"
    });
    const json = await ().json(); // возвращает {id: 11}


    Как видно из ответов, сайт jsonplaceholder.typicode.com по разному обрабатывает post и get запросы. И раз у тебя ошибки, значит ты этого не заметил, но ожидаешь чуда. Так что думаю вопрос закрыт.

    Разберись что такое REST API, тогда тебе станет понятным поведение этого сервиса.
    Ответ написан
  • Post и Get запросы, какая между ними разница и что лучше и для каких целей?

    socengel
    @socengel
    7 лет native php в продакшене, онлайн 20000+,
    Общего между ними то что они работают одинаково. Разницы между ними технически никакой. А вот идеологические различия есть.

    Я расскажу о них в контексте PHP. Прошу заметить что протокол HTTP к PHP имеет косвенное отношение потому что он создавался для обмена html страницами а PHP просто расширяет возможности и того и другого.

    GET запрос используется чтобы получить данные а POST чтобы отправить. (Напоминаю что технически они работают одинаково).

    Поэтому в контексте PHP опираясь на эту идеологию сделали следующим образом:
    1. При каждом запуске PHP по умолчанию создаются суперглобальные массивы ($_GET, $_POST).
    2. Если в строке запроса есть вопросительный знак(?). То все что после него считается параметрами GET запроса они представлены в формате 'ключ'='значение' и в качестве разделителя используется знак амперсанда (&)
    Пример:
    GET /index.php?name=Андрей&surname=Галкин
    это строка запроса, тут 2 параметра. эти параметры попадут в массив $_GET.
    3. $_POST заполняется другим способом. содержимое этого массива заполняется из "заголовков запроса". То есть из места, скрытого от глаз в явном виде. Всю рутину по созданию таких заголовков берет на себя браузер. Хотя иногда и что-то редактируется в заголовках в ручную.

    Чаще всего пост запрос используется в формах (для отправки данных).

    Например у нас есть форма для входа 2 поля логин и пароль.

    Представим что мы используем GET метод. Тогда при отправке формы мы перейдем на следующий адрес /login.php?login=Андрей&password=123 согласитесь что так передавать такую информацию совсем не безопасно. Любой может открыть ваш браузер и начиная вводить адрес сайта он из истории может увидеть ваши пароли и логины.

    А вот если бы мы указали методом POST то мы бы получили следующий запрос:
    POST /login.php (login=Андрей&password=123) то что в скобочках было бы скрыто и никак не сохранено в браузере.

    Теперь другая ситуация например форма поиска. Мы вводим текст и получаем страницу с результатами. Вот тут уместнее GET форма. потому что нам было бы удобно сразу иметь ссылку на результат поиска, то есть добавить в строку запроса можно выразится "Публичные параметры", которыми можно поделиться. И как результат в строке браузера будет конкретная ссылка на текущую страницу. Мы можем ее скопировать, и разместить где-нибудь, или например скинуть другу. И получить при переходе одну и ту же страницу. А не просить других людей зайти на сайт и в поиск вбить определенную фразу чтобы получить необходимую страницу.

    В общем подводя итог:
    GET - это чтобы получить определенную страницу в определенном виде ( сортировка, текущая страница в блоге, строка поиска и т.п. ).
    POST - для оправки данных которые не влияют на отображение страницы, в том плане что эти данные влияют только на результат выполнения скрипта ( логины, пароли, номера кредиток, сообщения и т.п. ).

    И еще одна хорошая новость их можно комбинировать, например
    POST /index.php?page=login (login=Андрей&password=123) Думаю я уже достаточно объяснил что из этого получится и какие параметры в какой массив попадут.
    Ответ написан
  • Как отличить GET от POST запроса?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега Веб-разработка
    Как отличить по данному контексту задачки GET от POST запроса?

    У POST-запроса есть тело. В данном случае это login=Dima&password=12345.

    У GET-запроса тела нет и все параметры передаются через URL. Но параметры в URL - не эксклюзив GET-запросов, так тоже вполне можно:
    POST /auth.php?foo=bar HTTP/1.0
    Host: www.site.ru
    Content-Type: application/x-www-form-urlencoded
    Content-Length: 35
    login=Dima&password=12345

    И это будет POST-запрос.

    Имейте ввиду - такая формулировка не вполне соответствует спецификации, но проста для понимания и верна в 99.999% случаев на практике.

    GET больше 255 символов не содержит
    Это заблуждение. По спецификации ограничения по длине нет, фактически же в древних IE длина URL ограничивалась 2048 символами, в более современных браузерах можно ещё больше.
    Ответ написан
  • Как имитировать клик на jQuery/JS?

    mututunus
    @mututunus
    Backend developer (Python, Golang)
    setTimeout(function(){
      $('button').trigger('click');
    }, 1000);
    Ответ написан
  • Как правильно учить Javascript?

    IonDen
    @IonDen Куратор тега JavaScript
    JavaScript developer. IonDen.com
    Вы наверное слышали, что каждый уважающий себя программист обязан написать несколько велосипедов? И JavaScript-программисты тоже так делают и еще как! Так вот в этом нет ничего плохого, это отличное самообучение.

    Для начала заходите на любой каталог плагинов для JavaScript или jQuery. Находите интересный, не очень сложный на вид плагинчик (например карусель, лайтбокс, слайдер и т.п.) и пытаетесь сделать похожий, только лучше. Поначалу будет выходить черти что, но, это будет уже реальная задача, где вы начнете сталкиваться с реальными особенностями языка. Вот тут то знания и начнут обретать какую-то структуру у вас в голове.

    Если вы планируете будущее как фронтенд-специалист, и хотите писать код для браузеров, то рекомендую начать с изучения jQuery-фреймворка. Он поможет избежать лишних на данный момент заморочек с кроссбраузерностью. Наличие jQuery вовсе не отменяет знание JS, там все те же переменные, объекты, массивы, функции, циклы, условия и т.д.

    Не пытайтесь брать сразу сложные вещи, начинайте с малого. Как заметили выше, не смотрите пока что на очень сложные книжки, их читать сейчас почти бесполезно.
    Ответ написан
  • Как проверить не закрылось ли окно magnific Popup?

    zoozag
    @zoozag
    Opencart
    Из документации:

    $('.image-link').magnificPopup({
    // you may add other options here, e.g.:
    preloader: true,

    callbacks: {
    close: function() {
    // Will fire when popup is closed
    }
    // e.t.c.
    }
    });

    // Alternative method: using events
    // Name of event should start from `mfp` and the first letter should be uppercase.
    // e.g. 'open' becomes 'mfpOpen', 'beforeOpen' becomes 'mfpBeforeOpen'.
    $('.image-link').on('mfpClose', function(e /*, params */) {
    console.log('Popup closed', $.magnificPopup.instance);
    });
    Ответ написан
  • Интересная задача на JS?

    john36allTa
    @john36allTa
    That`s calling Walker
    Криво и возможно затролят, но набросал на скорую руку. Едет плавно.
    //Как такое сделать используя JS? Можно с jquery
    var box = document.getElementsByClassName('container')[0];
    setInterval(function(){
    	let baloon = box.getElementsByClassName('baloon')[0];
      let top = parseInt(getComputedStyle(baloon).marginTop);
      top = top ? top : 0;
      baloon.style.marginTop = top-1+'px';
      if (box.getElementsByClassName('baloon')[1].offsetTop <= 0){
      	box.removeChild(baloon);
        baloon.style.marginTop = 10 + 'px';
        box.getElementsByClassName('baloon')[0].style.marginTop = 0 + 'px';
        box.appendChild(baloon);
      }  
    }, 50)
    Ответ написан
  • Как просто выводить записи на отдельной странице Wordpress?

    HeadOnFire
    @HeadOnFire Куратор тега WordPress
    PHP, Laravel & WordPress Evangelist
    Если нужно на кастомной странице сделать кастомный вывод постов - тогда:

    1. Создать страницу, например, со слагом news
    2. Создать шаблон page-news.php
    3. Вывести посты в этом шаблоне:
    3.1. Сделать кастомный запрос с помощью new WP_Query, и только потом луп, или
    3.2. Через хук pre_get_posts модифицировать основной запрос (поскольку тут вместо 1 поста надо получить посты по определенным аргументам, то придется запрос перелопатить нормально)
    3.3. Если там не нужна пагинация и вообще просто десяток постов и все - тогда подойдет get_posts()
    Ответ написан