• Размещение балуна от метки справа, яндекс карты?

    Big_person
    @Big_person
    https://tech.yandex.ru/maps/jsbox/2.1/balloon_autopan

    Замените <div class="popover top">
    на <div class="popover right">
    и поправьте позиционирование:
    applyElementOffset: function () {
                        this._$element.css({
                            top: -(this._$element[0].offsetHeight/2)
                        });
                    },


    Конечный код:
    ymaps.ready(function () {
        // Создание экземпляра карты и его привязка к созданному контейнеру.
        var myMap = new ymaps.Map('map', {
                center: [55.751574, 37.573856],
                zoom: 9,
                behaviors: ['default', 'scrollZoom']
            }, {
                searchControlProvider: 'yandex#search'
            }),
    
        // Создание макета балуна на основе Twitter Bootstrap.
            MyBalloonLayout = ymaps.templateLayoutFactory.createClass(
                '<div class="popover right">' +
                    '<a class="close" href="#">&times;</a>' +
                    '<div class="arrow"></div>' +
                    '<div class="popover-inner">' +
                    '$[[options.contentLayout observeSize minWidth=235 maxWidth=235 maxHeight=350]]' +
                    '</div>' +
                    '</div>', {
                    /**
                     * Строит экземпляр макета на основе шаблона и добавляет его в родительский HTML-элемент.
                     * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/layout.templateBased.Base.xml#build
                     * @function
                     * @name build
                     */
                    build: function () {
                        this.constructor.superclass.build.call(this);
    
                        this._$element = $('.popover', this.getParentElement());
    
                        this.applyElementOffset();
    
                        this._$element.find('.close')
                            .on('click', $.proxy(this.onCloseClick, this));
                    },
    
                    /**
                     * Удаляет содержимое макета из DOM.
                     * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/layout.templateBased.Base.xml#clear
                     * @function
                     * @name clear
                     */
                    clear: function () {
                        this._$element.find('.close')
                            .off('click');
    
                        this.constructor.superclass.clear.call(this);
                    },
    
                    /**
                     * Метод будет вызван системой шаблонов АПИ при изменении размеров вложенного макета.
                     * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/IBalloonLayout.xml#event-userclose
                     * @function
                     * @name onSublayoutSizeChange
                     */
                    onSublayoutSizeChange: function () {
                        MyBalloonLayout.superclass.onSublayoutSizeChange.apply(this, arguments);
    
                        if(!this._isElement(this._$element)) {
                            return;
                        }
    
                        this.applyElementOffset();
    
                        this.events.fire('shapechange');
                    },
    
                    /**
                     * Сдвигаем балун, чтобы "хвостик" указывал на точку привязки.
                     * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/IBalloonLayout.xml#event-userclose
                     * @function
                     * @name applyElementOffset
                     */
                    applyElementOffset: function () {
                        this._$element.css({
                            top: -(this._$element[0].offsetHeight/2)
                        });
                    },
    
                    /**
                     * Закрывает балун при клике на крестик, кидая событие "userclose" на макете.
                     * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/IBalloonLayout.xml#event-userclose
                     * @function
                     * @name onCloseClick
                     */
                    onCloseClick: function (e) {
                        e.preventDefault();
    
                        this.events.fire('userclose');
                    },
    
                    /**
                     * Используется для автопозиционирования (balloonAutoPan).
                     * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/ILayout.xml#getClientBounds
                     * @function
                     * @name getClientBounds
                     * @returns {Number[][]} Координаты левого верхнего и правого нижнего углов шаблона относительно точки привязки.
                     */
                    getShape: function () {
                        if(!this._isElement(this._$element)) {
                            return MyBalloonLayout.superclass.getShape.call(this);
                        }
    
                        var position = this._$element.position();
    
                        return new ymaps.shape.Rectangle(new ymaps.geometry.pixel.Rectangle([
                            [position.left, position.top], [
                                position.left + this._$element[0].offsetWidth,
                                position.top + this._$element[0].offsetHeight + this._$element.find('.arrow')[0].offsetHeight
                            ]
                        ]));
                    },
    
                    /**
                     * Проверяем наличие элемента (в ИЕ и Опере его еще может не быть).
                     * @function
                     * @private
                     * @name _isElement
                     * @param {jQuery} [element] Элемент.
                     * @returns {Boolean} Флаг наличия.
                     */
                    _isElement: function (element) {
                        return element && element[0] && element.find('.arrow')[0];
                    }
                }),
    
        // Создание вложенного макета содержимого балуна.
            MyBalloonContentLayout = ymaps.templateLayoutFactory.createClass(
                '<h3 class="popover-title">$[properties.balloonHeader]</h3>' +
                    '<div class="popover-content">$[properties.balloonContent]</div>'
            ),
    
        // Создание метки с пользовательским макетом балуна.
            myPlacemark = window.myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
                balloonHeader: 'Заголовок балуна',
                balloonContent: 'Контент балуна'
            }, {
                balloonShadow: false,
                balloonLayout: MyBalloonLayout,
                balloonContentLayout: MyBalloonContentLayout,
                balloonPanelMaxMapArea: 0
                // Не скрываем иконку при открытом балуне.
                // hideIconOnBalloonOpen: false,
                // И дополнительно смещаем балун, для открытия над иконкой.
                // balloonOffset: [3, -40]
            });
    
        myMap.geoObjects.add(myPlacemark);
    });
    
    $(function () {
        $('#set-balloon-header').click(function () {
            window.myPlacemark.properties.set(
                'balloonHeader',
                'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
                    + 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
            );
        });
        $('#set-balloon-content').click(function () {
            window.myPlacemark.properties.set(
                'balloonContent',
                'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
                    + 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
            );
        });
    });
    Ответ написан
    Комментировать
  • Как исправить ошибку gulp-webp?

    @ozerovlife Автор вопроса
    Проблема решилась, не оставляйте тег img пустым и не будет у вас таких ошибок.
    Ответ написан
    1 комментарий
  • В чем разница между --save-dev и --save?

    k12th
    @k12th
    console.log(`You're pulling my leg, right?`);
    devDependencies — пакеты, которые нужны для разработки. Всякие галпы-гранты и плагины к ним обычно подпадают в эту категорию.
    dependencies — пакеты, от которых ваш пакет зависит непосредственно: как правило — библиотеки.
    Ставятся они все в node_modules.
    Тут подробнее: https://toster.ru/answer?answer_id=559717#comments...

    Если кто-то делает npm install вашему пакету, то npm подсосет те пакеты, которые указаны у него в dependencies, но не в devDependencies.
    Если сделать npm install внутри папки, в которой есть package.json, то установятся и те, и другие.
    Ответ написан
    3 комментария
  • Поговорим про ReactJS и BEM, JSX и BEMJSON?

    veged
    @veged
    Fais ce que dois, advienne, que pourra
    БЭМ методология хорошо совместима с React.js — есть https://github.com/bem/bem-react-core и несколько видео докладов (например: https://youtu.be/NyUxGqBEa3Q https://youtu.be/ztDWggzH8W4).
    Ответ написан
    Комментировать
  • Как использовать useStore, useSelector, useDispatch hook?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    1. useDispatch - получение функции store.dispatch в компоненте. Раньше для вызова action функциональный компонент приходилось оборачивать в вызов connect:
    const Foo = ({ dispatch }) => {
      const handler = useCallback(() => {
        dispatch(action());
      }, []);
    
      return (
        <Bar onClick={handler} />
      );
    };
    
    export default connect()(Foo);


    Сейчас:
    const Foo = () => {
      const dispatch = useDispatch();
    
      const handler = useCallback(() => {
        dispatch(action());
      }, []);
    
      return (
        <Bar onClick={handler} />
      );
    };
    
    export default Foo;


    2. useSelector - маппинг значения из store.
    Раньше:
    const Foo = ({ value }) => {
      return (
        <Bar value={value} />
      );
    };
    
    const mapStateToProps = state => ({
      value: state.value,
    });
    
    export default connect(mapStateToProps)(Foo);


    const Foo = () => {
      const value = useSelector(state => state.value);
    
      return (
        <Bar value={value} />
      );
    };
    
    export default Foo;


    3. useStore - получение store целиком:
    const valueSelector = state => state.value;
    
    const Foo = () => {
      const { dispatch, getState, subscribe } = useStore();
      const value = valueSelector(getState());
      
      useEffect(() => subscribe(console.log), []);
    
      const handler = useCallback(() => {
        dispatch(action());
      }, []);
    
      return (
        <Bar onClick={handler} value={value} />
      );
    };
    
    export default Foo;

    Вряд ли useStore вам, действительно, понадобится на практике.
    Ответ написан
    Комментировать
  • Как легко сложить время в javascript?

    var time1 = new Date('9.10.2014 8:45')
      , time2 = new Date(+time1 + 45 * 6e4); // => Thu Oct 09 2014 09:15:00
    Ответ написан
    3 комментария
  • В чем отличие между git push -u origin master и git push origin master? Зачем ключ -u для команды git push?

    EXL
    @EXL
    Энтузиаст
    В том случае, если ветка master (или branch_name) не является отслеживаемой веткой origin/master (или origin/branch_name), а вы хотите сделать её таковой.

    Выполнив команду git push -u origin master вы устанавливаете связь между той веткой, в которой вы находитесь и веткой master на удалённом сервере. Команду требуется выполнить единожды, чтобы потом можно было отправлять/принимать изменения лишь выполняя git push из ветки без указания всяких алиасов для сервера и удалённых веток. Это сделано для удобства.
    Ответ написан
    2 комментария
  • Что такое библиотека кода?

    SerafimArts
    @SerafimArts
    Senior Notepad Reader
    Ну фигачишь ты функцию, которая превращает строки в массив слов в этой строке. И нафигачил ты её настолько круто, что дали тебе премию на работе, а в отдельном тёмном уголке офиса поставили "Уголок Поклонению Делителю Строк". Даже включили в дайджест на хабре.

    Но есть одно "НО", тебе поручили писать новый проект, а ты без этой функции - как без воздуха, ну просто невозможно жить, через неё делятся строчки, выполняется код, покупаются акции Apple и управляются котики с помощью шапочек из фольги. Ну т.е. вообще никак.

    И решил ты её перетащить в другой проект. Но решил не с помощью Ctrl+C -> Ctrl+V, а по-хитрому, создал целый файл с исходным кодом. Так вот этот файл и есть библиотека.

    P.S. В ходе рассказа ни один котик не пострадал.

    P.P.S. Но потом конечно же ты опубликовал её в npm и назвал фреймворком, но это уже другая история...
    Ответ написан
    Комментировать
  • Есть ли возможность работать с JSX как с обычным html (возможно ли использовать emmet или что то подобное)?

    evgeniy8705
    @evgeniy8705 Автор вопроса
    Повелитель вселенной
    For atom

    // Open the keymap.cson file by clicking on Atom -> Keymap… in the menu bar
    // Add these lines of code to your keymap:
    
    'atom-text-editor[data-grammar~="jsx"]:not([mini])': 'tab': 'emmet:expand-abbreviation-with-tab'
    Ответ написан
    Комментировать
  • Как запускать модуль из командной строки одной командой?

    VIKINGVyksa
    @VIKINGVyksa Автор вопроса
    front-end developer
    Мною было найдено решение. Всё просто :)

    В package.json я добавил

    "preferGlobal": true,
    "bin": {
      "spp": "spp.js"
    },


    В начало файла spp.js (точка входа)

    #!/usr/bin/env node

    Далее создал ссылку с помощью

    npm link

    И всё, теперь я запускаю свой npm пакет просто вот так

    spp

    Вот здесь я нашёл как это делается, думаю под любую систему :)
    Ответ написан
    Комментировать
  • Чем отличается npm init от npm install?

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

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

    @sayapinant
    Нашел видеоуроки по canvas и змейке (два в одном). Вот первый урок, а вот второй — продолжение.
    Ответ написан
    Комментировать
  • JS Как узнать обновлена ли страница или нет?

    jMas
    @jMas
    Full stack developer
    Скорей всего необходимо выяснить - открывалась ли страница повторно?
    Вы можете сделать это с использованием Cookies или LocalStorage.
    Я бы предпочел LocalStorage.
    <script>
    if (window.localStorage) {
        var lastVisitTime = window.localStorage.getItem('last_visit_time');
        if (lastVisitTime) {
            alert('Вы обновили страницу, в последний раз страница была загружена: ' + lastVisitTime);
        }
        window.localStorage.setItem('last_visit_time', (new Date()).toString());
    }
    </script>

    Проверить можете здесь: https://jsfiddle.net/jmas/drr7713o/
    Ответ написан
    4 комментария
  • Что такое такое 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
    Ответ написан
    20 комментариев
  • Как объединить несколько изображений на странице в одно?

    TekVanDo
    @TekVanDo
    Javascript Developer
    Смотреть в сторону canvas, объединить можно примерно так.
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var imageObj1 = new Image();
    var imageObj2 = new Image();
    imageObj1.src = "1.png"
    imageObj1.onload = function() {
       ctx.drawImage(imageObj1, 0, 0, 328, 526);
       imageObj2.src = "2.png";
       imageObj2.onload = function() {
          ctx.drawImage(imageObj2, 15, 85, 300, 300);
          var img = c.toDataURL("image/png");
          document.write('<img src="' + img + '" width="328" height="526"/>');
       }
    };
    Ответ написан
    Комментировать
  • Как вставить изображение в canvas?

    freislot
    @freislot Автор вопроса
    Frontend-разработчик
    Решил
    var img = new Image();   // Создаём новый объект Image
    img.src = 'imgcss/wide.png'; // Устанавливаем путь к источнику
    context.drawImage(img, this.x, this.y, 50, 26); //рисуем картинку в канвас
    Ответ написан
    Комментировать
  • Console.log в Sublime Text, как использовать?

    Carduelis
    @Carduelis
    Web-developer, front-end, js, less
    Ты пишешь код в редакторе, а смотреть его должен в консоли developers tools в браузере.
    1. Нажми в браузере ctrl+shift+i, перейди во вкладку консоль и вставь туда свой код из Sublime, заработало?
    2. Если были ошибки, проверь код, где ошибка
    3. Если код сработал, посмотри, подключен ли .js-файл в .html-файл, тот ли файл ты открываешь.
    4. Можешь иногда (это вредный совет) пользоваться alert() вместо console.log();
    P.S.: Надеюсь, ты не тролль 80-lvl
    Ответ написан
    6 комментариев