• Какие IT-тусовки/мероприятия ожидаются осенью в Новосибирске?

    boratsagdiev
    @boratsagdiev
    Пользуясь случаем попиарю календарь событий по фронтенду от WST. К сожалению, Новосибирска там не заметил.
    Ответ написан
    Комментировать
  • Как вывести расстояние между двумя координатами, зная долготу и широту обоих?

    boratsagdiev
    @boratsagdiev
    geolib.getDistance
    https://github.com/manuelbieh/Geolib

    Или в конце-концов ответ из первой же ссылки по запросу js calculate distance between two coordinates

    function getDistanceFromLatLonInKm(lat1,lon1,lat2,lon2) {
      var R = 6371; // Radius of the earth in km
      var dLat = deg2rad(lat2-lat1);  // deg2rad below
      var dLon = deg2rad(lon2-lon1); 
      var a = 
        Math.sin(dLat/2) * Math.sin(dLat/2) +
        Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 
        Math.sin(dLon/2) * Math.sin(dLon/2)
        ; 
      var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
      var d = R * c; // Distance in km
      return d;
    }
    
    function deg2rad(deg) {
      return deg * (Math.PI/180)
    }
    
    const distanceMOWBKK = getDistanceFromLatLonInKm(
      55.45, 37.36, 13.45, 100.30
    )
    
    console.log(distanceMOWBKK);


    Посмотрите ответ и загуглите расстояние между Москвой и Бангкоком, считает верно.
    Ответ написан
    Комментировать
  • Как организовать взаимодействие не связных иерархически компонентов во vue2?

    boratsagdiev
    @boratsagdiev
    В случае не связанных иерархически (не имеющих общего родителя, например), можно использовать:
    1) Общий стор (vuex)
    2) Event Bus

    В случа однофайловых компонентов event bus это просто js-файл с содержимым:
    import Vue from 'vue';
    export const EventBus = new Vue();


    Например есть два компонента: карточка товара (где-то в середине страницы) и корзина (где-то в шапке):

    1) В обоих компонентах импортируем bus
    import { EventBus } from './event-bus.js';
    2) В компоненте карточки в вызове метода, например, addToCart:
    methods: {
    	addToCart: function() {
        	EventBus.$emit('add-to-cart', 1);
    	}
    }

    3) В корзине:
    EventBus.$on("add-to-cart", count => {
    	console.log(`Cart updated on ${count} items.`)
    })


    Как сделать так, чтобы эти компоненты появлялись только после взаимодействия с ними пользователя на прошлом шаге? (т.е 2 появляется после того как пользователь выбрал значение на первом и тд..)


    В случае приведенной вами иерархии:
    <App>
    	<StepOne></StepOne>
    	<StepTwo v-if="isListItemSelected"></StepTwo>
    	<StepThree v-if="isRangeShowing"></StepThree>
    </App>


    Можно вынести в data компонента App параметры isListItemSelected (значение выбрано из списка), isRangeShowing (показан ползунок) со значениями false по умолчанию (по поводу StepOne - непонятно из вопроса показан ли он изначально).

    В компоненте StepOne, как только пользователь выберет значение, можно делать $emit (без event-bus, потому что есть отношения родитель-потомок), в App ловить событие через $on и менять значение, в случае StepOne - isListItemSelected = true. То же самое и с остальными.

    Если надо что-то менять при перемещении ползунков - то когда из компонента с ними делаете $emit и меняете какие-то значения в родительском App - их можно спускать через props в следующий компонент:
    <StepThree v-if="isRangeShowing" :range="rangeValues"></StepThree>
    и не забыть указать в StepThree параметр props: ['range'].
    Ответ написан
    1 комментарий
  • Какие годные книги посоветуете?

    boratsagdiev
    @boratsagdiev
    Все книги You Don't Know JS.
    Ответ написан
    Комментировать
  • Как взаимодействует flask и vue-router?

    boratsagdiev
    @boratsagdiev
    Не очень понял, с какой именно проблемой вы столкнулись. Но наверное вам нужно все же использовать роуты vue-router'а, а не flask'а для навигации по SPA. А роуты flask'а оставить в покое как api endpoints.

    Возможно эта страница будет полезна - https://router.vuejs.org/ru/essentials/history-mod...
    Ответ написан
    Комментировать
  • Как через js вписать данные в обход обработчика vue?

    boratsagdiev
    @boratsagdiev
    Заглядывали в issues? Почему-то мне кажется это ваша проблема. Вроде бы есть и workaround, а вроде бы последний комментарий не воодушевляет :)
    Ответ написан
    1 комментарий
  • Почему не работает код на jQuery?

    boratsagdiev
    @boratsagdiev
    Так 200 у вас - это duration, продолжительность анимации, а не задержка.

    Попробуйте добавить метод delay:
    $("#bg1").parent().addClass("bg3").stop().delay(1000).animate({backgroundPosition:"(0 0)"},200);


    (не спец в методах jquery, может его надо добавить после .stop())

    UPD: самофикс, да, надо после .stop(). Сделал пример.
    Ответ написан
  • Как корректно вывести время из MongoDB?

    boratsagdiev
    @boratsagdiev
    Может это?
    https://docs.mongodb.com/manual/reference/method/Date/


    Return Date as Date Object

    The mongo shell wrap objects of Date type with the ISODate helper; however, the objects remain of type Date.

    The following example uses new Date() to return Date object with the specified UTC datetime.

    var myDate = new Date("2016-05-18T16:00:00Z");


    moment.js'ом можете обработать даты после получения из базы, смотря вообще где вам нужно эти корректные даты отобразить. Можно и на клиенте.
    Ответ написан
  • Как лучше всего использовать вложенные лупы?

    boratsagdiev
    @boratsagdiev
    Для полного flat'а вложенных массивов:

    const flattenArr = (arr) => {
    
    	const flatArray = [];
    	const parseArray = (arr) => {
    		arr.forEach(item => Array.isArray(item) ? parseArray(item) : flatArray.push(item))
    	}
    	parseArray(arr)
    
    	return flatArray
    }


    jsbin.com/guyisequwa/edit?js,console
    Ответ написан
    Комментировать
  • Какие OpenSource проекты на данный момент активны?

    boratsagdiev
    @boratsagdiev
    webpack
    Ответ написан
    Комментировать
  • Где найти такой эффект?

    boratsagdiev
    @boratsagdiev
    Суть в том, что слой видео внутри кнопки, и оно там под ней проигрывается постоянно, как я понял, только без звука. Изначально у кнопки ширина 110x110px и красный бэкграунд, при наведении бэкграунд уходит и ей задаются размеры 2300x2300 с
    transition:width 6s cubic-bezier(.55,.055,.675,.19),height 6s cubic-bezier(.55,.055,.675,.19)


    В общем, в течении 6 секунд ширина и высота равномерно расширяются. Структура там сложная, ковыряться точнее уже поздно, сделал вам простейший пример на css.
    Ответ написан
    Комментировать
  • Чем отличается npm init от npm install?

    boratsagdiev
    @boratsagdiev
    npm init задаёт вам разные вопросы и создает package.json, который определяет настройки проекта, зависимости, скрипты, название и прочее.
    npm install [module] устанавливает модуль с именем module.

    То есть, чтобы начать работу, сначала вам нужно сделать npm init (можно с опцией --yes, которая установит на все вопросы дефолтные ответы), а потом уже устанавливать модули командой npm install
    Ответ написан
    9 комментариев
  • Как сделать обнуление value инпутов средством указания границ каких именно нужно обнулить?

    boratsagdiev
    @boratsagdiev
    Вот так.

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
      <input type="text" class="field-na na-1" placeholder="na1" size="1" value="1">
      <input type="text" class="field-na na-2" placeholder="na2" size="1" value="4">
      <input type="text" class="field-na na-3" placeholder="na3" size="1" value="6">
      <input type="text" class="field-na na-4" placeholder="na4" size="1" value="7">
      <button class="field-recalc">Пересчитать</button>
      <br>
      <br>
      <input type="text" placeholder="1" size="1" value="1" class="field-to-change">
      <input type="text" placeholder="2" size="1" value="1" class="field-to-change">
      <input type="text" placeholder="3" size="1" value="1" class="field-to-change">
      <input type="text" placeholder="4" size="1" value="1" class="field-to-change">
      <input type="text" placeholder="5" size="1" value="1" class="field-to-change">
      <input type="text" placeholder="6" size="1" value="1" class="field-to-change">
      <input type="text" placeholder="7" size="1" value="1" class="field-to-change">
    
      <script src="index.js"></script>
    </body>
    </html>


    const calculateFields = () => {
    
      const getFieldValue = (className, idx) => {
        const value = document.querySelectorAll(className)[idx].value;
        return Number(value)
      }
    
      const fields = {
        na1: getFieldValue('.field-na', 0),
        na2: getFieldValue('.field-na', 1),
        na3: getFieldValue('.field-na', 2),
        na4: getFieldValue('.field-na', 3),
      }
    
      const countRange = (start, end) => {
        let range = [];
    
        for(let i = start; i <= end; i++) {
          range.push(i - 1)
        }
    
        return range
      }
    
      const firstRange = countRange(fields.na1, fields.na2);
      const secondRange = countRange(fields.na3, fields.na4);
    
      return Array.prototype.forEach.call(document.querySelectorAll('.field-to-change'), (elem, index)=>{
        if(firstRange.indexOf(index) > -1 || secondRange.indexOf(index) > -1) {
          elem.value = 0
        }
      })
    }
    
    document.querySelectorAll('.field-recalc')[0].addEventListener('click', () => {
      calculateFields()
    })
    
    // document.addEventListener('DOMContentLoaded', () => {
    //   calculateFields();
    // })


    Если нужно пересчитать при загрузке страницы, то раскомментируйте код с event listener'ом для DOMContentLoaded и закомментируйте для клика.
    Ответ написан
    2 комментария
  • Как работать с callback и необязательными параметрами в JS?

    boratsagdiev
    @boratsagdiev
    Я сейчас обычно использую подобную запись:

    function doSomething({ one, two = "two", callback = null, ...args } = {}) {
      // some function shite
    
      if (args.anotherParam) {
        callback(two);
      } else {
        callback(one);
      }
    }
    
    doSomething({
      one: "notSoOne",
      callback: console.log,
      anotherParam: "mmmmmmhhhmm"
    });
    Ответ написан
    Комментировать
  • Как сделать анимацию при переходе во vue?

    boratsagdiev
    @boratsagdiev
    Вам нужен раздел Анимационные эффекты переходов из документации, в частности пункт про классы переходов.

    v-enter-active и v-leave-active дают возможность указать различные анимационные эффекты для переходов появления и исчезновения элемента.


    Суть в том, что вам надо описать анимацию появления, исчезновения и промежуточных стадий компонента специальными классами, которых всего 6. Если ваша анимация называется fade, то имена классов будут: fade-enter-active, fade-leave-active и т.д.

    Возьмите какой-нибудь готовый пример (или модифицируйте свой) и поковыряйте css-свойства в нём, потренируйтесь.

    Вот есть хороший пример.
    Ответ написан
    Комментировать
  • Как правильно объединить данные для нескольких компонентов?

    boratsagdiev
    @boratsagdiev
    А как вы data потомкам показывали? Передавайте его через props каждому из них.

    <div class="view">
        <post-form :posts="posts" />
        <post-list :posts="posts" />
    </div>


    В каждом из компонентов не забыть указать свойство
    props: ['posts']
    Ответ написан
    Комментировать
  • Изменение расширения изображения с помощью jquery?

    boratsagdiev
    @boratsagdiev
    Хотел пошутить, что для этой задачи лучше выучить Хаскелл...но ладно.

    $('.data-img').on('click', function() {
      this.src = this.src.replace('.gif', '.jpg')
    })

    Или чуть надежней с регуляркой
    $('.data-img').on('click', function() {
      this.src = this.src.replace(/\.gif$/i, '.jpg')
    })
    Ответ написан
  • Как правильно настроить роутинг(Express, vue)?

    boratsagdiev
    @boratsagdiev
    Совмещать можно. Вам нужен этот модуль https://www.npmjs.com/package/express-history-api-... настроить с помощью него fallback с /page/:id на index.html (через который работает vue).

    То же самое можно сделать через веб-сервер (nginx, apache), но раз у вас уже express, сделайте через него. Подробнее тут:

    https://router.vuejs.org/ru/essentials/history-mod...
    Ответ написан
    Комментировать
  • Что не так с моей функцией?

    boratsagdiev
    @boratsagdiev
    м?

    whoisForm.onsubmit = function(event) {
                    event.preventDefault();
                    $('https://kulonful.ru/whois/' + $('#ipWhois').val(), function(data) {
                        $('#load').html('<div style="font-size=12px">' + data + '</div>');
                        return false;
                    });
                    return false;
                };
    Ответ написан
    Комментировать
  • Как решить ситуацию с слайдером?

    boratsagdiev
    @boratsagdiev
    В гугле есть пара решений по запросу bxslider captions outside slider (раз, два).

    Вкратце, сделать отдельный блок bxSlider'а для caption'ов, там где вам нужно снаружи слайдера, и использовать методы callback API слайдера (onSlideBefore, onSlideLoad).

    В частности вот код, который синхронизирует блок слайдов с блоком текста из первой ссылки:
    <script>
        var bx = $('.bxslider').bxSlider({
          auto: true,
          infiniteLoop: true,
          pager: false,
          controls: true,
          pause: 5000,
          onSlideBefore: syncTextSlider
        });
    
        var cx = $("#slider-text").bxSlider({
          infiniteLoop: true,
          pager: false,
          controls: false
        });
    
        function syncTextSlider($ele, from, to) {
          cx.goToSlide(to);
        }
      </script>


    То есть при нажатии на кнопку следующего слайда (или в целом - перед каждым слайдом) - вызывается функция syncTextSlider, в которой вызывается метод текстового слайда goToSlide. Как написано там же ниже в комментарии, можно просто использовать метод goToNextSlide.
    Ответ написан
    Комментировать