• VueJS: где лучше хранить css, в компонентах .vue или main.css?

    1. Используем препроцессор, любой: sass, less, stylus

    2. Общие стили(все что используется или может использоваться часто) в общее.
    Один файл точка входа, в него импортируется другие файлы с общими стилями.
    Файлы с общими стилями, максимально разбиты, по назначению, разделам... Зависит от проекта. На огромных проэктах, можно дополнительно по подпапкам разбивать. Главное что бы удобно было в этом ориентироваться.

    Все общие переменные обязательно в отдельный файл*
    Все общие миксины обязательно в отдельный файл*
    ** Дает возможность быстро изменить препроцессор, если понадобится. У всех разные синтаксис переменных и миксинов

    Если миксин статичный, без параметров, лучше заменить его на класс, например .some-mixin-class
    И использовать его так:
    .some-class {
    @extend .some-mixin-class;
    ...
    }
    При этом .some-mixin-class нельзя использовать как обычный класс напримую, только экстендить в других классах

    @extend .some-mixin-class - Работает одинаково во всех препроцессорах и хорошо читается

    Все общие стили только по БЕМ

    3. Специфичные стили для компонента пишем в файле компонента.
    Или scoped или БЕМ - как удобней
    Если таких стилей очень много, то выносим в отдельный файл и импортируем в компаненте
    В эти стили по необходимости(если нужно использовать) и импортируем файл с общими переменными или миксинами

    Самое сложное, научится определять, что общее а что специфичное, это не объяснить. Приходит с опытом и постепенно
    Ответ написан
    Комментировать
  • VueJS: где лучше хранить css, в компонентах .vue или main.css?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    В Vue приложении используем препроцессор (scss). Кроме того используем внешние пакеты для вертикального ритма и сетки.

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

    Вариант импортировать scss-файл с определениями в каждом компоненте сразу откинули, ибо люди мы ленивые.

    Что делаем:
    Подключаем в точке входа (main.js) основной стилевой файл:
    import '@/styles/main.scss';
    import Vue from 'vue';
    //...

    В нем подключаем всякое-разное-глобальное-базовое:
    @import "base/normalize";
    @import "base/init";
    @import "base/typography";
    @import "base/code";
    @import "base/links";
    @import "base/tables";
    @import "base/buttons";
    @import "base/control-group";
    @import "base/general-form";
    @import "parts/transitions";
    ...

    Далаем два файла: env-development.scss и env-production.scss
    $NODE_ENV: development;
    @import "cfg-vars";

    $NODE_ENV: production;
    @import "cfg-vars";

    Переменная $NODE_ENV нам нужно. чтобы управлять стилями в зависимости от окружения.
    Дальше в cfg-vars.scss подключаем/пишем все необходимые глобальные конфиги
    $DEV_MODE: $NODE_ENV == development;
    $MAX_INT32: 2147483647;
    
    @import "cfg-vrhythm";
    @import "cfg-grid";
    @import "../../../node_modules/vrhythm/source/vrhythm";
    @import "../../../node_modules/bs-grid-system/source/scss/bs-grid";
    @import "../mixins";
    @import "cfg-z-indexes";
    
    $wt-family-base: "Open Sans", sans-serif;
    $wt-family-head: "Roboto Slab", serif;
    $font-family-monospace:  "Fira Code", Menlo, Monaco, Consolas, "Courier New", monospace;
    
    //==
    //== Color palette
    //== ======================================= ==//
    
    $palette-light-blue: #3c8dbc; // Primary
    $palette-red       : #dd4b39; // Danger
    $palette-green     : #00a65a; // Success
    $palette-aqua      : #00c0ef; // Info
    $palette-yellow    : #f39c12; // Warning
    
    ...


    Почти всё готово. Осталось только автоматически подключить эти конфиги к сборке.
    Идём в vue.config.js и добавляем секцию css:
    const NODE_ENV = process.env.NODE_ENV === 'development'
        ? 'development'
        : 'production';
    //...
    module.exports = {
        //...
        css: {
            extract: NODE_ENV === 'production',
            loaderOptions: {
                sass: {
                    data: `@import "@/styles/config/env-${NODE_ENV}.scss";`,
                },
            },
        },
    };


    Теперь мы спокойно пишем стили компонентов на scss прямо vue-файлах, и оставляем возможность какие-то стили писать в отдельных файлах.

    Enjoy!
    Ответ написан
    6 комментариев
  • Как подключить 2 монитора к ноутбуку?

    Fragster
    @Fragster
    помогло? отметь решением!
    Если есть thrunderbolt, то может прокатить что-то типа dell wd15 или более старшие модели, у меня работает:
    spoiler
    efc934f48c5fd3b9a4a1d18f296f3756.jpg5365b894bf844572cc0ec85294b6a291.jpg

    Однако бывают и проблемы, например макбук не умеет в один порт выдавать разную картинку и у него внешние мониторы показывают одно и то же: https://www.dell.com/community/Laptops-General-Rea... там самые дельные комментарии в конце.
    Ответ написан
    Комментировать
  • Как идеально построено взаимодействие между фронтэнд и бэкэнд разработчиками?

    @k2lhu
    Полагаю вам нужен Swagger, пример как это выглядит в работе тут.
    Перед написание кода вы можете описать весь набор данных и их формат для обмена между бэкендом и фронтендом, и только после оформления доки приступать к работе, в этом случае бэкенду не нужен фронт, он может ориентироваться на описанную документацию сваггера, так же как и фронтед.
    Ответ написан
    4 комментария
  • Как идеально построено взаимодействие между фронтэнд и бэкэнд разработчиками?

    @Vitsliputsli
    Как уже ответили, смотреть в сторону swagger.
    Но даже без него, проблемы странные. На данный момент, все выглядит так, что бек взвалил на себя работу по отладке фронта, т.е. совсем не его работу, и зашивается. А фронт вместо того, чтобы работать, плюет в потолок, спихивая вину на бек, что у того, что-то не работает.
    Чтобы протестировать ему свою работу, он вынужден разворачивать на локальной машине еще фронтэнд и билдить его каждый раз, логиниться и там тестировать как все работает. Частенько он сталкивается с проблемами, что на фронтэнде не все работает без ошибок, а ему приходится думать по вине неправильности работы api это или по другим причинам.

    Абсолютно не нужно, ни разворачивать фронт, ни думать что там не работает во фронте и по какой причине. У бека и фронта есть задача по реализации api в ней описано, как обращаться и что должен возвращать каждый метод. Соответственно, бек проверяет работоспособность api путем отправки запросов (через тот же Postman), и тесты тут будут не лишними. Если ошибка обнаруживается на фронте, то к беку летит баг, куда обращались, что получили в ответ, что ожидали получить.
    Фронтэнд... Если какая ошибка то у него работа останавливается и он пишет просто в трелло "не работает метод такой то..."

    После этого мокирует данный метод и работает дальше.
    Ответ написан
    Комментировать
  • Как идеально построено взаимодействие между фронтэнд и бэкэнд разработчиками?

    @kttotto
    пофиг на чем писать
    Не понимаю, зачем для тестирования апи разворачивать фронт. Бэк самостоятельно нормально может проверить работоспособность своего апи. Для этого как минимум есть браузер, как максимум есть postman или swagger и куча их альтернатив. Фронт говорит какие ему данные нужны, бэк говорит как будет называться метод и какие параметры с фронта для этого должны передаваться. А дальше как работает фронт, это проблема фронтедщиков.
    Ответ написан
    Комментировать
  • Как организовать разработку клиент-сервеного приложения?

    @rPman
    Вообще то это должен быть it архитектор, который должен определить все необходимое, и даже составлять прогнозы развития систему на будущее, особенно если инет подробного ТЗ.

    Что в вашем проекте главнее? что задает тон разработки, бакэнд или фронтэнд? Если бакэнд по сути прослойка к базе данных, то пусть за api отвечает фронтэндер, ведь для его удобства его разрабатываете, если же у приложения сложная бизнеслогика и сложное использование и несколько клиентов, то скорее всего тон разработки api должен задавать бакэндер.

    Определите владеющего последним словом, у которого будет право наложить вето/принять окончательное решение в случае спорных вопросов. Инструменты, в которых будете чертить картинки могут быть любыми, можно хоть в текстовом файлике расписывать все, но в конечном счете все упирается в принятие решения, к примеру на сколько подробно нужно дробить логику на подуровни.
    Ответ написан
    1 комментарий
  • Как организовать разработку клиент-сервеного приложения?

    firedragon
    @firedragon
    Не джун-мидл-сеньор, а трус-балбес-бывалый.
    Определите контракты апи хоть на уровне json файлов, бэкеелер будет пилить потихоньку, вы уже будете иметь заглушки. Как это документировать это уже ваши заморочки я бы передавал примерный джисон и граничные условия. У нас допустим используется swagger но так как я пишу отдельный компонент я и фронт и Бэк делаю сам
    Ответ написан
    1 комментарий
  • Как реализовать deploy на vuejs?

    kleinmaximus
    @kleinmaximus
    Senior Full-stack Javascript Developer
    Использовать конструкцию, типа:
    const URL = process.env.NODE_ENV === 'development' ? 'localhost' : 'test.ru';
    не самый лучший вариант, т. к. всё это (хоть и в uglify-виде) уедет на production.

    Лучше сделать 2 отдельных файла и подключать их через alias webpack-a в зависимости от process.env.NODE_ENV
    Тогда при production сборке в бандл попадет только нужный нам код без мусора.
    Ответ написан
    Комментировать
  • Чем полезен Nuxt.js кроме SSR?

    zorca
    @zorca
    Продуманная структура, автогенерация роутов, набор готовых модулей (авторизация, контент и так далее)
    Ответ написан
    1 комментарий
  • Сортировка многомерного массива php?

    Gesper
    @Gesper
    php.net/manual/en/function.usort.php
    Пишете нужную cmp_function и сортируете как душе угодно.
    Ответ написан
    Комментировать
  • Насколько детально нужно знать webpack для разработчика на Vue.js?

    Если Вы хотите заниматься чем-то профессионально, то, я считаю, должны понимать все окружающие вас инструменты, уметь с ними работать и, в том числе, настраивать.
    Что babel, что webpack в своих последних итерациях не так сложны, чтобы им посвящать годы жизни.
    Выбор за Вами, конечно, но представьте токаря, который может работать только с токарным станком и пользуется ЧПУ, которые ему настроил кто-то другой, а сам понятия не имеет, как что-то изменить в своём инструменте, чтобы выпилить какую-то другую, более сложную деталь. Надеюсь, аналогию Вы уловили)
    Ответ написан
    2 комментария
  • Насколько детально нужно знать webpack для разработчика на Vue.js?

    @ddd329
    Здравствуй!
    Хотя я неплохо знаю js, но при изучении vue и react я соответственно использовал vue-cli и create-react-app. Точно не скажу, т.к. возможно я не буду прав, но думаю что надо быстрее создать с помощью этих технологий хоть какое-нибудь приложение, и "спросить" себя что же тебе больше "зашло"... Лично мне - vue.js...
    Ответ написан
    1 комментарий
  • XLSX => PHP?

    Dimitriys
    @Dimitriys
    Все вышеперечисленные ораторы писали именно о XLS -> PHP
    с XLS все на так просто… работал с множеством разных классов для парсинга… нет 100% работающего, из 500 файлов с компьютеров разных пользователей обязательно попадется файл в котором даты считаются как числовые значения или еще какой глюк.

    а если смотреть на XLSX -> PHP я бы посоветовал сделать «свой велосипед»
    1) распаковываем файл… (xlsx это обычный zip)
    2) внутри будет xl/worksheets/sheet1.xml в котором уже ваши данные в читаемой форме
    Ответ написан
    3 комментария
  • Что в CSS означает знак ">"?

    Rsa97
    @Rsa97
    Для правильного вопроса надо знать половину ответа
    > - поиск среди всех прямых потомков.
    + - элемент, непосредственно идущий за данным.
    <div id='l1_1'>
      <div id='l2_1'>
        <p id='l3'>
      </div>
      <p id='l2_2'>
    </div>
    <p id='l1_2'>
    <p id='l1_3'>

    #l1_1 > p соответствует элементу #l2_2
    #l1_1 + p соответствует элементу #l1_2
    Ответ написан
    3 комментария
  • Как сделать PDO + IN?

    @heartdevil
    плыву как воздушный шарик
    Привет.

    Вот вырезка

    /* Execute a prepared statement using an array of values for an IN clause */
    $params = array(1, 21, 63, 171);
    /* Create a string for the parameter placeholders filled to the number of params */
    $place_holders = implode(',', array_fill(0, count($params), '?'));
    
    /*
        This prepares the statement with enough unnamed placeholders for every value
        in our $params array. The values of the $params array are then bound to the
        placeholders in the prepared statement when the statement is executed.
        This is not the same thing as using PDOStatement::bindParam() since this
        requires a reference to the variable. PDOStatement::execute() only binds
        by value instead.
    */
    $sth = $dbh->prepare("SELECT id, name FROM contacts WHERE id IN ($place_holders)");
    $sth->execute($params);


    То есть, по сути, тебе можно вручную вот такую шнягу сделать
    'WHERE id in (?,?,?,?,?,?,?)'
    
    и собачить типизированные параметры
    
    ->bindParam(1, $id, PDO::PARAM_INT);
    ->bindParam(2, $id, PDO::PARAM_INT);
    ...
    
    Но это за тебя сделает
    
    вот эта штука
    
    $place_holders = implode(',', array_fill(0, count($params), '?'));
    
    насколько я понял.

    тадам
    Ответ написан
    Комментировать
  • Зачем вызов функции оборачивать в другую функцию?

    Softer
    @Softer
    Чтобы без труда поменять реализацию. Например выпустят разрабы нечто вроде Math.random_ex. Оно-то лучше, но не везде работает и менять везде по коду не удобно. А так - в одном месте сменил или if поставил и готово :)
    Ответ написан
    Комментировать
  • Как передать данные из события в событие?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    Событие - это функция.

    Передать данные в функцию можно только двумя способами:
    1) Через параметры.
    2) Через пространство имён, в котором находится функция. Сюда входят глобальные переменные.

    Так как это событие, то аргументы функции вы не контролируете. Остаётся только второй вариант. Третьего варианта не существует.

    При хранении данных в глобальном пространстве остаётся вопрос способа хранения. Можно создавать отдельные глобальные переменные (ваш вариант 1), или можно хранить переменные в объектах DOM (ваш вариант 2). По сути DOM - это помощь вам в структурировании данных, ну суть та же, т.к. доступ через глобальную переменную (document).

    Можно использовать промежуточный вариант. Создать глобальный объект { } - и в нём придумать свою структуру, какая вам будет удобна. Какие там будут идентификаторы, как осуществляться добавление данных и поиск - вам решать. Можете сделать всё красиво и удобно. Это как бы ваш личный неймспейс для конкретной фичи. От жёсткой структуры DOM вы будете независимы.
    Ответ написан
    Комментировать
  • Как отрефакторить такой код?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Общую часть похожих кусков кода превращаем в функцию, а то, чем они различаются, будем передавать в эту функцию в качестве параметров:

    [
      { del: 'region_id', search: 'regionName' },
      { del: 'district_id', search: 'districtName' },
      { del: 'area_id', search: 'areaName' },
      { del: 'city_id', search: 'cityName' },
      { del: 'place_id', search: 'cityName' },
      { del: 'name', search: 'streetName' },
    ].forEach(n => {
      if (this.tableParam[n.del]) {
        delete this.tableParam[n.del];
        this.searchForm.get(n.search).patchValue(null);
      }
    });
    Ответ написан
    5 комментариев
  • Пожалуйста оцените мое убогое ООП?

    Stasgar
    @Stasgar
    Обученная макака
    Во-первых: начните изучать архитектурную часть программирования, изучите паттерны проектирования, изучите SOLID, DRY, KISS и остальные модные словечки, постарайтесь всё это осознать, или, на крайняк - зазубрить. Всё придет с опытом, изначально все не понимали зачем всё так сложно, но эта сложность обусловлена неисчислимыми литрами слёз и потраченных нервов, всё не просто так.

    Судя по всему это тестовое или учебное задание. От вас требовалось отоверинжинирить простую задачу. Давайте попробуем:

    Суть задачи - есть файл с определенной структурой хранения данных, структура строковая. Требуется этот файл преобразовать в другую структуру данных и вывести эту структуру в json формате. Задача ясна.

    Разобъем задачу на отдельные независимые этапы:
    1) Преобразование одной структуры данных (текстового файла) в другую (объект, понятный PHP, к примеру)
    2) Преобразование этой структуры данных в Json формат.
    Первый вопрос, который может возникнуть - почему сразу не преобразовать в json? Ответ - при расширении системы в будущем - нам понадобится вывести данные в виде массива, или в виде XML, или даже в виде готового файла Excel. Нам будет сложно дополнять логику изначального класса, ничего при этом не сломав и не затронув уже существующий функционал. Также ответом на этот вопрос может являться каждая буква из SOLID принципов, подробнее отвечу дальше, когда буду пояснять за реализацию, см. ниже

    Теперь рассмотрим эту задачу с точки зрения ООП, начнем думать не от конкретной реализации, а от интерфейса и абстракции (мы не парсим конкретный файл, мы парсим просто файл, мы не переводим его в конкретное представление json, мы переводим его просто в представление):
    Нам понадобится 2 класса - непосредственно класс, читающий файл и преобразующий его в простейший тип данных (например PHP array). Второй класс - преобразователь простейшего типа данных парсера в какой-то определенный тип:
    1. LogFileReaded implements/extends FileReaderContract(интерфейс, возможно абстрактный класс, если понадобится предустановленная логика)

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

    2. JsonPresenter implements/extends DataTypePresenterContract

      Абстракция содержит контракт на метод output(), а в конструкторе принимются исходные данные. В конкретной реализации JsonPresenter в output() будет банальный json_encode() (да, это нормально, нет, класс не лишний и нет, json_encode() нельзя пихать в сам парсер) А теперь к вопросу - почему не следует просто запихать это всё в парсер и вместо массива отдать json: в будущем, когда система будет расширяться - нам понадобится представить данные в виде XML - что тогда будем делать - переписывать весь код парсера ради добавления switch case "json" и т.д.? А если что-то сломается во всей системе? А если вариантов представления станет настолько много, что файл будет просто не читаем? А при данном подходе достаточно будет просто написать новый класс XMLPresenter, или даже ExcelPresenter, который на выводе не строку будет выдавать, а целый файл (опустим типизацию output пока)). Также этот класс можно реализовать в виде декоратора (паттерн), да и много еще как.



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

    К примеру: в итоге, если вас уже повысили, и вы вместо парсинга стали заниматься более высшими материями - новому программисту, чтобы дописать логику преобразования данных в Excel не нужно знать как конкретно вы преобразовывали когда-то эти данные в json, ему не нужно дебажить ваш код, ему достаточно посмотреть на интерфейс - отнаследоваться от него и написать свой собственный метод преобразования и дальше использовать его в нужном месте.

    P.S. В данной реализации опускаются и упрощаются некоторые моменты для понятности
    Ответ написан
    21 комментарий