Задать вопрос
  • Как реализовать анимацию появления нового сообщения?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Что у Вас не получается?
    1. Добавляете новый комментарий на страницу.
    2. После N-секунд меняете фон комментария
    https://jsfiddle.net/78wrnft3/7/

    Если надо менять фон когда пользователь промотал до комментария, то отслеживайте появление элемента во вьюпорте.
    1. Добавляете новый комментарий на страницу.
    2. На событие onscroll проверять позицию нового комментария относительно позиции прокрутки:
    Используйте плагин, если не понятно:
    - https://github.com/camwiegert/in-view
    - https://github.com/protonet/jquery.inview
    - или куча других
    // Пример с плагинов https://github.com/camwiegert/in-view
    // Строки 10 - 14 в примере выше
    inView('.newComment')
        .on('enter', function(){
             setTimeout(function() {
                   newComment.classList.remove('new');
             }, 3000);
        })
    });
    Ответ написан
    Комментировать
  • Как после анимации css скрыть блок от наведения (display:none) так чтобы это было красиво?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Задайте блоку: pointer-events: none; когда он скрыт. Когда он появляется pointer-events: auto;
    Ответ написан
    2 комментария
  • Как при выборе значения в одном select'е обновлять другой?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Вешаете событие change на первый select.
    first.addEventListener('change', function(e) {
      ....
    });

    И меняете у в2 select'а значение в зависимости от первого
    first.addEventListener('change', function(e) {
      // this.value - значение первого select'а
      second.querySelector('option[value=' + this.value + ']').selected = 'selected'
    });

    https://jsfiddle.net/5jLrk8qv/

    ps если надо пересоздать опции второго select'а, то https://jsfiddle.net/hc90j1g5/3/
    Ответ написан
    Комментировать
  • Как загрузить файл с компьютера в папку без php?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    А при чем тут PHP вообще???
    Вот функция в chrome extentions, которая отвечает за загрузку файла:
    chrome.downloads.download({url:url,filename:filename,saveAs: false},function() {
        console.log(chrome.runtime.lastError);
    });
    Ответ написан
    2 комментария
  • Влияет ли количество подключенного одного и того же скрипта на время запуска сайта?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Учитесь пользоваться консолью разработчика:
    5b730c88de12f107954279.png
    Только 1 раз подгружается JQ на сайте.
    Ответ написан
    1 комментарий
  • Что значит li[i].getElementsByTagName('a')[0]?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Если не знаете, что в переменной - выводите ее в консоль:
    console.log(li, "li"); // array of elements "li"
    for (var i = li.length - 1; i >= 0; i--) {
    	console.log(li[i], "li[i]"); // element with sequence number "i" in array "li"
    	console.log(li[i].getElementsByTagName('a'), "li[i].getElementsByTagName('a')"); // all <a> - elements in li[i]
    	console.log(li[i].getElementsByTagName('a')[0], "li[i].getElementsByTagName('a')[0]"); // first <a> - element in li[i]
    	let a = li[i].getElementsByTagName('a')[0];
    }
    Ответ написан
  • Как разместить картинки в определенном размере широкую и узкую одновременно?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    1. Задайте background'ом картинки
    2. Используйте polyfill для object-fit
    3. Через JS смоделируйте свойство object-fit: cover
    const images = document.querySelectorAll('img');
    
    images.forEach(function(img){
      // get image width: 'w' and height: 'h'
      // get list-product-item__img width: containerW, height: containerH
      // .....
      const imgAspect = w/h;
      const containerAspect = containerW/containerH;
    
    	if (containerAspect>imgAspect) {
        // set image width and height
    		img.style.width = containerW;
    		img.style.height = containerW / imgAspect;
    	} else {
        // set image width and height
    		img.style.height = containerH;
    		img.style.width = containerH * imgAspect;
    	}
    })
    Ответ написан
    Комментировать
  • Как сверстать полукруг в css?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Ответ написан
    Комментировать
  • Ваше мнение о верстке?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Совет: верстайте готовые макеты, которые найдете в интернете( freebies.flatro.ru/publications/category/landings ).
    Ибо когда Вы рисуете сами свой макет, то используете навыки\идеи, которые Вам известны(другие техники Вам просто еще не известны в угоду опыта). Используя чужой макет, Вы сталкиваетесь с проблемами, которых еще не знаете. Пусть то новая тень или косая линия заднего фона... + вы не дизайнер. Сможете избежать ужаса, который у Вас на сайте сейчас.

    со скидкой на то, что это моя вторая работа - ??? Вы ждете каких-то поблажек? Либо справляетесь с работой, либо нет. Вам нужны советы или просто красивые слова, что Ваша верстка норм? За в2 к маме и бабушке.

    По макету.
    Поздравляю! Вы научились использовать flex(нет. Вот Вам для изучения после понимания статьи - да). На этом Ваш макет заканчивается.
    1. Ваша верстка поедет на разных браузерах. Добавляйте префиксы или используйте другие свойства
    2. Перечитайте методологию БЭМ. Вам надо лучше понимать\отделять блоки по их назначению.
      • Секции special, about, menu... - это одинаковые блоки. Почему названия разные?
        Создайте section.row как делают бутстрапы всякие...
      • Заголовки секций в отдельный блок:
        5b660ab3ad040680058520.pngdiv.header(div::before), h2.header__title header__title--center/--right что-то такое...
      • И тд по всем элемента...

    3. Сбрасывайте дефолтные стили элементов:
      Список в nav имеет отступы, которые по-разному будут выглядеть. В footer'е поля ввода.
      5b6614412a5a7378575636.pngНе надо так делать. Вся форма чудно изначально сверстана(что это за отступы дикие?). Ее я повторно не смогу использовать на сайте - в этом суть БЭМ. Примеры форм Вот Ваша: делать по аналогии
    4. Это нормально?
      5b66092a90d32013859617.png
    5. Учитывайте размеры экрана при переносе элементов:
      5b660956a114a014366163.png
      Очевидно, что должно быть иначе. Надо добавить модификаторы(Смотреть пункт 1)
    6. ????
      5b660a4b1c236423898439.png
    7. Чем main-nav__item--active от обычного отличается? Зачем стили тогда к нему?
    8. Почему нет стилей для маленьких экранов?
    9. Иконки надо использовать svg формата + добавить их в спрайты
    10. Оптимизируйте изображения
    11. Оптимизируйте шрифты
    12. Начинайте изучать препроцессоры
    13. .....


    .... для начала хватит....

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

    ps не надо зацикливаться на 1 сайте. Не надо доводить его до идеала - идеала нет. Берите следующий макет и верстайте с учетом ошибок. С опытом будет проще называть элементы. Использовать figure в нужном месте и тд
    Ответ написан
    1 комментарий
  • Как сделать анимацию блоков при скроллинге на чистом js?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    1. Чтобы не слушать каждый раз какое-то событие(в Вашем случае scroll), нужно написать debounce функцию (вот отличное описание работы и сама функция). Которая является оберткой к Вашей функции onscroll , и не дает выполнять ее пока не пройдет N секунд.

    2. Вам нужно почитать про анимацию в css
    В краце: стили top, left, margin и тп затрачивают больше CPU потому, что браузеру нужно пересчитывать позицию всех элементов относительно анимированного. Если их большое кол., то и анимация будет дерганой.
    Поэтому стоит использовать ряд других стили: opacity, transform. Их свойства никак не влияют на остальные блоки.(в гугле много ссылок по этой теме. например)

    и не задавайте transition: all

    Теперь все вместе(накидал пример на Jsfiddle):
    1. Задам вашему блоку стили:
    .image{
      /* ваши стили */
      
      /* сдвигаем на 100px вниз и задаем прозрачность 0*/
      transform: translate3d(0, 100px, 0);
      opacity: 0;
      /* ******* */
      
      transition: opacity .3s, transform .3s;
    }
    .image.is-shown{
      /* возвращаем в обычное состояние */
      transform: translate3d(0, 0px, 0);
      opacity: 1;
    }


    const image = document.getElementById('image');
    const imageFromTop = image.getBoundingClientRect().top;
    
    const showOnScroll = debounce(function() {
    	// How much scroll from top
    	let scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
    	// Check scroll position
    	if (imageFromTop < scrollTop + 500) {
    		image.classList.add('is-shown')
    
    		// Remove this listener for better pref
    		window.removeEventListener('scroll', showOnScroll, false);
    	}
    }, 30);
    
    window.addEventListener('scroll', showOnScroll, false);
    
    function debounce(func, wait, immediate) {
    	var timeout;
    	return function() {
    		var context = this, args = arguments;
    		var later = function() {
    			timeout = null;
    			if (!immediate) func.apply(context, args);
    		};
    		var callNow = immediate && !timeout;
    		clearTimeout(timeout);
    		timeout = setTimeout(later, wait);
    		if (callNow) func.apply(context, args);
    	};
    };


    Писал по памяти, но должно работать...
    Это если применить Вашу логику к решению проблемы.

    В либах, вродь, делают через requestAnimationFrame . Можно посмотреть в исходниках(там и комменты есть). Вот хорошая scrollReveal
    Если будете сами писать через requestAnimationFrame, то не забывайте, что нужно использовать не больше 2-3 реквеста на страницу . Иначе будет грузить компьютер сильно
    Ответ написан
    Комментировать
  • Как сделать, что бы картинки были в центре своего DIV блока?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    https://jsfiddle.net/8x63gpLv/19/

    .cv-image {
      position: relative
    }
    .img1,
    .img2 {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%)
    }


    Удалить свойства left top на строках 59-60 и 65-66

    update
    не заметил про прокрутку
    const el = document.getElementById('image');
    const divOffset = offset(el);
    window.onscroll = stay;
    function stay() {
      var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
      el.style.top = divOffset.top + scrollTop + 'px'
    
    }
    
    function offset(el) {
        var rect = el.getBoundingClientRect(),
        scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
        scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
    }
    Ответ написан
    Комментировать
  • Как выучить front-end фреймворк?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Я так понимаю, что когда Вы начинали изучать JS, то сразу "как раба в воде"?
    Если так, то могу с большой уверенностью сказать, что Вы не знаете даже малость JS.

    Изучение той или иной технологии ничем не отличается. Читаете статьи\туториалы. Пишете свой код. Удаляете. Читаете статьи\. Пишете код... и тд.

    Сборщики проектов работают на nodeJS. Это JS. Вы с ним "знакомы" - значит ничего сложно не должно быть. Читаете доки и пишете функции, которые Вам надо
    https://www.npmjs.com/package/gulp - комментарии на каждой строчке. Куча плагинов, которые показано как подключать. Пробуйте писать свой простой сборщик, который препроцессоры собирает. Потом по необходимости будете добавлять модули. Или найдите чужой готовый сборщик и настройте под себя

    Можно посмотреть уроки по webpack'y:
    en - https://www.youtube.com/watch?v=aYo7YymudpE
    ru - https://www.youtube.com/watch?v=MRlBKfGktwI
    Анг. доступно рассказывает про технологию. По русскому ничего сказать не могу - не смотрел.
    Ответ написан
    Комментировать
  • Как наложить цвет на картинку?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Создайте блок поверх изображения, которому зададите прозрачность 60% и позицию absolute, чтобы он был поверх картинки
    jsfiddle.net/su0vgndx/3
    Ответ написан
    Комментировать
  • Как правильно запускать telegram бота на ssh сервере?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Вы когда терминал закрываете у себя на компьютере, то процесс, который был запущен в нем, завершается.
    Следовательно, Вам надо запустить bot в фоне. Способов куча... пусть будет screen
    sudo apt install screen
    screen -S mybot
    python3 bot.py
    Комбинация клавиш CTRL A затем D
    Можно закрывать терминал

    screen -r mybot - чтобы открыть при следующем входе
    Ответ написан
    Комментировать
  • Как удаленно подключиться к MongoDB?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    bindIp: 0.0.0.0
    На сервере заблокировать доступ к порту 27017 оставить только для Вашего IP
    Ответ написан
    2 комментария
  • Как установить pipenv на чистой системе lubuntu (на основе ubuntu 18.04)?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    А чем Вас не устраивает официальная документация?
    pip install pipenv
    Или через репозиторий:
    sudo apt install software-properties-common python-software-properties
    sudo add-apt-repository ppa:pypa/ppa
    sudo apt update
    sudo apt install pipenv


    pip install --user от pip install отличается местом установки.
    Если pip install установит куда-то сюда /usr/local/lib/python3.4, то pip install --user в домашнюю в директорию( ~/.local/ ). Следовательно, для pip install(возможно) понадобятся права суперпользователя - sudo pip install

    pip3 используется для установки пакетов для разных версий python (2 - 3)
    В Ubuntu(и иже с ними) из коробки установлены версии 2, 2.7, 3, 3.5
    Следовательно, если мы хотим использовать python3.*, то для установка пакетов надо использовать pip3, а для python2.* - pip
    Стоит отметить, что и установка pip для каждой версии python отличается:
    sudo apt install python3-pip 
    sudo apt install python-pip


    ps вся информация есть на офф сайте или используйте команду man или --help
    pip install --help
    где мы читаем:
    --user Install to the Python user install directory for your platform. Typically ~/.local/, or %APPDATA%\Python on
    Windows. (See the Python documentation for site.USER_BASE for full details.)


    psps не знаю почему Вы выбрали именно pipenv, если можно использовать virtualenv, который популярнее, проще для новичка:
    sudo apt-get update && sudo apt-get -y upgrade
    sudo apt-get install python3
    sudo apt-get install -y python3-pip
    pip3 install virtualenv
    
    mkdir django-apps
    cd django-apps 
    virtualenv env
    . env/bin/activate
    
    (env) sammy@ubuntu:$ pip install django
    (env) sammy@ubuntu:$ django-admin --version
    
    (env) sammy@ubuntu:$ django-admin startproject app


    Django установлен.
    Ответ написан
    Комментировать
  • Как изменить цвет элементу при пересечении экранов (при скролле)?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    Делается по аналогии с стики-меню. Только добавить несколько условий.

    Вам необходимо узнать:
    1) Значение секций относительно верха страницы:
    topPos = element.offsetTop
    2) Высоту секций:
    h = document.getElementById('A').clientHeight ||
    h = document.getElementById('A').offsetHeight ||
    h = document.getElementById('A').scrollHeight ||

    3) Позицию скролла:
    t = window.pageYOffset

    Отслеживать событие onscroll
    Составить условие:
    Если t между topPos(значение секции A) и topPos(значение секции A) + h(значение секции A), то меняем класс
    Если t между topPos(значение секции B) и topPos(значение секции B) + h(значение секции B), то меняем класс
    ....
    Чтобы на загружать в пустую процессор лучше добавить debounce'р для onscroll

    Или использовать уже готовые библиотеки:
    ScrollReveal
    Scrollmagic/
    Их много. Выбирайте, которая будет Вам больше подходить.
    Тут нужно будет поправить отступ, при которых должно срабатывать Ваше событие. И, возможно, само событие(ибо это обычно появление, а у Вас смена класса)
    Ответ написан
    Комментировать
  • Как извлечь картинку с сайта?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    1. Ctrl+shift+i (консоль разработчика) или правой кнопкой мыши по странице -> Исследовать (Inspect)
    2. Вкладка network
    3. В шапке выбрать img(изображения)
    4. Обновить страницу
    В ответ вы получите все изображения со страницы. и Вот ваша картинка
    Ответ написан
    8 комментариев
  • Два блока объединились. Как исправить?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    У Вас в строке 16 в css задана фиксированная ширина блока
    .logo {
      background: #000;
      /* width: 42px; удалить*/ 
      height: 42px;
      display: inline-block;
      margin-top: 14px;
    }
    Ответ написан
    2 комментария