• Как обновить точки в кластере Яндекс Карт API 3?

    freeExec
    @freeExec
    Участник OpenStreetMap
    Передавать надо geojson, а не координаты
    -features: coordinates2,
    +features: points,
    Ответ написан
    4 комментария
  • Как корректно спарсить markdown, приходящий с сервера?

    Stalker_RED
    @Stalker_RED
    Возможно приходит \n в виде двух символов, слеша и буквы n. Тогда split("\\n").join("\n"), ну или replaceAll, если угодно.
    Ответ написан
    1 комментарий
  • Как использовать typescript в шаблоне Vue 2?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Vue 2 не даёт использовать произвольный код в шаблонах, там код компилируется вместе с самим шаблоном отдельно от всей твоей системы сборки.

    В теории можно подсунуть свои обработчики в компилятор, но на практике когда до этого дошло и я начал рыть в эту сторону - появился vue 3 и я забил. Можешь порыть и забить и ты.:)

    В любом случае тайпкасты в шаблоне - моветон, пофикси изначальные типы и всё будет нормально. Ну или по-хардокору можно отрубить тайпчек в шаблонах в IDE.:)

    Использование методов\функций в шаблоне - тоже весьма плохо, и так делать крайне на рекомендуется: подготовь все данные в compunted и отдавай в шаблон только чистые и удобные для него(шаблона) данные.
    Если это сделать кажется сложно, то с большой вероятностью вы неправильно используете vue: в vue надо разбивать всё на минимальные компоненты(пусть даже в пяток строк), вот и тут разбейте на подкомпоненты и всё снова станет просто и приятно.

    А на богомерзкий jsx не переходи, а то те, кто после тебя проект продолжит, могут тебе и глаз подбить.:)
    Ответ написан
    Комментировать
  • Какие проблем решает DI во фреймворках типа Vue?

    @shimarulin
    Software Engineer
    Ну может просто Inverify будет излишним во Vue3?

    Суть инверсии управления (Inversion Of Control, IoC) заключается в том, что класс передает контроль (читай: ответственность) за создание зависимых экземпляров, которые нужны классу, контейнеру, который вместо этого предоставит им эти экземпляры. Одной из реализаций инверсии управления в применении к управлению зависимостями является внедрение зависимостей (Dependency Injection, DI). Inverify реализует инверсию управления и, из того, что я видел и трогал, изредка использовался с Vue2 через Class API (который реализуется сторонними библиотеками). Там использование подобного подхода оправдано тем, что с инкапсуляцией частей логики, шарингом кода и менеджментом состояний все непросто, так как нехватает адекватных механизмов для этого. Эти проблемы в свое время привели к старту разработки принципиально нового фреймворка под названием... Vue3) В процессе рассматривали Class API и Composition API, Composition API победил и вошел в релиз, а Option API достался нам по историческим причинам (ну нельзя так просто взять и заявить, что половину опыта разработчикам стоит выкинуть в мусорное ведро).

    Итак, у нас есть Vue3 и Composition API. Без классов. Только setup-функция и useЧтоТоТам кусочки логики. Что мы имеем с этого? Мы можем вынести определенную часть логики в use-функцию. Внутри use-функции может происходить что угодно - мы импортируем только результат в виде ref-ов и функций (назовем их actions-функции). То есть use-функция отвечает за создание зависимых экземпляров, которые нужны компоненту, то есть выполняет функцию DI. Также use-функция может использовать другие use-функции. Все это значительно расширяет возможности декомпозиции, повторного использования кода, и уменьшает зацепление, для чего Inverify и предназначается. Пожалуй, единственный кейс, который мне с ходу удалось придумать для использования Inverify с Vue3 - это когда мы знаем, что будем использовать нашу логику в различных приложениях и средах с различными библиотеками рендеринга (Vue3, React, и т.п.). Но для каждого приложения в отдельности это будет дороже, поэтому стоит дважды подумать, стоит ли игра свеч и нет ли более простых путей.

    Что касается стейт-менеджмента, то Composition API тут тоже самодостаточен, когда приложение небольшое и рендерится на клиенте. Достаточно использовать замыкание и глобальный стейт готов. Pinia помогает с SSR и отображением состояния в дев-тулзах, библиотека удобна для более крупных проектов. При написании сторов внутри все пишется точно так же, как если бы использовался голый Composition API, да и в приложении используется практически так же (за исключением использования нескольких встроенных методов). Поэтому простенькое MVP-приложение очень просто перевести со сторов на use-функциях на использование Pinia. Vuex сейчас смысла особого использовать не вижу, теряется удобство и консистентность использования.

    В разговоре о DI нельзя также не упомянуть https://vuejs.org/guide/components/provide-inject.html. Его можно использовать при разработке декларативных библиотек компонентов, но это такая штука, которая может неочевидно выстрелить в ногу, использовать следует с осторожностью.

    Итого, на мой взгляд, использование Inverify с Vue3 избыточно и усложняет написание кода. Грамотное использование Composition API, Pinia (при необходимости), декларирование интерфейсов (если используется TS) и соблюдение принципа инверсии зависимостей решает все эти проблемы.
    Ответ написан
    Комментировать
  • Где опубликовать игру если тебе 12?

    SagePtr
    @SagePtr
    Еда - это святое
    На https://itch.io/ можно выложить, с него часто начинают различные инди-экспериментаторы
    Ответ написан
    Комментировать
  • Как реализовать такой блок?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    1 комментарий
  • Как отправить данные на сервер с Ajax на чистом JavaScript?

    @zkrvndm
    Софт для автоматизации
    Отправку данных делаете так:
    spoiler
    // Ждем когда элементы на странице прогрузятся:
    
    document.addEventListener('DOMContentLoaded', function() {
    
    	// Вешаем на кпопку обработчик клика, чтобы при каждом клике
    	// сразу запускалась функц я dataSend отвечающая за отправку данных:
    	
    	document.querySelector('.button').addEventListener('click', dataSend);
    	
    });
    
    // Функция для отправки данных на сервер:
    
    async function dataSend() {
    
    	// Получаем данные с нужных нам полей в переменные:
    	
    	var loginValue = document.querySelector('.login').value
    	var emailValue = document.querySelector('.email').value
    	var passwordValue = document.querySelector('.password').value
    	var conf_passwordValue = document.querySelector('.conf_password').value
    
    	// Создаем объект с данными:
    
    	var data = {
    		'login': loginValue,
    		'email': emailValue,
    		'password': passwordValue,
    		'conf_password': conf_passwordValue
    	}
    
    	// Конвертируем объект в JSON:
    
    	var json = JSON.stringify(data);
    
    	// Отправялеям полученный JSON на сервер обычным POST-запросом:
    
    	var response = await (await fetch('https://yousite.ru/handler.php', {
    		'method': 'POST',
    		'headers': {
    			'Content-Type': 'application/json; charset=utf-8'
    		},
    		'body': json
    	})).text();
    
    	// Выводим ответ сервера в консоли:
    
    	console.log('Ответ сервера:');
    	console.log(response);
    
    }

    Замените только ссылку на php-обработчик на свой. Далее, принимать данные отправленные, как JSON надо по другому. Пример получения данных отправленных, как JSON:
    spoiler
    <?php
    
    // Включим показ ошибок:
    
    ini_set('error_reporting', E_ALL);
    ini_set('display_errors', 1);
    ini_set('display_startup_errors', 1);
    
    // Считываем полученный JSON:
    
    $json = file_get_contents('php://input');
    
    // Раскодируем JSON в массив:
    
    $array = json_decode($json, true);
    
    // Выведем массив, чтобы посмотиеть, что в нем:
    
    header('Content-Type: text/plain; charset=UTF-8'); // Указыавем браузеру, что ответ будет обычным текстом
    echo "Из браузера получены следующие данные:\n"; // Выведем текст-предупреждение
    print_r($array); // Выведем все, что находится в массиве
    Ответ написан
    7 комментариев
  • Как отфильтровать объект по ключам?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const pick = (obj, keys) => Object.fromEntries(keys.map(k => [ k, obj[k] ]));
    
    const newArr = arr.map(n => pick(n, keys));

    Если в элементах arr присутствуют не все keys, и в элементах результирующего массива изначально отсутствующие появится не должны, тогда

    const pick = (obj, keys) =>
      Object.fromEntries(Object.entries(obj).filter(m => keys.includes(m[0])));
    
    // или
    
    const pick = (obj, keys) =>
      keys.reduce((acc, n) => (obj.hasOwnProperty(n) && (acc[n] = obj[n]), acc), {});
    Ответ написан
    1 комментарий
  • Как сравнить два массива в js?

    Stalker_RED
    @Stalker_RED
    Обновил ответ, старая реализация была с багом.
    function diff(a1, a2) {
        return a1.filter(i=>a2.indexOf(i)<0)
        .concat(a2.filter(i=>a1.indexOf(i)<0))
    }
    function compare(a1, a2) {
        return a1.length == a2.length && a1.every((v,i)=>v === a2[i])
    }

    jsfiddle.net/Stalk/7h5ahq5k/2

    upd: в ES7 (2016) появился метод includes
    const diff = function(a1, a2) {
        return a1.filter(i=>!a2.includes(i))
        .concat(a2.filter(i=>!a1.includes(i)))
    }
    https://jsfiddle.net/Stalk/7h5ahq5k/9/
    Ответ написан
    2 комментария
  • Как решить Parsing Error в ESLint?

    @twolegs
    Полагаю, что приведение парсится криво (особенно если в этом же файле есть темплейт).

    Предлагаю переписать так:
    (this.$refs.fileInput as HTMLElement).click()
    Ответ написан
    2 комментария
  • Git. Случайно удалил локальный файл, как восстановить?

    isqua
    @isqua
    Научу HTML, CSS, JS, BEM и Git
    Если состояние такое:
    $ git status
    
    On branch master
    Changes not staged for commit:
      (use "git add/rm <file>..." to update what will be committed)
      (use "git checkout -- <file>..." to discard changes in working directory)
    
    	deleted:    myfile


    То файл можно восстановить вот так:

    git checkout myfile

    Чтобы восстановить файл из конкретного коммита или ветки, можно сделать вот так:

    git checkout abcde myfile # abcde — хеш коммита
    # или
    git checkout feature3 myfile # feature3 — имя ветки
    Ответ написан
    2 комментария
  • Почему TypeScript не допускает методы DOM элементов для Vue Ref'ов?

    yarkov
    @yarkov Куратор тега Vue.js
    Помог ответ? Отметь решением.
    Property 'scrollTo' does not exist on type 'Vue | Element | Vue[] | Element[]'

    Ну так всё же написано )) Тип рефа Vue | Element | Vue[] | Element[]
    Если точно знаете что это за элемент, то попробуйте так:
    (this.$refs.list as HTMLDivElement).scrollTo(0, 0)
    Ответ написан
    2 комментария
  • Как экранировать символы в сообщениях WebSocket?

    @rPman
    значения параметров http get, т.е. твой username, должны быть кодированы с помощью encodeURI
    Ответ написан
    Комментировать
  • Как реализовать обновление токена на Nuxt/Vue?

    Делал через axios и общий обработчик, в случае не рабочего токена, отправлял ошибку вида 405 (для примера). На фронте, на эту ошибку ставил действия отправки refresh token, если он ошибочный выкидывал из системы. Если ок, то обновлял access token и делал запрос снова.

    https://axios.nuxtjs.org/extend
    Ответ написан
    1 комментарий
  • Breadcrumbs на nuxt.js?

    @grinat
    <template lang="pug">
      div.breadcrumbs
        router-link(
          v-for="link, i in breadcrumbsLinks"
          :key="i"
          :to="link"
        ).breadcrumps__level {{link.meta.title}}
    </template>
    
    <script>
      export default {
        name: 'breadcrumbs',
        computed: {
          breadcrumbsLinks () {
            let tmp = []
            if (this.$route.matched) {
              this.$route.matched.forEach(link => {
                tmp.push(Object.assign({meta: {title: 'Title not found in meta'}}, link))
              })
            }
            if (tmp.length === 0) {
              tmp.push({path: '/', meta: {title: 'Home'}})
            }
            return tmp
          }
        }
      }
    </script>
    Ответ написан
    3 комментария
  • Vue.js + Wordpress?

    @FullStackAlex Автор вопроса
    Веб-разработчик, электрик, кочевник
    Наконец таки я решил все технические вопросы для внедрения Vue.js в WordPress-Workflow. Долго я к этому шёл. Трудно было совместить freelancing на основе WordPress и WooCommerce и одновременно самообучение Symfony и Vue.js и создание первых реальных проектов на их основе. Но создание первого большого проекта на основе headless Symfony 4 (JSON API) и потребителя на основе Vue.js меня хорошо продвинуло вперед в направлении внедрения Vue.js в WordPress. Почему мне так интересен WordPress/WooCommerce умея делать Backend на основе Symfony? Потому что WordPress делает доступным веб технологии и маленьким клиентам по "демократическим" ценам, при этом всё ещё позволяя фрилансеру хорошо заработать (по крайней мере в Берлине, где я проживаю).

    Так как путь сюда до сих пор никем в интернете детально не описан и я угрохал недели если не месяцы на решение этой задачи прочитывая все статьи и docs с этой темой связанные (освоил для этого даже наконец таки Docker и Nginx и углубил знания в настройке Webpack) и пройдя многие не верные пути (vue-cli, nuxt.js) - я решил создать в течении следующих недель курс на Udemy.com на английском за 20 баксов. Если будет тут достаточно интереса (хотя бы лайков 10 ), то сделаю туториал и на русском. Курс будет содержать настройки Webpack, Docker (optional), Apache/Nginx. Моё решение сохраняет в отличии от nuxt.js все преимущества как WordPress так и Vue.js при этом соблюдая "законы" SEO и Social Marketing (Twitter Cards, Facebook Open Graph итп) и самое главное Hot Module Replacement с PHP/WordPress Templates!!!!!! .
    Я очень разочарован Nuxt.js и расскажу в Tutorial почему он далеко не во всех случаях технически годен и почему с точки зрения open source этот проект не оптимальный исходя из моего личного опыта.

    UPDATE 15.05.2019
    К сожалению руки до туториала так и не дошли. Но создал Github Repo с простым Starter Theme.
    Демо можно тут просмотреть: wue-theme.app
    Пока без доскональной документации. Надеюсь к концу месяца создам.
    Приколы темы:
    -Hot Module Replacement с PHP файлами (если только это интересно можно и тут скачать Webpack config)
    -полная поддержка SEO без Server Side Rendering (SSR). Реализуется это за счёт загрузки данных вместе с HTML в глобальном JS объекте "technomad", вместо дополнительного AJAX-запроса, что не поддерживается гуглом и для чего и нужны все прибамбасы типа Nuxt.js и phpv8/v8js.
    -элементы меню и новости автоматически добавляются через WordPress-Backend.
    -тема устонавливается как и любая другая тема без каких либо дополнительных настроек сервера (нужно скачать всю Repository и скомпремировать "wuetheme" папку в ZIP и тогда можно просто загружать как и обычную тему).
    -Github Repo без данных из демонстрации. Может ещё добавлю функцию установки демо данных.
    -сервер демо во Франкфурте без CDN. Так что во Владивостоке загрузка наверное немного дольше длится будет)) Из Берлина за 600-700ms загружается с VPS.
    -есть ещё много над чем работать (pagination, проверка загруженны ли скрипты и стили плагинов при Ajax route change, пока они загружаются только при инициальной загрузки, но скрипты и стили могут быть на каждой странице иные) , нo даже в данном виде эта тема на сколько я знаю уникальная.
    -тут можно проследить прогресс перестройки моего сайта с этой темой: stage.alexfullstack.dev, там больше клёвых анимаций))
    Пока всё. Have fun :)

    Update 30.05.2019
    Много чего обновил на Github.

    Update 02.06.2019
    Я решил вчерашнюю проблему)))
    Нужно было просто выспаться))
    Завтра подробно опишу и обновлю Github Repo.

    Update 03.06.2019
    -загрузил на Github новую "bulletproof SEO" версию с "Dynamic Rendering Implementation"
    -подробная статья тут

    Update 14.06.2019
    Перенёс сайт на wue-theme.app.
    Демонстрация Github версии тут: starter.wue-theme.app
    Добавил простую Load More Pagination и очистил код.
    Ответ написан
    21 комментарий
  • Можно ли ограничить доступ к разделам меню в админ панели wordpress?

    OtshelnikFm
    @OtshelnikFm Куратор тега WordPress
    Обо мне расскажет yawncato.com
    Плагины ролей.
    ищи wordpress roles and capabilities plugin
    Ответ написан
    Комментировать
  • Как поймать focus на input во vue.js?

    0xD34F
    @0xD34F Куратор тега Vue.js
    data: () => ({
      focused: false,
    }),

    <input @focus="focused = true" @blur="focused = false">
    <span v-show="focused">FOCUSED</span>

    https://jsfiddle.net/mc69wnwu/
    Ответ написан
    Комментировать
  • Как правильно инициализировать Яндекс Карты API во Vue?

    Kozack
    @Kozack Куратор тега Vue.js
    Thinking about a11y
    Попробуйте подключать скрипт Яндекса в момент инициализации компонента. А метод yaMapInit запускать уже после того как этот скрипт загрузится.

    Дополнительно стоит предусмотреть удаление скрипта, при удалении компонента.

    Пример:
    created() { // или даже beforeCreated()
      const script = document.createElement('script')
      
      script.onload = () => {
        ymaps.ready(() => this.yaMapInit());
        // или
        // this.yaMapInit()
      };
      
      script.id = 'ymaps'
      script.src = "https://api-maps.yandex.ru/2.1/?apikey=ваш API-ключ&lang=ru_RU"
      document.head.append(script);
    },
    
    destroyed() {
    	document.head.querySelector('script#ymaps').remove()
      // ymaps = null
    }
    Ответ написан
    4 комментария