Задать вопрос
  • Потенциал верстальщика?

    opium
    @opium
    Просто люблю качественно работать
    Заходишь на хх ру и смотришь потенциал любой работы
    Ответ написан
    Комментировать
  • Почему React разработчики не пишут циклы for, while?

    hzzzzl
    @hzzzzl
    hulktoster, map/filter/reduce делают как раз то, что надо в реакте - преобразовывают массив с данными в массив с компонентами реакта, можно конечно и через циклы, но это будет больше писанины и будет менее наглядно

    data = [........]
    
    render() {
      return (
      <>
        { data.map(x => <MyComponent prop1={x.prop1} prop2={x.prop2} />) }
      </>
      )
    }


    data = [........]
    
    render() {
      const components = []
      for(let i = 0; i < data.length; i++) {
        const x = data[i]
        components.push(<MyComponent  prop1={x.prop1} prop2={x.prop2} />)
      }
    
      return (
      <>
        { components }
      </>
      )
    }


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

    @quadabrashell
    Vue-way - хранить стили в .vue, для того оно и придумано. Компонентный подход улучшает восприятие кода.

    css-файл можно оставить только если, например, он уже остался от верстальщика и лень раскидывать по компонентам.
    Ответ написан
    2 комментария
  • 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 комментариев
  • Можно ли упростить функцию?

    customtema
    @customtema
    arint.ru
    Можно.
    Ответ написан
    Комментировать
  • Что не так с сайтом с точки зрения продвижения и что надо изменить в верстке?

    @PavelMoleskin
    Я всего-лишь открыл исходный код страницы и уже увидел, что ему мешает5d67e33ba1cc4273230862.jpeg
    Ответ написан
    5 комментариев