Задать вопрос
Stepan13

Степан Кормилин

JS everywhere...
Лайки

  • SyntaxError: Cannot use import statement outside a module?

    @Penoplaster83
    Нужно добавить в package.json вот это

    "type": "module"
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать курсор-чат в реальном времени?

    uDenX
    @uDenX
    PHP Developer
    Так же как и любой обмен данными. На сервер передаётся информация (например положение курсора), сервер передаёт клиентам, клиент рендерит
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно тестировать роуты во VueJS?

    @FullStackAlex
    Веб-разработчик, электрик, кочевник
    Потерял вчера целый день пытаясь решить эту казалось бы простую проблему.
    Но как в итоге выяснил Vue-Test-Utils не предусматривает изменения во vue-router:

    Dealing with Routing
    Since routing by definition has to do with the overall structure of the application and involves multiple components, it is best tested via integration or end-to-end tests. For individual components that rely on vue-router features, you can mock them using the techniques mentioned above.


    Поэтому для подобной задачи нужно использовать E2E testing tools как Puppeteer, TestCafe и Cyprus. Или же (что я сейчас пока лишь пробую, но может сегодня более подробно описать смогу) не использовать vue-test-utils wrapper а использовать реальную Vue rendered app.

    Update:
    Ок, решил проблему.
    Vue-Test-Utils нельзя использовать из-за createLocalVue() и mount(), так как обе функции не дают возможность использовать для создания Vue инстанции "Full UMD bundler" .

    Vue-Test-Utils сделан для максимальной изоляции компоненты. Хотя добавить FULL UMD поддержку казалось бы не такая уж и большая задача, но увы.

    Поэтому нужно как уже и писал обходится без vue-test-utils. А так как я ненавижу Facebook - я принципиально не использую Jest, Yarn, React итп (по крайней мере в личных проектах), а использую Mocha + Chai + Sinon + jsdom, но принцип один и тот же, да и синтаксис практически такой же:

    import chai from "chai";
const expect = chai.expect;
const should = chai.should();

import App from '~/testing-router-without-wrapper/App.vue';

import VueRouter from 'vue-router';
import router from '~/testing-router-without-wrapper/router.js';

//https://github.com/vuejs/vue-router/issues/713
import Vue from "vue/dist/vue.js";
Vue.use(VueRouter);

//jsdom создаст HTML документ но так как я в своём app ссылаюсь везде на #app в функции app container, нужно создать соответсвующий элемент:
let element = document.createElement("div");
element.id = "app";
const myApp = new Vue({
    el: element,
    router,
    render: h => h(App),
    components: {App},
});

describe('Testing App.vue with Route 1', () => {

    it('Title of Home component is true', () => {
        console.log( "myApp.$el.innerHTML", myApp.$el.innerHTML );
        expect(myApp.$el.innerHTML.includes('<h1 id="title">Home Title</h1>')).to.be.true;
    });

    it('Pushing Route1 and checking title of Route1 component is true', done => {
        myApp.$router.push('/route1');
        setTimeout(()=>{
            console.log( "myApp.$el.innerHTML", myApp.$el.innerHTML );
            expect(myApp.$el.innerHTML.includes('<h1 id="title">Route 1 Title</h1>')).to.be.true;
            done();
        },1000);

    });
});
    Ответ написан
    Комментировать
    Комментировать

  • Кто какую библиотеку юзает для маски (vue)?

    @haiarha
    На проектах использую плагин для vue - https://www.npmjs.com/package/v-mask

    Очень прост в использовании, но не без недостатков(пример - в документации заявлены опциональные символы, по факту они не работают. Также, при попытке редактировать не с конца - перескакивает курсор в конец строки ИТП.)

    Рассматриваю альтернативу - https://www.npmjs.com/package/cleave.js?activeTab=... на демо страничке работает без багов, но он сложнее в использовании, пока его не пробовал.
    Ответ написан
    1 комментарий
    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 комментария
    3 комментария

  • Как создать таблицу с расширенными возможностями?

    mrusklon
    @mrusklon
    Не получается? Яростно гугли!
    все это мелкие задачи и все легко сделать даже стандартным html+css
    а если что то посложнее можно смотреть в сторону https://datatables.net/
    Ответ написан
    Комментировать
    Комментировать

  • Какой фреймворк на Node.js выбрать сегодня?

    @MSAFT
    Я бы выбрал fastify для бэкэнда. Он производительней конкурентов и поддерживает typescript.

    Для фронта я бы выбрал Vue, потому что не зависят от большой компании(привет Angular и React), да и говорят в 3 версии уделают всех по производительности(хотя кому она нужна на сегодняшний день). Если нужен SSR под SEO, то чтоб не мучаться, если выбрал React сразу ставь next.js, если vue - nuxt. Если приложение будет большим, то не забываем про redux/vuex.

    Базу данных надо выбирать строго под задачу, если связанные между собой то таблицы то строго реляционную - Postgresql или Mariadb. Если просто хранение каких-то данных, то лучше конечно Mongodb. Если какая-то запутанная соцсеть то neo4j. Если очереди нужны то redis. Сейчас на хайпе ещё graphql. ORM - если чисто JS - sequalize, если TS - TypeORM, если Монга - mongoose. Так что исходить надо от задач.

    Так же неплох под бэкэнд NestJS, который советовали. Структурированно всё хорошо, запутаться будет тяжело и можно сразу начать писать, большой плюс поддержка TypeScript из коробки. Если на фронте использовать Angular, то вообще песня.

    Я бы еще посоветовал adonis js, полный клон laravel на nodejs. Если работал на laravel то будет всё понятно. Да и структура laravel уже проверена годами.
    Ответ написан
    Комментировать
    Комментировать

  • Стоит ли изучать nuxt.js?

    Jekins
    @Jekins
    Front-end developer
    На nuxt пишем проект уже пол года, все с ним отлично. Даже не понятно, как он может отдалиться от vue, если это обычная реализация ssr по стайлгайдам vue. Можете использовать его и не волноваться. Писать проект вы будете на обычном vue, а nuxt лишь поможет избежать гемора с настройкой ssr. А если увидите, что кто-то пишет будто он не гибкий - не верьте, там можно все настроить и перенастроить. Даже самые глубинные вещи. Тем более, это самая популярна ssr реализация для vue с большим комьюнити, которые уже все изучили и написали все необходимые вещи, которые могут понадобится при разработке.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как настроить роутинг так, что бы вся статика открывалась через localhost:3000?

    @bpGusar Автор вопроса
    *spoiler*
    указал в package.json "proxy": "http://localhost:5000", и теперь все работает как надо
    Ответ написан
    Комментировать
    Комментировать

  • Как убрать смещение страницы влево при появлении полосы прокрутки?

    Pongo
    @Pongo
    При помощи calc(100vw - 100%) можно вычислить ширину скроллбара (а если он не отображается, то будет 0). Идея: при помощи отрицательного margin-right увеличить ширину <html> на эту ширину. При этом появляется горизонтальная полоса прокрутки — ее скрываем.

    html {
  overflow-x: hidden;
  margin-right: calc(-1 * (100vw - 100%));
}

    Пример. Нажатие кнопки "change min-height" скрывает\отображает скроллбар.
    Ответ написан
    12 комментариев
    12 комментариев

  • Как вы используете фреймворки Vue/Angular/React?

    TTATPuOT
    @TTATPuOT
    https://code.patriotovsky.ru/
    Вот хочется мне сегодня написать что-то на React - пишу на React.
    Вообще, подобные библиотеки используются, когда хочется создать интерфейс. Чаще, если интерфейс создаётся в команде, ещё чаще, когда интерфейс никак не связан с бекендом. Например, приложение обрабатывает сторонний API и обрабатывает ответ на клиенте.
    Например, веб-клиент мессенджера Вконтакте. Вам вообще никакие мощности на сервере не нужны, всё хранится на клиенте, включая его данные. От вас только требуется отдать приложение, которое уже само всё обдумает. Это идеальные вариант для SPA.
    Ещё, я делаю сложные интерфейсы. Для меня это проще, чем долбиться с jQuery и кучу onClick'ов навешивать везде.

    Что касается CMS - то WordPress хочет перейти на React в будущем. Насколько это нужно именно WordPress - не очень понятно. Скорее, их планы в переводе админки на React, а не пользовательской части.

    А вообще, любую технологию можно применить в любую дырку. Изучите, если интересно. А использовать или нет вы уже сами определитесь, как будете знать примерный инструментарий.
    Ответ написан
    Комментировать
    Комментировать

  • Как вы используете фреймворки Vue/Angular/React?

    @floydback
    Можно. Но не стоит, потому что это скорее всего никак не сэкономит работу. Наоборот, может легко усложнить.

    Сначала попробует хоть один spa проект сделать самостоятельно. После этого такой вопрос у вас не встанет.
    Ответ написан
    Комментировать
    Комментировать

  • Разместил резюме на позицию junior front-end, не понимаю что не так в нем?

    Konata69lol
    @Konata69lol
    backend developer (php/go)
    Кое-какие советы:
    - "предпочитаемый способ связи" ставь телефон. Почта, это долго. Написывать джуну вряд ли кто-то будет. Позвонят с большей охотой.
    - Маленький опыт (3 месяца стажировка - почти 0). Можно дописать пет проекты или фриланс, чтобы не так пусто было.
    - "Ключевые навыки" указывать только те, на которых что-то умеешь. Указал вордпресс - должен уметь натянуть верстку на него, подключить пару плагинов. Аналогично для других.
    - Про всякие курсы/кодкадеми лучше не писать - примут за очередного вайтишника. Лучше всего показывают навыки реализованные проекты.
    - В "Примерах работ" помимо кода хочется посмотреть на них в живую. Выложи на гитхаб пейджес фронтенд, либо на хостинг (есть бесплатные варианты типа хероку, если нет 200р на вдску).
    - Неоконченное высшее будет отпугивать - тут только быть готовым обосновать это, либо прикрыть другими плюсами.
    Ответ написан
    Комментировать
    Комментировать

  • Разместил резюме на позицию junior front-end, не понимаю что не так в нем?

    @keeprocking
    В принципе все грамотно расписали вам:

    - Язык вроде только начинаете, однако есть игра Chore Door. Chore достаточно популярное слово в английской речи, однако для джуна разработчика врядли знакомое. Кто-то может подумать (как например, я), что код игры откуда то взят, а не написан вами.
    - Про-совет: Купите домен типа https://alexdmitriev.com и начните делать две вещи с него:
    1. Слать письма с адреса contact@alexdmitriev.com
    2. Начать писать статьи в свой блог.

    Для чего нужно второе? Вы джун в 28 лет без вышки. Это не совсем приятная ситуация, поэтому на вас будут предубеждения. Справедливо? Нет. Но такова реальность. И вам нужно доказать обратное, поскольку на вас не работает корочка из универа и против вас возраст.

    Как это сделать? Писать в блог. Объяснить свою историю там. Почему, зачем, куда. Почему фронт, программирование? Зачем начал? Откуда пришел? Почему нет вышки? Что вы, кто вы и как вы.

    Поэтому вам надо показать что вы: 1. Адекват 2. Знаете то чем занимаетесь хотя бы в какой-то степени 3. Готовы тратить время на изучения чего то нового (это бич айти, но и проходной билет в компании, поэтому хотя бы видимость надо создать).

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

    - Перефразируйте «развиваться», «учусь», «новое». Складывается впечатление что вы хотите за счет компании, которая вас наймет за 3 копейки (которые все равно деньги), научиться и потом свалить. Тут все постоянно учатся, чтобы место под собой сохранить.

    - «Нацеленный на результат». Сразу ссылка на работу, блог пост и еще что нибудь. А так это просто слова.
    Ответ написан
    Комментировать
    Комментировать

  • Как отключить автозаполнение полей в Chrome?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега HTML
    Самое надежное - создать перед полями скрытые при помощи css поля-двойники того же типа.
    Я, например, сделал небольшое macro для Laravel:
    Form::macro('preventBrowserAutocomplete', function ($fields)
{
	$fakeFieldsHtml = '';

	foreach ($fields as $name => $type)
	{
		$fakeFieldsHtml .= sprintf('<input style="display:none" type="%s" name="fake_%s_remembered"/>', $type, $name);
	}

	return $fakeFieldsHtml;
});

    И вызываю его таким образом в нужных местах:
    {!! Form::preventBrowserAutocomplete(['email' => 'email', 'password' => 'password']) !!}
    Ответ написан
    4 комментария
    4 комментария

  • Как написать большое приложение на Vue.js и не умереть?

    AXP-dev
    @AXP-dev
    Как-то странно у вас webpack настроен. У нас на проекте весьма большая сборка (~100 ui компонентов + ~300 view файлов), собирается на холодную порядка 10 секунд, на горячую 1-2 секунды. При этом весьма большие store и система роутов.

    Конфиг: windows 10, 16bg, i7 7-го поколения

    PS
    Если вам не хватает БЭМ'а, что очень странно, используйте scope style и всё
    Ответ написан
    Комментировать
    Комментировать

  • Какая правильная "архитектура" во Vue?

    k12th
    @k12th
    console.log(`You're pulling my leg, right?`);
    Из соображений тестируемости — компоненты не должны содержать ни бизнес-логики, ни сетевого кода, экшены должны быть как можно более тупыми, а все самое интересное — в мутациях и геттерах. Так будет проще всего покрывать тестами и дебажить.
    Ответ написан
    Комментировать
    Комментировать

  • Какие шаблоны проектирования js применяются на практике чаще всего?

    Jeer
    @Jeer
    уверенный пользователь
    Паттерны... пользуешься-пользуешься и не знаешь, что у всего этого есть названия.
    Паттерны не привязаны к конкретному языку (но в разных языках реализуются по разному)
    Есть отличный сайтец с картинками, всем его рекомендую https://refactoring.guru/ru
    Ответ написан
    Комментировать
    Комментировать

  • Как составить конфиг для gulp, чтобы компилировать .vue (однофайловые компоненты со стилями) в dist?

    @mgfck Автор вопроса
    После долгих и упорных поисков нашёл то, что нужно:
    gulp.task('dev', function() {
  return browserify({ entries: ['src/app/main.js']})
    //.transform(babelify, { presets: ['es2015'] })
    .transform(vueify)
    .plugin('vueify/plugins/extract-css', { out: './bundle.css' })    
    .bundle()
      .pipe(source('main.js'))
      .pipe(gulp.dest('./dist'))
      //.pipe(connect.reload());
});
    Ответ написан
    Комментировать
    Комментировать

  • Как сверстать такой элемент?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Две больших картинки с object-fit: cover. Одна - нормальная, вторая - только голова и лапа слона, а вокруг нее прозрачное ничего. Голова в центре, при адаптивном изменении пропорций всего этого она никуда не уедет. Картинки одинакового размера. Дальше три слоя с абсолютным позиционированием - нормальная картинка, слой с текстом и картинка с головой. Текст - в виде встроенной SVG, там на него можно будет кроссбраузерно наложить любые градиенты.
    Ответ написан
    1 комментарий
    1 комментарий