Задать вопрос
  • 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 комментариев
  • Как узнать по каким ключевым словам переходили на сайт?

    @anyuta84
    Узнать запрсы по которым переходили на сайт очень просто - зарегистрируйте сайт в Яндекс и Google вебмастерах и Метрике с Аналитикой (кроме запросов найдете еще огромную кучу полезной информации). А по поводу мест в выдаче - есть огромное количество различных сервисов (единственный минус - они платные).
    Ответ написан
    1 комментарий
  • Slick, несколько слайдеров с тем же классом?

    Eridani
    @Eridani
    Мимо проходил
    На событие смены таба нужно вешать слик метод reinit
    Ответ написан
    Комментировать
  • Grid, как сделать размещение блоков с первой строки?

    @fuckingawesomenigga Автор вопроса
    grid-auto-flow: column;
    Ответ написан
    Комментировать
  • Обязательно ли учить PHP для сайта?

    Moskus
    @Moskus
    Определитесь, в чем ваш конечный вопрос.
    Если это "можно ли написать back end не на PHP?", то ответ - "безусловно, можно".
    Если это "на сколько плох PHP относительно других языков для этой задачи?", то ответ - "для вас - без разницы".
    Если это "можно ли вообще не уметь программировать и сделать сайт?", то ответ - "можно, используя конструкторы, только он будет весьма типовым и шаблонным".
    Если это "проще ли вам, не умея программировать, будет научиться это делать на других языках вместо PHP?", то ответ - "нет, не будет проще".

    Ну и, как всегда, "учить" (тупо запоминать) - бесполезно. Нужно "изучать" (разбираться и понимать).
    Ответ написан
    Комментировать
  • Как сделать вертикальную линию под текстом css?

    Eridani
    @Eridani
    Мимо проходил
    Ответ написан
    Комментировать
  • Как сделать адптивную картинку?

    rockfeeler
    @rockfeeler
    Фронтендер, дизайнер, верстальщик-перфекционист
    Первым слоем картинка (слой с относительным позиционированием). Вторым слоем текст. Третий самый высокий слой – абсолютное позиционирование с картинкой носа. Но есть хитрость: размер холста с носом должен быть на прозрачном фоне размером с картинку с лисой, чтобы при любом размере экрана поведение картинок было идентичным:

    5d414e324b588579472504.png
    Ответ написан
    3 комментария
  • Что если пользоваться одной лицензией PhpStorm на разных ПК?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Ничего не будет, вы не нарушаете условия лицензии. Все это есть в FAQ на сайте JetBrains, который, кстати, обычно изучают до приобретения лицензии, а не после ;)

    https://sales.jetbrains.com/hc/en-gb/articles/2065...
    https://sales.jetbrains.com/hc/en-gb/articles/2072...
    Ответ написан
    3 комментария
  • Можно ли обратится к псевдоэлементу через js?

    filgaponenko
    @filgaponenko
    frontend developer
    .submenu-tab:after {
      transfrom: rotat(1deg)
    }

    Можно сделать так.
    При наличии класса выставляется rotate, при отсутствии класса rotate возвращается в исходное состояние.
    Ответ написан
    2 комментария
  • Как сделать такой блок?

    @gracer
    Можно попробовать компенсировать вторым псевдоэлементом со светлой тенью
    https://codepen.io/anon/pen/wVoONB
    Ответ написан
    1 комментарий
  • Как анимировать появление градиента при hover?

    SmthTo
    @SmthTo Куратор тега CSS
    Все перепёлки мира будут оплакивать мою смерть.
    Сам по себе градиент не анимируется средствами CSS, потому что это по сути отрендеренная браузером картинка. Его можно заставить делать оное только через JS.

    Но можно анимировать отдельный блок с ним (прозрачность, трансформация и т. п.). В данном случае можно повесть на псевдоэлемент спокойно:


    В будущем есть планы сделать анимируемые градиенты в браузерах, но спецификации для этого до сих не готовы.
    Ответ написан
    Комментировать
  • Ошибка в html или css коде, в чём проблема?

    verkhoturov
    @verkhoturov
    Frontend Developer
    Убери из body свойство " line-height: 135;".
    Из-за него всех у строчных элементов на странице дикая высота.
    Ответ написан
    1 комментарий
  • Можно ли использовать при верстке CSS grid и Flexbox?

    bootd
    @bootd Куратор тега CSS
    Гугли и ты откроешь врата знаний!
    Можно, а почему вы решили что нет? Гриды и флексы призваны решать немного разные вещи
    Ответ написан
    3 комментария
  • Как на css сделать кривой четырехугольник?

    profesor08
    @profesor08 Куратор тега CSS
    clip-path

    svg картинку на фон

    css 3d transform для псевдо-элемента
    Ответ написан
    Комментировать
  • Какие best practice разработки с WordPress для новичка?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Во-первых, прекратите спамить всех подряд, такой подход не очень продуктивен.

    Во-вторых, у вас не вопрос. Вопрос - это как правило одна (иди хотя бы одна главная) проблема, которую можно решить одним ответом. Как правило не очень объемным, потому что S из SOLID, как мы знаем, это Single Responsibility Principle. Ваш вопрос его нарушает чуть более чем полностью. Из этого следует, что вам нужно разбить ваш вопрос на множество других. И задавать их желательно по порядку, получая ответы, применяя их в жизни, практикуясь, и только потом переходя далее. Ибо влить в мозг весь этот объем информации за раз можно только в фильме "Матрица", а мы, увы, не там.

    Тезисно пройдусь по пунктам, чтобы прояснить ситуацию.

    Хочу изучить новые инструменты и вообще понять что есть best practice в мире wp сейчас!

    Не существует единой best practice. Есть разные подходы, каждый из них имеет плюсы, минусы и право на жизнь. Все очень сильно зависит от команды, ее размера и опыта, компании и процессов, клиента, проекта, его размера и бюджета и тд. Ну а общие принципы мало отличаются от разработки в целом, будь то Symfony, Laravel, Ruby on Rails и тд.

    Я нашел много интересного, но пока не понимаю как это всё собрать воедино, что зачем нужно, много непонимания

    Это нормально. Почему - перечитайте абзац про Single Responsibility Principle выше.

    1. среду разработки использую PhpStorm, по университетской лицензии.

    Несущественно. PhpStorm отличная IDE, пожалуй лучшая для разработки на PHP в целом, WP или нет - не важно (сам использую именно ее). Но далеко не все могут использовать ее бесплатно по университетской лицензии, многие покупать не хотят, многим не нравится производительность. Стандарт ли это? Для кого как.

    2. для версий кода использую Git, храню локально и на Gitlab.

    Git - это наиболее популярная VCS на данный момент. Само использование системы контроля версий является стандартом, во всем мире разработки.

    3. при разработке пушу через SSH сразу на shared хостинг, а не на локальный сервер (никогда локальным не пользовался, а надо? каким?)

    Использование локального сервера - стандарт. Обязательно, не обсуждается. Пушить на shared - плохая практика (и пушить на прод, и shared). Изучаем про локальные сервера, Continuous Integration и Continuous Delivery. Впрочем, для WP важно понимать, что бОльшая часть проектов будет простая и небольшая, со скромным бюджетом, а там вся эта кухня может быть лишней (смотрим абзац про зависимость best practices от проекта и тд). Поэтому обычного простого деплоя по мерджу в мастер хватит. Гугл в помощь.

    4. работаю под Linux, знаком с консолью, bash, но не понимаю как использовать wp-cli, в чем он удобен?

    WP-CLI это инструмент. Использовать его - хорошо. Чем удобен / полезен поймете когда разберетесь с деплоями, автоматизацией и тд. Но не поймете если не начнете заставлять себя с ним работать.

    5. присматриваюсь к Roots и Bedrock, но не понимаю как к ним подступиться, нужно объяснение что и зачем делать, какие-то инструкции..

    Рано. Очень рано вам к ним присматриваться.

    6. хочу начать использовать composer

    Начинайте. Гуглите, материалы на эту тему есть. Будут конкретные вопросы - задавайте, будем отвечать.

    7. хочу начать писать тесты, PHPUnit?

    Если бы спрашивали за Laravel, то да. Но по WP - забудьте. Думать про тесты в WP вам рано и не нужно. Голову сломаете. Да и проекты, где это понадобится вам пока не светят.

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

    Это не только сейчас и не только про WP. Добро пожаловать в прекрасный мир разработки, где каждый второй с радостью обосрёт инструмент, о котором мало что знает или потому что ему лично он не подходит / не нравится. Вырабатывайте свое личное мнение. WP сам по себе лишь инструмент. Хороший или плохой - не важно. Он решает определенные задачи, и делает это лучше / быстрее / дешевле / проще других.

    Как всё это собрать вместе?

    Постепенно. Шаг за шагом. Слона нужно есть по частям, иначе подавитесь.

    Прошу подробных ответов, по возможности со ссылками и/или инструкциями.

    Это придется накатать книгу, и не одну.

    Хочу учиться.

    Достойное желание. Учитесь, никто не мешает. Гугл, кодекс, кама и другие ресурсы в помощь.

    Бонус: запомните одну простую истину - вы не сможете что-то изучить или освоить, если не начнете с ним работать. Только на реальной практике можно понять и осознать. Можно прочитать 10 лучших книг про ООП (для примера), но пока вы не напишете, выбросите, перепишете несколько раз свой код на ООП, вы его не поймете.
    Ответ написан
    Комментировать
  • Как имитировать hover в таблице?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    table 
      tr.hover
      tr
      tr


    table:not(:hover) .hover,
    table tr:hover {
      background: green;
      color: white;
    }


    Ответ написан
    Комментировать
  • Почему в меню Toster.ru нет 'Мои вопросы'?

    dollar
    @dollar
    Делай добро и бросай его в воду.
    У меня есть :)
    spoiler
    5d1c44ce1b25c388943576.png

    А вообще просто кликаешь по своему нику - и переходишь в свой профиль, там всё есть.
    Ответ написан
    3 комментария
  • Верстка блока "как мы работаем" со стрелками между элементами, как оптимальнее?

    LenovoId
    @LenovoId
    svg, css,js
    Примерно так ...если интересно спрашивай - научу ..у меня есть время

    Ответ написан
    Комментировать
  • Как сделать повторяющийся шаблон в CSS Grid?

    dicem
    @dicem Автор вопроса
    Решение нашел.
    Ответ написан
    Комментировать