Ответы пользователя по тегу HTML
  • Какой порядок обучения веб-верстке вы посоветуете?

    theobroma
    @theobroma
    javascript developer (ReactJS)
    Здесь проблема даже не SASS, Bootstrap и т.д., а "телеги впереди лошади". Невозможно понять предназначение инструментов не столкнувшись с проблемой, которую они решают! Нельзя понять зачем бензопила если есть ножовка по дереву, пока не начнешь пилить определенные объемы древесины! Да бензопила сложней в понимании и обращении, но ее освоение стоит того...
    Вернемся к Вебу. У меня, к примеру, быстро возникло ощущение, что чего-то не хватает в самом CSS и я начал смотреть на препроцессоры. Вам нужно просто продолжать верстать макеты. Через боль со временем начнут проявляться проблемы и возникнет желание что-то ускорить, что-то упростить. Тогда и начинают искать инструменты для этого.
    Препроцессоры
    1. Сложность будет увеличиваться и захочется, например, писать все для удобства не в одном файла . Тогда станет ясно для чего импорты препроцессоров(нативный импорт CSS лучше не использовать).
    2. Обычно в макете несколько цветов, которые повторяются во многих местах. Их можно присвоить в понятные переменные типа $my-green или $my-orange, которые легко запомнить и не искать hex значения. "$my-orange" проще запомнить чем "#FF8C00", не так ли?
    3. В макете размеры в пикселях, а нужно верстать в em и rem. На этот случай есть конечно лайфхак с 10px в основе вместо 16px, но миксины по конвертации на все случаи жизни. То есть можно применить "em(18)" и 18px скомпилятся в "1,125em" и не нужен калькулятор.
    Не стоить пытаться применить все возможности какой-то технологии сразу. Время придет для всего, но сначала используйте, что считаете нужным именно в данный момент. Попробуйте SASS на уровне "переменные, миксины, нестингы". Это уже будет норм. Рекомендую максимально просто это сделать c gulp и gulp-sass. Чисто для компиляции SASS и без всего остального, пока не созреете на большее.
    Boostrap
    Не стоить учится верстать с бутстрапом. В нем можно подсмотреть как реализована та или иная штука, просто вдохновиться, посмотреть на компоненты, которые вообще могут быть. Но применять его лучше, когда уже верстать не хочется))) А это будет, когда захочется использовать фрейморк для написания приложения. На что можно обратить внимание, так это что такое сетка(grid) и ее реализация. Вот онa используется много где.
    Начать ознакомление можно просто подключив через тэги c CDN . А потом уже можно устанавливать с NPM sass версию, кастомизировать и т.д.. Вообще приступая к изучению любой технологии нужно пытаться сгладить кривую обучения и не хвататься за все сразу.
    Javascript
    На счет JS лучше CodeWars не знаю ничего. Тут подробней отвечал. Потом нужно учить фронтэнд фрейморки, но это уже совсем другая история...
    Ответ написан
  • Как добавить игнорирование компиляции less в gulp?

    theobroma
    @theobroma
    javascript developer (ReactJS)
    Сам этим пользуюсь. Нет нужды в дополнительных плагинах. Все внимание на вторую строчку.
    '!' + paths.src + 'sass/**/_*.{sass,scss}' означает: "Не надо компилить файлы с расширением SCSS и SASS, которые начинаются на '_' ". Аналогичное можно и с Jade-файлами. Gulp ничего сам по себе не должен. Данный подход с некомпиляцией файлов, начинающихся на подчерк, соглашение и не более того. Очень удобное, правильно, что используете.
    gulp.task('sass', function () {
       return gulp.src([paths.src + 'sass/**/*.{sass,scss}', '!' + paths.src + 'sass/**/_*.{sass,scss}']) //<--------------------
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.dist + '/css/'))
        .pipe(browserSync.reload({stream: true}))
        .pipe(notify("SASS Compiled"));
    });
    Ответ написан
  • Как правильно вынести header и footer во внешний файл в HTML шаблоне?

    theobroma
    @theobroma
    javascript developer (ReactJS)
    Когда я был полным новичком, то использовал для этого PHP, как в WordPress. Создаются нужные файлы : footer.php, header.php, index.php и т.д. Потом подключаются через инклюды
    <?php include 'header.php';?> Code goes here... <?php include 'footer.php';?>
    . Разумеется, это все должно быть запущено через веб-сервер. Плюс такого подхода, что не нужно изучать что-то новое. Gulp и jade требуют времени (и желания) хотя и немного.
    Если время есть, то ответ Serj-One в самую точку. Сам пользуюсь Jade, рекомендую.
    Ответ написан