• Как наложить цвет на картинку?

    alsolovyev
    @alsolovyev
    Создайте блок поверх изображения, которому зададите прозрачность 60% и позицию absolute, чтобы он был поверх картинки
    jsfiddle.net/su0vgndx/3
    Ответ написан
    Комментировать
  • Как правильно запускать telegram бота на ssh сервере?

    alsolovyev
    @alsolovyev
    Вы когда терминал закрываете у себя на компьютере, то процесс, который был запущен в нем, завершается.
    Следовательно, Вам надо запустить bot в фоне. Способов куча... пусть будет screen
    sudo apt install screen
    screen -S mybot
    python3 bot.py
    Комбинация клавиш CTRL A затем D
    Можно закрывать терминал

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

    alsolovyev
    @alsolovyev
    bindIp: 0.0.0.0
    На сервере заблокировать доступ к порту 27017 оставить только для Вашего IP
    Ответ написан
    2 комментария
  • Как установить pipenv на чистой системе lubuntu (на основе ubuntu 18.04)?

    alsolovyev
    @alsolovyev
    А чем Вас не устраивает официальная документация?
    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
    Делается по аналогии с стики-меню. Только добавить несколько условий.

    Вам необходимо узнать:
    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
    1. Ctrl+shift+i (консоль разработчика) или правой кнопкой мыши по странице -> Исследовать (Inspect)
    2. Вкладка network
    3. В шапке выбрать img(изображения)
    4. Обновить страницу
    В ответ вы получите все изображения со страницы. и Вот ваша картинка
    Ответ написан
    6 комментариев
  • Два блока объединились. Как исправить?

    alsolovyev
    @alsolovyev
    У Вас в строке 16 в css задана фиксированная ширина блока
    .logo {
      background: #000;
      /* width: 42px; удалить*/ 
      height: 42px;
      display: inline-block;
      margin-top: 14px;
    }
    Ответ написан
    2 комментария
  • Как сверстать(правильно) такое?

    alsolovyev
    @alsolovyev
    А в чем состоит задача? Наклонить блоки? transform: skewY(20deg) вполне справляется с этой задачей + поддержка браузерами есть + адаптивность решается % величинами

    Сразу извинюсь за говнокод (совсем худо чет мне сейчас), но для показа идеи сойдет: https://jsfiddle.net/ejoqLu7m/1/

    1. Создаете блок, который смещаете по оси Y на N градусов
    2. Внутри создаете блок, который смещаете по оси Y на -N градусов.
    3. Первому блоку задаете oveflow: hidden
    4. Вопрос адаптивности решаете шириной в % (50% в нашем примере)

    Адаптивно\кросбраузерно. В2 картинка по аналогии делается.

    Или я задачу не так понял?
    Ответ написан
    2 комментария
  • Как через JavaScript транслировать видео на TV?

    alsolovyev
    @alsolovyev
    Создаете html:
    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
      Your browser does not support the video tag.
    </video>

    поднимаете сервер на html://localhost:8080. Открываете на телевизоре адрес своего комьютера(что-то тип 192.168.0.240:8080 - смотреть настройки роутера). Смотрите.

    А если серьезно, то Вам, очевидно, нужен сервер, который будет отдавать файлы(это делают стандартные библиотеки в nodeJS):
    const http = require('http');
    const fs = require('fs');
    
    http.createServer(function(req, res) {
    	res.writeHead(200, {'Content-Type': 'video/mp4'});
    	var rs = fs.createReadStream('video.mp4');
    	rs.pipe(res);
    }).listen(8080);

    Запускаете сервер. Открываете на телевизоре адрес своего компьютера(что-то тип 192.168.0.240:8080 - смотреть настройки роутера). Смотрите.

    Теперь добавляете свой функционал: библиотека\кодировка\сортировка и тд
    Зачем это самому делать? Есть на php - Plex, есть на js(почти как у меня пример выше:) ) - куча своих велосипедов или классика

    ps сервис Youtube написан на python
    Ответ написан
    Комментировать
  • Как взять значения элемента?

    alsolovyev
    @alsolovyev
    Aleksandr_Markelov, если Вам нужно по клику взять значение у след. за ним блока, то все блоки в массив , а значение получаем у this index + 1
    Вариант 2: через jq метод .next()
    Вариант 3: добавить какой-то data-* и по нему определять нужный блок

    Ps но мне кажется, что вы изначально придумали какую-то "чудную"(матом нельзя) структуру и теперь пытаетесь с ней как-то/что-то делать.... ну или по простому - не надо гланды через ж**у вырезать

    Начинайте изучать проектирование или так и будете какой-то бред делать... мое имхо
    Ответ написан
    Комментировать
  • Как сверстать главный экран лендинга полукруглой области?

    alsolovyev
    @alsolovyev
    https://stackoverflow.com/questions/34354770/curve...
    В ответе представлены наиболее популярные способы реализовать сей круг.

    Я бы нарисовал svg и поместил прижатой к низу ибо кросбраузерно и больше контроля
    Ответ написан
    Комментировать
  • Как сделать сей декоративный элемент?

    alsolovyev
    @alsolovyev
    Куча способов есть от плевдо-элементов до background...
    Пусть будет самый тупорный: https://jsfiddle.net/aovpdwvz/2/
    Ответ написан
    Комментировать
  • Как удалить все одинаковые элементы из массива?

    alsolovyev
    @alsolovyev
    var newArr = arr.filter( function(i) {if(i!==8) return i} );
    //  или arr = arr.filter( function(i) {if(i!==8) return i} );
    console.log(newArr); // [20, 60, 40]
    Ответ написан
    4 комментария
  • Как сделать такое приложение?

    alsolovyev
    @alsolovyev
    А в чем проблема? Как Вы пытались решить эту проблему(написать в интернете "Решите мне задача" не считается)?

    Разделите конечную цель на маленькие:
    1. Создаете/рисуете точки
    2. Добавляете обработчик движения мыши
    3. Определяете дистанцию от мышки до точки ( теорема Пифагора )
    4. Увеличиваете/уменьшаете значение радиуса точки в зависимости от положения мыши

    Все! Самое сложное это теорема Пифагора(5-6 класс).
    Остается все разбросать по методам....

    Вот "наговнокодил" пример на коленках(использовал class поэтому поддержку браузера смотрите сами): https://codepen.io/janeRivas/full/NMGBvG/ (если лагает у Вас, то удалите функцию на строке 116 и 120 или поменяйте кол. точек на строке 18 )

    Если нужно уместить все точки в какой-то фигуре(букве), то поменяйте функцию Rand, добавив в нее новые условия.

    ps если как-то по-другому надо соединить линии между собой, то у нас на каждом кадре есть координаты точек this.pos.x и this.pos.y. Ну и меняй метод lineTo как тебе надо...

    psps наверно начинать надо с простого, но если делать нормально, то я бы делал на three.js или pixi.js. Логика точно такая же, только перфоманс будет в разы лучше + сможем избежать кучу проблем с картинками и тп...
    Ответ написан
    1 комментарий
  • Одинаковая ширина блоков?

    alsolovyev
    @alsolovyev
    Родителю - display: flex. Кнопкам - flex: 1
    https://jsfiddle.net/19zL1pey/1/
    Ответ написан
    Комментировать
  • Как сделать анимацию линии svg во всю высоту страницы при прокрутке?

    alsolovyev
    @alsolovyev
    Вот блок, который отвечает за анимацию линий:
    <div id="bg" class="" style="width: 100%; height: 7926.44px;">
      	<canvas id="mainBgC" width="1120" height="806" style="width: 1120px; height: 806px;"></canvas>
    	<canvas id="shinesBgC" width="1120" height="806" style="width: 1120px; height: 806px;"></canvas>
            <canvas id="animationC" width="1120" height="806" style="width: 1120px; height: 806px;"></canvas>
    </div>

    Как видно из html, тут не используется inline-svg. Поэтому Ваш подход изначально неправильный...

    Но если Вы хотите сделать такую линию на svg(тут будет мое имхо, которое не самое правильное(ибо это мазохизм такое делать так)), то я бы нарисовал всю svg-линию, которую поместил бы в div, который будет 100x100 вьюпорта(наверно нужно будет враппер какой-то). Спрятал бы svg (dashoffset etc). Отлавливаем скролл. Двигаем div в нужном направлении/ параллельно отрисовывая svg.
    Сразу можно сказать , что у Вас будут проблемы с адаптивностью(можно решить... но такое...) и fps

    А теперь как делают "нормальные ребята":
    Рисуем все в canvas. Полный контроль над всем. Никаких проблем с адаптивностью + 60 fps

    На данном сайте они вродь сами все js'ом рисовали в канвасе(анимировали gsap'ом) , но проще будет использовать PIXIjs или ThreeJS
    Ответ написан
  • Как загрузить текстуру на canvas при помощи PIXI.js?

    alsolovyev
    @alsolovyev
    В пикcи есть удобный PIXI.loaders
    const loader = PIXI.loader;
    
    loader
      .add('first', '1.jpg')
      .add('second', '2.jpg');
    
    loader.load((loader, resources) => {
      let scene = new PIXI.Container();
    
      let bg = new PIXI.Sprite(resources.first.texture);
    
      bg.anchor.x = 0.5;
      bg.anchor.y = 0.5;
      bg.position.x = renderer.width / 2; 
      bg.position.y = renderer.height / 2;
    
      scene.addChild(bg);
      renderer.render(scene);
    }
    Ответ написан
    Комментировать
  • Как правильно конвертировать шрифт?

    alsolovyev
    @alsolovyev
    https://www.fontsquirrel.com/tools/webfont-generator - это простой генератор на gulp(наверно) написанный. Он загружает файл. Имя файла без расширения помещает в название, полное имя файла помещает в url. На выходе и получаем Ваш код.

    Если хотите использовать один шрифт с разной "толщиной", то поменяйте название и font-weight
    @font-face {
        font-family: 'fira_sans';
        src: url('firasansbold.eot');
        src: url('firasansbold.eot?#iefix') format('embedded-opentype'),
             url('firasansbold.woff2') format('woff2'),
             url('firasansbold.woff') format('woff'),
             url('firasansbold.ttf') format('truetype'),
             url('firasansbold.svg#fira_sansbold') format('svg');
        font-weight: 700;
        font-style: normal;
    }
    @font-face {
        font-family: 'fira_sans';
        src: url('firasansregular.eot');
        src: url('firasansregular.eot?#iefix') format('embedded-opentype'),
             url('firasansregular.woff2') format('woff2'),
             url('firasansregular.woff') format('woff'),
             url('firasansregular.ttf') format('truetype'),
             url('firasansregular.svg#fira_sansregular') format('svg');
        font-weight: 400;
        font-style: normal;
    }

    Теперь можно использовать так:
    *{  
      font-family: "fira_sans";
    }
    .bold{
      font-weight: 700
    }
    .normal{
      font-weight: 400
    }


    ps или подключайте стандартные шрифты через fonts.google.com. Вот Fira Sans
    Ответ написан
    Комментировать
  • Как осуществить верстку, в которой настолько плавные переходы между страницами?

    alsolovyev
    @alsolovyev
    1. Если Вам нужен vanills JS, то используйте barbajs.org/transition.html
    Или любой из плагинов для jquery
    2. Дизайнер(моушен) рисует анимацию, Вы как верстальщик ее реализуете
    3. 5abc9021b49a2109119822.png
    У них на сайте просто сделали блоки разные и анимируют их(я бы делал в canvas - www.pixijs.com/)
    4. Да. Каждая страница является отдельной полноценной страницей со своим адресом, тегами и тд
    Ответ написан
    1 комментарий