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

Vaultboy84

Лайки

  • Почему не работает .click()?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    А вы то сами как думаете, почему? Вы ставите обработчик на элементы, потом добавляете новые элементы, а обработчика на них нет, никто же его не ставил, верно? Нужно использовать делегирование:

    $(document).on('click', '.answer-item', function() {
  $(this).toggleClass("active");
});
    Ответ написан
    Комментировать
    Комментировать

  • Как стать Junior верстальщиком?

    Robur
    @Robur
    Знаю больше чем это необходимо
    Я все починил, теперь ваша карьера и ориентация в порядке!
    Не благодарите.
    5de34eb3a4d87370303583.png
    Ответ написан
    10 комментариев
    10 комментариев

  • Стоит ли использовать pug(jade)?

    dom1n1k
    @dom1n1k
    Мой первый опыт с тогда ещё Jade - это где-то лет 6 назад. И был он, мягко говоря, спорный. Отчасти понравилось, но больше всё-таки нет. Были проблемы, которые многократно перекрывали экономию от укороченного синтаксиса. Я писал где-то на Хабре комментарий на этот счет. В общем, забросил.

    Потом несколько раз возвращался и постепенно пришел к выводу, что если наловчиться, то некоторую пользу всё-таки извлечь можно. И важно, что со временем авторы пофиксили некоторые проблемы. Это не значит, что я полюбил Pug, но хотя бы смог использовать его без постоянного раздражения.

    Какие именно плюсы? Якобы более чистый код с отступами, отсутствие закрывающих тэгов - это всё ерунда. Может и достоинства, но точно минорные. Главное функционал, полностью отсуствующий в нативном HTML: миксины, автогенерация однотипных блоков, наследование шаблонов. Этого правда не хватает.

    Но есть два но.
    1. Подобный функционал есть в любом другом шаблонизаторе? Верно. И я посмотрел несколько (нунчаки, slim, haml, дуст). И везде я сталкивался с какими-то раздражающими нюансами или чего-то не хватало. А раз святой грааль не был найден, то я не нашёл для себя аргументов для смены шила на мыло.
    2. Мне удобнее решать такие вопросы на фронте. Если вам удобнее делать всё то же самое в PHP - тогда да, выходит, что особого смысла нет.
    Ответ написан
    Комментировать
    Комментировать

  • Миксины в SASS: когда пора остановиться?

    In4in
    @In4in
    °•× JavaScript Developer ^_^ ו°
    Эм, я конечно извиняюсь, что влезаю. Но mixin'ы существуют несколько не для того.

    Печатая код на SASS/SCSS, нужно всегда задумываться о том, как он будет выглядеть на выходе.

    Кликните сюда
    SCSS-код
    @mixin example{
   border: 1px solid red;
}

.class1{
   @include example;
}

.class2{
   @include example;
}


    На выходе CSS-код:
    .class1{
   border: 1px solid red;
}

.class2{
   border: 1px solid red;
}



    Опа, дубль. Куда лучше было бы в такой ситуации использовать extend'ы:

    Теперь сюда
    SCSS-код
    %_example{
   border: 1px solid red;
}

.class1{
   @extend %_example;
}

.class2{
   @extend %_example;
}


    На выходе CSS-код:
    .class1,  .class2{
   border: 1px solid red;
}



    Так для чего же нужны mixin'ы? Они нужны в двух случаях.

    1. Когда не подойдет использование групповых селекторов.
    2. Когда мы можем составить шаблон из свойств, но заранее не знаем какие будут их значения. То есть, когда мы в mixin будем передавать аргументы.

    _
    Ну и сюда
    SCSS-код
    @mixin example($width, $color){
   border: $width solid $color;
}

.class1{
   @include example(1px, red);
}

.class2{
   @include example(2px, yellow);
}


    На выходе CSS-код:
    .class1{
   border: 1px solid red;
}

.class2{
   border: 2px solid yellow;
}

    Ответ написан
    3 комментария
    3 комментария

  • Каков путь изучения основ программирования?

    anton_reut
    @anton_reut
    Начинающий веб-разработчик
    Такой элементарный вопрос сразу выдает ленивого трудного на подъем человека который не пошел гуглить свой вопрос а хочет получить всё готовенькое "на блюдечке". Короче сначала победи лень.
    Ответ написан
    2 комментария
    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 комментариев
    6 комментариев