"Оцените вёрстку" или всё ли я делаю правильно?

Question

[Станислав Ботев]

Доброго времени суток. К великому сожалению, начал работать в сфере фронтенда совсем недавно. Научился верстать, писать простые скрипты на JQuery, использовать Git, Gulp, Stylus.

JQuery мне безумно понравился за возможность делать страницу интерактивной в несколько строчек кода. Мой уровень знания ванильного JS крайне низок, я считаю. Изучаю его помаленьку, потому что на всё времени не хватает, даже если просыпаться на пару часов перед работой. Сказывается то, за что мне так безумно нравится Frontend - он необъятен и постоянно развивается. Не пытаюсь объять необъятное. Мне это интересно и я рад, что сделал это своей работой, которая приносит мне удовольствие.

Очень впечатлили эти сайты: Тебе не нужен JQuery и Ванильный JS. JQuery мне представляется довольно простым - краткий и интуитивно понятный синтаксис.

До этого я верстал простые макеты, даже не доводя их до конца - не понимал, почему блоки при изменении размера экрана ведут себя не так, как ожидал и пр. Изучал фронтенд понемногу, вечерами дома.

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

Верстаю один и с нуля этот сайт. Сейчас есть только главная страница, Roof и Ruukki. Таких страниц будет очень много, с разным наполнением, содержанием и контентом. Это только начало. Наступаю на пятки дизайнеру, потому как эти три макета это всё, что он мне прислал за 9 дней. Последний - Ruukki - заверстал вчера за вечер, сидя дома. Сегодня вылизывал до блеска (хотя и это не идеал).

Адаптивности нет, потому как об этом разговора пока не идёт. Либо будет отдельная простая версия, либо буду прописывать media queries. Поддержка браузеров такая.
Мои таски:

• gulp-stylus
  
• gulp-autoprefixer
  
• gulp-imagemin
  
• browser-sync
  
• gulp-uncss
  
• gulp-csscomb
  
• gulp-rucksack
  

Написал это всё я лишь для того, чтобы Вы понимали мой бэкграунд, могли посоветовать то, что видите нужней и не советовали то, чем я уже пользуюсь и что умею. Я не всё умею, не всё получается сразу. Роюсь в интернете в поисках ответа, задаю вопросы. И этот один из них.
Мой вопрос заключается в следующем: правильно ли я верстаю и что нужно делать, чтобы стать лучше в профессиональном плане?

Comments

[Сергей Тутуков]

1. Ужасный весь файл <script src="js/custom-slider.js"></script>

$(function () {
    $('.slide-1').click(function () {
        $(this).addClass('active').removeClass('passive');
        $('.main-text-1').css('display', 'flex');
        $('.slide-2').addClass('passive').removeClass('active');
        $('.slide-3').addClass('passive').removeClass('active');
        $('.slide-4').addClass('passive').removeClass('active');
        $('.slide-5').addClass('passive').removeClass('active');
        $('.slide-6').addClass('passive').removeClass('active');
    });
...
});

1.2. Прости, но ты не знаешь, что такое focus(), blur().
1.3. И на мобильных устройствах нет событие mouseover:(

$('.roofl').mouseover(function () {
        $('.slide-1').focus();
        $('.main-text-1').css('display', 'flex');
        $('.arrow-1').css('display', 'block');
    });
    $('.fasadl').mouseover(function () {
        $('.slide-2').focus();
    });
    $('.designl').mouseover(function () {
        $('.slide-3').focus();
    });
    $('html').blur(function () {

2. Лишних 3 раза обращаешься к DOM

$('.all').scroll(function() {
            var ratio = $('.all').scrollTop() / (($('.all').height() - $('.all').height()) / 100);
            $("#progress").width(ratio + "%");
      });

3. Посмотри, что такое return

$(".lang").on("click", function() {
    $(this).text(function(e, t) {
        return e = $.inArray(t, messg),
        messg[++e % messg.length]
    })
});

[Сергей Тутуков]

Прости, но верста находится еще в более плачевном состоянии:((
Нет ни одного правильного момента(((

[Станислав Ботев]

Сергей Тутуков: Спасибо. А как бы Вы заверстали?

[Сергей Тутуков]

Станислав Ботев: давай я тебе только по js объясню...
1. Вот это у тебя на 50 строк

$('.slide-1').click(function () {
        $(this).addClass('active').removeClass('passive');
        $('.main-text-1').css('display', 'flex');
        $('.slide-2').addClass('passive').removeClass('active');
        $('.slide-3').addClass('passive').removeClass('active');
        $('.slide-4').addClass('passive').removeClass('active');
        $('.slide-5').addClass('passive').removeClass('active');
        $('.slide-6').addClass('passive').removeClass('active');
    });

Задаешь один класс, на все слайды и пишешь (50 строк сократилось в 3)

$('.slide').on('click', function () {
    $(this).addClass('active').siblings().removeClass('active');
});

Не совсем понимаю зачем класс .passive. Почему нельзя сразу написать свойства этого класса контейнеру и .active'ом изменять нужный контейнер.
Зачем вот это $('.main-text-1').css('display', 'flex');? Нельзя ли написать в css свойствах, что-то типо этого

.slide.active .main-text-1{
	display:flex;
}

[Станислав Ботев]

Сергей Тутуков: Огромное спасибо! Вас удар хватит, но изначально логика слайдера была в 240 строках. Это затем я дошел до того, чтобы задать два класса. Спасибо!

[Сергей Тутуков]

Пункт 2 должен сократиться на что-то универсальное:). Что-то типо этого

$('.rofas-nav li a').on('mouseover',function () {
    var index = $(this).parent().index();
    $('.slide').removeClass('active').eq(index).addClass('active');
});

[Станислав Ботев]

Сергей Тутуков: И не подскажите, как на странице Roof связать <div class="hr"> с полосой прокрутки?

[Сергей Тутуков]

Вот этот код у тебя вообще не работает)))

$('.all').scroll(function() {
            var ratio = $('.all').scrollTop() / (($('.all').height() - $('.all').height()) / 100);
            $("#progress").width(ratio + "%");
      });

скролиться .object-container. Можешь проверить в консоли

$('.object-container').scroll(function() {
 console.log($(this).scrollTop());
});

[Станислав Ботев]

Сергей Тутуков:

$('.object-container').scroll(function() {
            var ratio = $('.object-container').scrollTop() / (($('.all').height() - $(window).height()) / 100);
            $(".hr").width(ratio + "%");
});

Вот так работает, спасибо

[Сергей Тутуков]

Станислав Ботев: Ладно и так сойдет:) уже намного лучше)
Все последний совет. Не делай так никогда, и вообще зачем это?

$(document).ready(function() {
            $('.slide-1').focus();
        });

Представь такую ситуацию:
- сайт огромный (много css, js)
- слабый интернет
- много картинок
Пока у тебя вся страница не погрузится, у тебя фокус не сработает. Да и почему тебя фокус!?!? Фокус нужно использовать у input, textarea...
Тебе в верстке нужно было сразу добавить класс .active к первому .slide, чтобы даже без js у тебя все нормально прогрузилось.

[tyzberd]

Зачем картинки в png, плохого качества и маленькой ширины, на мониторе с 1920px они еще хуже.

Answer 1

[Игорь Перегудов]

круто сделано! :) красавчик
по вопросу: тут тебе нужно определиться куда ты хочешь идти дальше? верстка или фронтенд, если верстка то продолжай в том же духе - ты всё правильно делаешь, читай скринкасты, слушай подкасты, читай сайты по твоей тематике и самое главное продолжай верстать )
если фронтенд (javascript) - прочитай в первую очередь "Подробное руководство JavaScript - Флэнаган" там в голове более менее устаканится по js и там еще больше будет ясности в голове, куда копать )

p.s. подскажи пожалуйста, как ты на главной сделал слайдер, очень понравился - интересно :)

Comments

[Станислав Ботев]

Я пытался приспособить слайдеры на JQuery. Мне они не нравились хотя бы потому, что я не знал, как они работают, и подозревал, что они нагрузят ПК посетителя.
Поэтому слайдер написал на CSS. У меня шесть слайдов, каждому из них задан flex-grow: 1, а при фокусе один из слайдов получает flex-grow: 15. Это сделано для того, чтобы открытый слайд занимал ровно 75%, остальным по 5%. В CSS я не нашел прямого события "клик", поэтому выбрал :focus для решения своей задачи. У каждого слайда задан своей бэкграунд и таб-индекс. Поэтому при фокусе он открывается.

[Игорь Перегудов]

крутая реализация ;)