• Как в Vue.js в теге input если значение будет "Да", то выведет слово "Правильно", а если введёт "Нет", то выведет "Неверно"?

    @Hedy
    Вот вариант с computed property:
    https://jsfiddle.net/vxu9p04d/

    const app = new Vue({
    	el: '#app',
      data: {
      	input: ''
      },
      computed: {
      	result() {
        	if (this.input === 'Да')
          	return 'Правильно'
          else if (this.input === 'Нет')
          	return 'Неправильно'
          else
          	return 'Введите ответ'
        }
      }
    })


    <div id="app">
      <input type="text" v-model="input">
      <span>{{result}}</span>
    </div>
    Ответ написан
    1 комментарий
  • Что почитать по архитектуре Vue-приложения?

    @FullStackAlex
    Веб-разработчик, электрик, кочевник
    Я лично не назвал бы себя особо большым спецом. Но написал уже пару приложений от и до с Vue.js и так получилось что создал насколько я знаю первую полноценную plug and play тему для WordPress (то есть без Node.js SSR но при этом с полной SEO поддержкой, таким образом пользователь может её просто установить как обычную тему на своём сайте и использовать без каких либо дополнительных работ над кодом сайта, что на данный момент при остальных существующих концептах для WordPress в сфере Vue.js не возможно).

    При самообучении (главным образом 22-ух часовый курс от Maximilian Schwarzmüller на Udemy.com) я не натыкался на серьёзные ресурсы с углублённым обсуждением архитектуры Vue.js приложений. Наверное те кто в этом шпарит не сидят особо на тостере или stackoverflow :) По этому я лично просто подстраивал архитектуру своих приложений под endpoints данного Backend (Symfony 4 и WordPress). Для WordPress я просто организую компоненты как я бы организовал обыкновенную тему для WordPress:
    post.php ---> src/components/main/single/post.vue
    index.php ---> src/components/main/lists/posts.vue
    front-page.php ---> src/components/main/pages/home.vue
    page.php ---> src/components/main/single/page.vue
    archive-{custom-post-type}.php ----> src/components/main/lists/{custom-post-type}-posts.vue

    Сайт я делю на части Main, Header, Footer, (Sidebar, если навигация не в Header,) и Modals. (Глобальная) Коммуникация между ними происходит через Vuex модули. А Vue-Router обрабатывает HTTP запросы, используя при этом Axios.

    Обширные и многочисленные методы и hooks (activated, mounted, etc) одной компоненты пытаюсь насколько можно переносить в Mixins и делать их универсальными для использования в других компонентах чтобы держать script tag максимально чистым (когда ищешь ошибки, 200-400 строчек скрипта и 10 разных между собой связанных методов могут стать огромным pain in the ass).

    Совсем недавно натолкнулся на этого парня, которого пару статей и сайт мне понравились:
    https://markus.oberlehner.net/
    Возможно уже в его обширных статьях вы найдёте кучу нужной информации. В добавок он собирается как раз на эту тему выпускать книгу и тут можно на его newsletter подписаться (я подписался и пока никакого спама, только по теме):
    https://oberlehner.us20.list-manage.com/subscribe?...

    А вот куча интересных ссылок которые получаешь при первых же результатах поиска "Vue.js аrchitecture" (то есть без гарантий с моей стороны):
    https://v1.vuejs.org/guide/application.html
    https://learn-vuejs.github.io/vue-patterns/useful-...
    https://itnext.io/how-to-structure-a-vue-js-projec...
    https://dev.to/maxpou/3-tips-for-scaling-large-vue...

    В этой книге есть часть под названием "Large Application Patterns with Vuex":
    https://www.amazon.de/dp/B01N6VAO4P

    Эта книга тоже кажется интересная, более 200 страниц посвящены Vuex и Vue-Router:
    https://www.amazon.de/Fullstack-Vue-Complete-Guide...

    Ну и последним самые авторитетные ресурсы на эту и похожие темы с VueConf Talks:
    https://www.vuemastery.com/conferences/vuejs-amste...
    https://www.vuemastery.com/conferences/vueconf-tor...
    https://www.vuemastery.com/conferences/vueconf-tor...
    https://www.vuemastery.com/conferences/vueconf-tor...
    https://www.vuemastery.com/conferences/connect-tec...
    https://www.vuemastery.com/conferences/vueconf-us-...
    https://www.vuemastery.com/conferences/vueconf-us-...
    https://www.vuemastery.com/conferences/vueconf-us-...
    https://www.vuemastery.com/conferences/vueconf-us-...
    https://www.vuemastery.com/conferences/vueconf-us-...
    https://www.vuemastery.com/conferences/vueconf-us-...
    https://www.vuemastery.com/conferences/vueconf-us-...
    https://www.vuemastery.com/conferences/vueconf-us-...

    Have fun :)
    Ответ написан
    3 комментария
  • В каких единицах получается ответ?

    DevMan
    @DevMan
    где–то сейчас загрустил как минимум один из писателей mdn и множества других манов.
    Ответ написан
    Комментировать
  • Какие шаблоны проектирования js применяются на практике чаще всего?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    какие паттерны применяются чаще всего на практике и где

    Сразу отмечу, что все это чисто мое имхо, которое может не совпадать с мнением окружающих. В контексте фронтенда обычно все довольно просто. По моим наблюдениям в среднем сайте могут иметь смысл:
    1. Модули (делим код на независимые части)
    2. Фабрики (для компонентов интерфейса)
    3. Синглтоны (для хранилищ, точек сбора полифиллов / утилит и.т.д.)
    4. Адаптеры (для зависимостей и полифилов, которые могут измениться / выпилиться)
    5. Наблюдатели (для сбора происходящих событий в одном месте)
    6. Хранители (для сохранения действий пользователя и "Ctrl-Z")
    7. Стратегии (если действуем в зависимости от прилетевших данных)

    Другим паттернам применение вижу редко, только если под какую-то замороченную бизнес-логику. Хотя кого я обманываю, на среднем сайте обычно происходит только один паттерн - доширак из костылей. Ну и стоит сказать, что SPA-фреймворки имеют свойство навязывать свои подходы к решению задач, но это отдельная тема.

    Важно понимать, что паттерны проектирования - это просто хорошие идеи по поводу того, как организовать большой объем кода в той или иной ситуации. Это не "изучи тайное знание, запомни, и делай так всегда", не "используй паттерны, потому что великие их используют", это скорее "если не уверен как организовать код, возьми готовую идею, она вроде работает". Если вы будете просто решать задачи, то через N лет практики вы сами их все "изобретете", только не будете знать, что у них есть названия. Эффективно будет организовать себе заметку о том, какие из этих идей для чего примерно применяют, а потом, в процессе работы, в нее подглядывать, если встал вопрос "как организовать этот код".
    Ответ написан
    7 комментариев
  • Как вынести часть js из основного потока?

    Sanasol
    @Sanasol Куратор тега JavaScript
    нельзя просто так взять и загуглить ошибку
    На метрику точно забейте.

    Ютуб надо убирать под JS, вместо плеера картинка -> при клике вставляется плеер.
    Ютуб безобразно долго грузится.

    Живосайт не факт что так сильно влияет, но можно сделать финт ушами

    setTimeout(function(){
    (function(){ var widget_id = '***';var d=document;var w=window;function l(){
      var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true;
      s.src = '//code.jivosite.com/script/widget/'+widget_id
        ; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss);}
      if(d.readyState=='complete'){l();}else{if(w.attachEvent){w.attachEvent('onload',l);}
      else{w.addEventListener('load',l,false);}}})();
    }, 3000);


    В целом вся оптимизация вордпресса это:
    1. Прогнать картинки через https://compressor.io/
    2. И поставить какой-нибудь W3 Total Cache + включить всякие минификации и т.д.
    3. Всякие виджеты засунуть в setTimeout

    На выходе получите 90-100 для десктопа и 80-100 для мобильного на PageSpeed
    Ответ написан
    4 комментария
  • Как сделать карусель только с текстом без применения библиотек?

    Ragtime_Kitty
    @Ragtime_Kitty
    Можно упороться и сделать без скриптов и с упоротой разметкой

    Ответ написан
    Комментировать
  • Можете оценить уровень кода?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Навскидку:
    1. В проектах по-хорошему использовать типизацию TypeScript, Flow. PropTypes в таком случае использовать не надо.

    2. Тут в коде бессмысленное условие:
    render() {
        const { report = {} } = this.props;
        return (
          <Fragment>
            <Head>
              <title>Doctor problem with {report.doctor.name}</title>
            </Head>
            {report && <ReportDetail showDetailButton={false} data={report} />}
          </Fragment>
        );
      }

    report у вас существует всегда. Надеюсь понимаете, что пустой объект кастуется в true.

    3. Про ESLint/TSLint уже писали.

    4. Ваши редьюсеры не имеют ключей состояния. Какой-то запрос может быть в процессе, а ваши компоненты об этом не знают.

    5. Логику работы с куками лучше вынести в actions.

    6. Нет смысла разделять импорты отступами, просто соблюдайте очередность и смотрите пункт 3.

    7. Компонент __app можно декомпозировать.

    8. Неясно зачем тут геттер
    get renderReports() { /* ... */ }

    9. Для сортировки можно использовать меморизацию.

    10.
    handleChange = (e, key) => {
        const value = e.target.value;
        this.setState({
          [key]: value,
        });
      };

    <Input
      id="outlined-name" //  зачем?
      placeholder="Problem Summary"
      value={reportTitle}
      onChange={e => handleChange(e, "reportTitle")}
    />

    Можно заменить на:
    handleChange = e => {
        const { name, value } = e.target;
        this.setState({
          [name]: value,
        });
      };

    <Input
      id="outlined-name" //  зачем?
      placeholder="Problem Summary"
      name="reportTitle"
      value={reportTitle}
      onChange={handleChange}
    />


    11. /components/ReportDetail/constants.js зачем?

    12. Где-то запросы в экшенах, где-то в компонентах.

    Не знаком с next.js поэтому ничего объективного по организации кода сказать не могу, так как не до конца понимаю как этот фреймворк работает. Вижу, что авторизованных запросов пока нет. Запросы к API у вас будут происходить только на стороне клиента?
    Ответ написан
    Комментировать
  • Как сделать цикл в Photoshop?

    RadCor
    @RadCor Автор вопроса
    Если мой ответ вам помог, отмечайте его решением.
    Парни, пока нашёл вот такое решение. Да, придётся потом конвертить PSD в PDF для печати, но это тоже автоматизируется экшеном.

    https://www.youtube.com/watch?v=QEOwDLzTagc
    Ответ написан
    Комментировать
  • Какую выбрать книгу для изучения JavaScript?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Есть бесплатная серия книг на гитхабе You don't know js, это почти исчерпывающее руководство по JS. Она на английском, не пытайтесь найти перевод, он есть, но корявый и не законченный.
    Ответ написан
    1 комментарий
  • Как "прокачать" Trello?

    littleguga
    @littleguga
    Не стыдно не знать, а стыдно не интересоваться.
    PunchTime for Trello
    Plus for Trello

    Есть еще Scrum for Trello, но выглядит мертвым. Вот исходники, если что.
    Ответ написан
    Комментировать
  • Как "прокачать" Trello?

    zamboga
    @zamboga
    Аналитика данных, BI-аналитика, дашборды
    Быстрое знакомство и описание Trello
    • Философия Trello
    https://netology.ru/blog/trello
    • Как использовать Trello для планирования
    interesno.co/myself/3128a1df69ba
    • 12 советов для тех, кто пользуется Trello
    www.lookatme.ru/mag/live/things/214757-trello-tips...


    Расширения Сhrome для Trello
    • Полезные расширения и настройки
    https://lifehacker.ru/2016/04/12/10-dopolnenij-dly...
    betteri.ru/post/rukovodstvo-po-produktivnoy-rabote...
    ○ Мои надстройки https://i.imgur.com/bHbdtiK.png
    ○ Для управления расширениями Хром: SimpleExtManager

    ○ Надстройки Google chrome (использую постоянно)
    § Boards for Trello
    § Card Colors for Trello
    § Next Step for Trello
    § Plus for Trello (тайм-трекинг, отчёты, Scrum)
    § Pro for Trello, FREE Trelo tweaks
    § Reports for Trello
    § Toggl Button: Productivity & Time Tracker
    § Trellists: Trello Lists Master
    § Trello List Wizard
    § Multiselect for Trello (платный)

    ○ Надстройки Google chrome (использую периодически)
    § List Highlighter for Trello
    § Slim Lists for Trello
    § Trelabels for Trello
    § Trello List Filter
    § TrelloExport
    § Ultimella, the features pack for Trello

    • Система отчетов
    https://reportsfortrello.com/
    https://www.toggl.com/ (надо поставить расширение toggl для хром)
    www.plusfortrello.com

    • Диаграма Ганта
    https://elegantt.com/
    Gantt for Trello | by Placker.com

    • Для автозадач:
    https://echofortrello.com (попроще) (прекратил существование)
    https://butlerfortrello.com (посложнее, но и функционал шире)
    https://ifttt.com/applets/299813p-schedule-daily-o...

    Список тайм-трекеров для Trello
    https://help.trello.com/article/941-time-tracking

    Расширения Хром для тайминга времени Trello на основе техники Pomodoro
    • Timeneye
    ○ Плюсы
    § Размытый фон при запуске таймера -> фокус на задаче
    ○ Минусы
    § Простой таймер, без помидорок
    § Автоматом не заполняет поля "проект", "задача" и т.д. Хотя мог бы брать все это из Trello
    ○ Итог
    § Не понравился, неудобный

    • Pomello
    ○ Плюсы
    § Добавляет символ "помидорки" или "галочки" к каждой выполненной задаче, + число помидорок (даже дробных)
    § Очень простой и удобный
    § Плашка "овер всех окон" с обратным отсчетом
    ○ Минусы
    § Нет отчетов
    ○ Итог
    § Использую из-за символов "помидорки"

    • PomodoneApp
    ○ Плюсы
    § Обратный отсчёт в трее
    ○ Есть отчеты
    § Управляет задачами в Trello: можно закрыть любую, она автоматом переместиться в "done"
    § Подцепляет теги и проект, это удобно, не надо самому ставить.
    ○ Минусы
    § Отчеты в Toggle удобнее
    ○ Итог
    § Использую, т.к. нравится обратный отсчет в трее, не так "давит", как Pomello

    • Toggl
    ○ Плюсы
    § Можно логгировать отдельно подзадачи из чеклистов Trello
    § Очень крутые, подробные и красивые отчеты
    ○ Минусы
    § Автопауза не связана с Trello
    § Все управление задачами — только через web-trello
    § Не берет "теги" из Trello
    ○ Итог
    § Использую постоянно, т.к. нужны отчеты
    Ответ написан
    Комментировать
  • Сервис составления маршрутов доставки?

    @2065935
    Попробуй это, как раз на яндекс картах
    logist.poncy.ru
    Ответ написан
    Комментировать
  • Jquery не пашет, что со мной не так?

    profesor08
    @profesor08 Куратор тега JavaScript
    Подключи свой jquery в head, чтоб он гарантировано был загружен до того, как загрузится твой скриптик. Так как в твоем случае, твой скриптик, загружается раньше jquery, и так как jquery еще не загружен, вылетает ошибка.

    <!DOCTYPE html>
    <html lang="ru">
    
    <head>
      <meta charset="UTF-8">
      <title>Бургер меню</title>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <link rel="stylesheet" href="css/style.css">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
    </head>
    
    <body>
      <h1>Hello world!</h1>
      <script src="script.js"></script>
    </body>
    </html>
    Ответ написан
    8 комментариев
  • Как Yota блокирует Mtproto proxy?

    @A_L_E_X_E_Y_B Автор вопроса
    Нашёл решение этой проблемы!
    Нужно просто ставить mtproto proxy на 1194 или на 51820 порт.
    Проблема была в том, что yota видела что трафик зашифрован и представляет собой что-то непонятное (это защита от некоторых vpn и торрентов видимо) и снижало скорость почти до нуля. А на 1194 порту она не смотрит трафик, т.к. на нём почти все vpn.
    Ответ написан
    2 комментария
  • Как выучить PostgreSQL?

    gordon_shamway
    @gordon_shamway
    Через практику. На русском материалов не много, можешь ещё почитать книгу PostgreSQL Up and Running, 2nd Edition
    Ответ написан
    Комментировать
  • Как создать проект Laravel + Vuejs + SSR?

    delphinpro
    @delphinpro
    frontend developer
    На ларке пилишь чистый API, на Vue полноценный SPA. Роутинг по сайту делаешь только в клиенте. Для SSR либо ставишь ноду, либо v8js (пример SSR с v8js). Вот и все дела.

    Соответственно первая загрузка была долгой, так как грузила скрипты и стили всех страниц.

    Ну используйте code splitting в вебпаке, чтобы попилить бандл на отдельные чанки.
    Ответ написан
    2 комментария
  • Как работать с websocket в php без библиотек?

    @xfg
    Прочитать соответствующий RFC https://tools.ietf.org/html/rfc6455 чтобы понять, как происходит рукопожатие и какие байты в переданном сообщении за что отвечают. После этого будет понятно как написать реализацию. Я досконально уже не помню, но фактически от клиента приходит обычный http запрос с определенными заголовками, сервер разбирает этот запрос и если всё ок, то сохраняет открытое соединение в массив, если нет, то отправляет соответствующий ответ и закрывает соединение. Дальше по открытому соединению начинает сыпаться поток байтов от клиента их нужно разбирать, чтобы понять длину сообщения, сами данные переданные в фрейме, закончился фрейм или еще нет и тому подобное. Обратно также кодировать данные в поток байтов и отправлять по открытому соединению. Каждый байт в переданном фрейме несет определенный смысл. Обо всем этом подробно написано в RFC, но на английском. Вообще это хорошо примерно понимать как работает, но глупо писать такую низкоуровневую реализацию, когда есть готовые. Такие вещи развивают и поддерживают годами. Вы же не пишите HTTP серверы, а берете готовые вроде nginx и тому подобное.

    В каком месте можно полученные данные подготовить к записи в бд.

    Как сделать, что бы на стороне клиента, один websocket отвечал за сообщения, другой за статьи. (Или за эти два действия отвечает один websocket, тогда как мне на сервере это различать).

    Вебсокет это низкоуровневая штука, для передачи потока байтов от клиента на сервер, в отличии например от HTTP, где есть заголовки и тело сообщения. Поверх вебсокета нужно делать еще один протокол или самописный или выбрать один из готовых. Это проще говоря, то как выглядят ваши фреймы (сообщения), которые вы отправляете с клиента на сервер и назад. Например клиент может отправлять такой фрейм:
    ["id", "controller/action", {param1: value1, param2: value2}]

    в ответ получать
    ["id", "OK"]
    если запрос был обработан успешно или
    ["id", "ERR", {error: "action not found"}]
    если произошла ошибка. По переданному id в массиве, можно понимать, к какому запросу относится ответ.
    Для уведомлений (событий) сервер может отправлять клиентам что-то такое
    ["user_added", {user: {...}}]
    и т.д. Этот протокол необходимо придумать самому или выбрать из готовых (популярных пока нет) и написать его реализацию (клиентскую и серверную часть) или опять же взять уже готовую.

    После того, как такой протокол будет написан, делаешь тоже самое, что делают обычные PHP фреймворки, пишешь роутер, который будет разбирать твои сообщения, понимать к какому контроллеру идет обращение, к какому экшену и вызывать его. В экшене уже будешь делать свои вызовы к базе данных.

    Но это уже всё должно быть, просто возьми real-time фреймворк. Там за тебя написали и websocket сервер и протокол поверх него и экшены уже есть. Всё низкоуровневое уже готово. Бери и пиши приложение. В nodejs самый популярный это например https://github.com/socketio/socket.io, а в php я не знаю, но уверен, что тоже есть что-то популярное.

    Своё написать не получится, без опыта и без попыток сделать приложение на чем-то готовом. Нужно как минимум прочитать RFC и посмотреть реализации других разработчиков. Для этого нужно быть кем-то больше, чем "программистом сайтов".
    Ответ написан
    1 комментарий
  • Как не превратиться в мамонта?

    @laphroaig
    Есть разница между тем когда ты знаешь, чего ты не знаешь и тем, когда ты не знаешь чего ты не знаешь. В первом случае ты знаешь, что тебе нужно узнать для решения конкретной задачи, а во втором просто тупишь.
    Ответ написан
    1 комментарий
  • Хороший курс-наставник по продвинутой верстке?

    Единственный стоящий русскоязычный канал на youtube по верстке, из которых мне попадались, это FrontCoder https://www.youtube.com/channel/UCzhKcnzGNhPEZsNSK... . На канале верстка реальных проектов с использованием современных инструментов и методологий. Всякие Лаврики и прочая поповщина - инфобизнес чистой воды и профанация. HTML Академия - основы дают по верстке.
    Знание спецификации w3c и справочная информация mdn тоже базис, без которого не стоит начинать.
    Ответ написан
    3 комментария