Html страница глазами разработчика приложений. Часть 1: «Подготовка»

    Передо мной встала задача по обновлению текущего сайта одной компании, и в соответствии тренду выбор пал на landing page с поддержкой мультиязычности.


    Посмотрев на реализации представленные в интернете я ужаснулась. В теле страницы куча текста! С такой разметкой же невозможно работать. А если надо поменять информацию? Это надо лезть в html, искать нужное, и менять в нескольких местах. Короче ужас! И я подумала что хорошо бы использовать базу данных, но это же обычная страница, и разворачивать ради нее целый сервер? и базу? как то перебор! Работая с Angular2 я подумала что было бы классно с его помощью создать страницу, но он очень тяжелый, и не подходит… И тут я вспомнила о его аналоге Vue.js. Легкая библиотека, для создания приложений. Я подумала: "А почему бы не создать сайт с помощью vue и добавить имитацию базы?".


    Обдумав все за и против, посмотрев на другие подходы, мне захотелось внести немного "красоты" в html верстку.


    Для объяснения подхода я решила сделать небольшую страничку, потому что выкладывание полного кода существующей страницы считаю слишком "тяжелым".


    Но пришлось все равно разбивать статью на 2ве части, тут описывается только подготовка небольшой страницы и добавление меню для смены языка.


    image


    Итак, начнем!


    Создадим папку в которой будем работать, далее в ней создадим папку "css" и туда добавим соответственно файл с нашими классами для странички: "style.css"


    #main{
        height:100%;
        width:100%;
        position:absolute;
        top:0;
        right:0;
        opacity:1;
    }
    
    #wrapper{
        float:left;
        width:100%;
        height:100%;
        position: relative;
        z-index:4;
    }
    
    .content-holder{
        vertical-align: top;
        float:left;
        width:100%;
        position:relative;
        height:100%;
        left: 0;
        top: 0;
        right: 0;
        z-index: 2;
    }
    
    <---------------header--------------->
    header {
      position: fixed;
      width: 100%;
        z-index:22;
        top:0;
        left:0;
        background:rgba(255,255,255,1);
        box-shadow: 0 0 10px rgba(0,0,0,.1);
    }
    
    .transition{
        -webkit-transition: all 500ms linear;
        -moz-transition: all 500ms linear;
        -o-transition: all 500ms linear;
        -ms-transition: all 500ms linear;
        transition: all 500ms linear;
    }
    
    .tr-header{
        background:rgba(255,255,255,0.0);
        border-bottom:1px solid rgba(255,255,255,0.4);
    }
    
    header.tr-header.sticky {
       background:rgba(255,255,255,1);
       box-shadow: 0 0 10px rgba(0,0,0,.1);
    }
    
    .header-height-emulator {
        float: left;
        width: 100%;
        position: relative;
        z-index: 1;
    }
    
    .container{
        width:92%;
        max-width:100%;
        margin:20px  auto;
        position: relative;
        zoom:1;
        z-index:3;
    }
    
    .nav-holder {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row-reverse;
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
    }
    
    .scroll-nav  {
        float:right;
    }
    
    .scroll-nav  li {
        display:inline-block;
    }
    .scroll-nav  li a {
        background: #6dc77a;
        float: left;
        border-radius: 25px;
        padding: 10px 22px;
        font-weight: bold;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #fff;
        border:2px solid   rgba(255,255,255,0);
        -webkit-transition: all 200ms linear;
        -moz-transition: all 200ms linear;
        -o-transition: all 200ms linear;
        -ms-transition: all 200ms linear;
        transition: all 200ms linear;
    }
    
    .scroll-nav li a:hover ,
    .scroll-nav li.actscroll a {
        border:2px solid   rgba(255,255,255,1.0);
    }
    <---------------end header--------------->

    Далее создаем index.html(в основной папке) со следующим кодом:


    <head>
        <!--=============== basic  ===============-->
        <meta charset="UTF-8">
        <title> My Company</title>
        <!--=============== css  ===============-->
        <link rel="stylesheet" type="text/css" href="css/style.css" media="all">
    </head>
    <body>
        <!--================= main start ================-->
        <div id="main">
            <div id="wrapper">
                <div class="content-holder">
                    <!--================= Header + Scroll navigation ================-->
                     <header class="transition tr-header" id="header">
                        <div class="container">
                            <div class="nav-holder">
                                <nav class="scroll-nav">
                                    <ul>
                                        <li class="actscroll"><a href="#sec1">Главная </a></li>
                                        <li><a href="#sec2">О нас</a></li>
                                        <li><a href="#sec3">Наша продукция</a></li>
                                        <li><a href="#sec4">Наши технологии</a></li>
                                        <li><a href="#sec5">Где приобрести</a></li>
                                        <li><a href="#sec6">Поддержка</a></li>
                                        <li><a href="#sec7">Партнеры</a></li>
                                        <li><a href="#sec8">Контакты</a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </header>
                    <!-- End header -->
                </div>
            </div>
        </div>
    </body>
    </html>

    Для красоты скачаем любую картинку, и добавим ее в новую папку "images". И разместим ее вверху страницы.


    <body>
        <!--================= main start ================-->
        <div id="main">
            <div id="wrapper">
                <div class="content-holder">
                    <!--================= Header + Scroll navigation ================-->
                     <header class="transition tr-header" id="header">
                        ............
                    </header>
                    <!-- End header -->
                    <!--================= Photo home  ================-->
            <section class="is_overlay page-title-bg"  id="sec1" name="sec1">
                        <div class="bg bg-parallax run-par2" style="background-image: url(images/paraplan.jpg) "></div>
                        <div class="overlay over-op6"></div>
                    </section>
                    <!-- section end -->
                </div>
            </div>
        </div>
    </body>
    </html>

    И соответствующие классы в "style.css"


    <---------------photo home--------------->
    .page-title-bg {
        padding:250px 0;
        color:#fff;
        overflow:hidden;
    }
    
    .bg {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-size: cover;
        background-attachment: scroll;
        background-position: center;
        background-repeat:repeat;
    }
    
    .is_overlay{ 
        position: inherit; 
        display: block; 
        width: 100%; 
        height: 100%; 
    }
    
    .overlay {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        z-index:2;
        background:#292929;
        opacity:0.4;
    }
    .over-op6 {
        opacity:0.6;
    }
    <---------------end photo--------------->

    Следом создаем еще одну папку "scripts".


    Я предпочитаю скачивать файлы библиотек, поэтому я скачала Jquery.min и поместила его в папку "scripts".


    Так же для создания меню выбора языков, я скачала круглые иконки с флагами стран (в данном случае мне понадобилось всего 2ве иконки) которые я разместила в новой папке "flags".


    И создала классы которые содержат данные иконки, чтобы не путаться я добавила еще один css файл, в соответствующуюю папку. "multilanguage.css"


    .flag {
        width: 2rem;
        height: 2rem;
        margin-right: 1rem
    }
    
    .flag-ru {
        background-image: url(../flags/russia.svg);
    }
    
    .flag-us {
        background-image: url(../flags/united-states-of-america.svg);
    }
    
    .flag:hover {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }
    
    .select-flag {
        -webkit-filter: brightness(205%);
        filter: brightness(205%);
    }
    
    .lang-dropdown {
        margin-right: 2rem
    }
    
    .flag-with-menu {
        display: flex;
        flex-direction: row;
    }
    
    .lang-menu {
        z-index: 1;
        position: absolute;
        background-color: var(--dark-element-color);
        border-radius: 8px;
        padding: 0.5rem;
        margin-top: 0.5rem;
    }
    
    .lang-first-init {
        display: none !important;
    }

    Эти все классы описывают наше языковое меню.


    Не забываем подключать новые файлы к странице!!!


       <link rel="stylesheet" type="text/css" href="css/multilanguage.css" media="all">

    Добавим наше меню на страницу в хедер.


                  <header class="transition tr-header" id="header">
                        <div class="container">
                            <div class="nav-holder">
                                <nav class="scroll-nav">
                                   .......
                                </nav>
                                <div class="lang-dropdown">
                                    <div class="flag-with-menu" id="flag-menu">
                                        <div class="flag flag-ru" lang-value="ru-RU"></div>
                                    </div>
                                    <div id="lang-menu" class="lang-menu lang-first-init">
                                        <div class="flag flag-us" lang-value="en-US"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </header>

    И так же классы анимации в "multilanguage.css"


    .animation-lang-show {
        overflow: hidden;
        animation: 0.8s ease showBlock;
    }
    
    @keyframes showBlock {
        from {
            max-height: 0px;
            padding-bottom: 0rem;
            padding-top: 0rem;
        }
    
        to {
            max-height: 20rem;
        }
    }
    
    .animation-lang-hide {
        animation-timing-function: linear;
        animation-name: hideBlock;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        overflow: hidden;
    }
    
    @keyframes hideBlock {
        from {
            max-height: 20rem;
        }
    
        to {
            display: none;
            height: 0px;
            max-height: 0px;
            padding-bottom: 0em;
            padding-top: 0rem;
            margin-top: 0em;
            padding-left: 0em;
            margin-bottom: 0em
        }
    }

    Теперь займемся описание этого меню в JS.


    Я буду давать максимально полные комментарии, на случай если кто то не понимает.
    В папке "scripts" создаем новый файл "cookie.js"


    В нем будет всего два метода: Сохранить куки и Взять куки с нужным именем


    function setCookie(key, value) {
        var expires = new Date();
        expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000));
        document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
    }
    
    function getCookie(key) {
        var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
        return keyValue ? keyValue[2] : null;
    }

    Подключаем данный файл на странице!


     <script type="text/javascript" src="scripts/jquery.min.js"></script>
     <script type="text/javascript" src="scripts/cookie.js"></script>

    Создаем файл который будет отвечать за работу нашего меню.


    В папке "scripts" создаем новый файл "multilanguage.js"


    $(document).ready(function () {
        var language = navigator.language || navigator.browserLanguage; //определяем язык браузера
        var userLanguage = getCookie("language") || language; //проверяем, есть ли нами записанные куки с выбранным языком, для этого устройства. На случай если человек не первый раз на нашей странице
        var isMenuClicked = false;
        var menu = $('#lang-menu'); //после мы часто будем к нему обращаться, поэтому добавляем в переменную
    
        replaceElementAndSelect(userLanguage); //делаем замену иконки, на выбранный язык или язык браузера
    
        //регистрируем клик по нашему флажку
       $("#flag-menu").click(function () {
            isMenuClicked = true;
            showOrHideMenu();
        })
    
        //добавляем метод для определения показывать или скрывать меню
        function showOrHideMenu() {
            if (menu.hasClass('lang-first-init')) {
                menu.removeClass('lang-first-init');
                menu.addClass('animation-lang-show');
            } else {
                if (menu.hasClass('animation-lang-show')) {
                    hideMenu();
                } else {
                    showMenu();
                }
            }
        }
    
        //добавляем методы для показа и скрытия меню
        function showMenu() {
            menu.removeClass('animation-lang-hide');
            menu.addClass('animation-lang-show');
        }
    
        function hideMenu() {
            menu.removeClass('animation-lang-show');
            menu.addClass('animation-lang-hide');
        }
    
       //регистрируем клик по флагу
        $(document).on('click', '.flag', function () {
            if (!isMenuClicked) { // проверяем открыто меню или нет
                var newLang = $(this).attr('lang-value'); //берем новое значение языка
                language = newLang;
                setCookie("language", language); //записываем для будущего использования
                languageChange(newLang); //меняем язык
                hideMenu();
            }
            isMenuClicked = false;
        });
    
        //тут происходит смена языка и самое главное мы отправляем эвент что была нажата кнопка смены языка, и его мы можем отловить в других скриптах
        function languageChange(lang) {
            replaceElementAndSelect(lang);
            $(document).trigger('onLanguageChange', [lang]);
        }
    
        function replaceElementAndSelect(lang) {
            var element = ".flag[lang-value='" + lang + "']"; // подставляем выбранное значение языка
    
            var selectLang = $(element).clone(true); //копируем элемент
            var defoultElement = $('.flag-with-menu').find('.flag').clone(true); // ищем выбранный элемент в меню
    
            //меняем наши элементы местами
            $(element).replaceWith(defoultElement); 
            $('.flag-with-menu').find('.flag').replaceWith(selectLang);
    
            //удаляем класс подсвечивающий выбранный язык
            $('.lang-dropdown').children().children().removeClass('select-flag');
            $(element).addClass('select-flag');
        }
    })

    Подключаем данный файл на странице!


     <script type="text/javascript" src="scripts/jquery.min.js"></script>
     <script type="text/javascript" src="scripts/cookie.js"></script>
    <script type="text/javascript" src="scripts/multilanguage.js"></script>

    Вернемся к нашей странице.


    Добавим несколько секций с любым текстом. Я для примера добавлю одну, чтоб сэкономить место:


               <div class="content-holder">
                    <!--================= Header ================-->
                    <header class="transition tr-header" id="header">
                        ..........
                    </header>
                    <!-- End header -->
                    <!--================= Photo home  ================-->
                    <section class="is_overlay page-title-bg" id="sec1" name="sec1">
                        ........
                    </section>
                    <!-- section end -->
                    <section class="align-text" id="sec2" name="sec2">
                        <div class="content">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-6 ">
                                        <h3>Заголовок о нашей компании</h3>
                                        <div class="clearfix"></div>
                                        <div class="separator color-separator flt-l"></div>
                                        <div class="clearfix"></div>
                                        <p>«Хабрахабр» — крупнейший в Европе ресурс для IT-специалистов, издаваемый компанией «ТМ». С момента появления в 2006-м году «Хабр» трансформировался из небольшого отраслевого сайта в глобальную профессиональную площадку, которую ежемесячно посещают более 8 миллионов уникальных пользователей.
    
    «Хабрахабр» одинаково интересен программистам и разработчикам, администраторам и тестировщикам, дизайнерам и верстальщикам, аналитикам и копирайтерам, а также всем тем, для кого IT — это не просто две буквы алфавита.
    
    Расширение тематики «Хабра» дало начало сайту-спутнику — Geektimes, на который переехали непрофильные хабы и значительная часть контента, не имеющего непосредственного отношения к разработке и программированию.</p>
                                    </div>
                                    <div class="col-md-6 ">
                                        <h3>Заголовок: Наша миссия</h3>
                                        <div class="clearfix"></div>
                                        <div class="separator color-separator flt-l"></div>
                                        <div class="clearfix"></div>
                                        <p>Данный сайт представляет собой платформу для информационного обмена между участниками пользовательского сообщества. Сообщество пользователей сайта является саморегулируемым, поэтому разобраться во всех нюансах работы проекта с первого раза получается далеко не у всех. Чтобы объяснить, как всё устроено, мы подготовили данный справочный раздел. Справа представлен рубрикатор справочного раздела. Для получения разъяснений выберите соответствующий пункт рубрикатора и ознакомьтесь с предложенной информацией. Если вам не удалось найти ответ на интересующий вопрос, пожалуйста, воспользуйтесь формой обратной связи.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
               </div>

    И добавляем несколько классов в "style.css"


    <---------------section--------------- > 
    .align-text {
        text-align: left;
    }
    .align-text p , .align-text .separator{
        float:left;
    }
    .align-text h3 {
        font-size:16px;
        text-transform:uppercase;
        font-family: 'Montserrat', sans-serif;
        color:#666;
        padding-bottom:20px;
    }
    
    section {
        float:left;
        width:100%;
        padding:50px 0;
        position:relative;
        z-index:12;
        background:#fff;
    }
    
    .col-md-6 {
        padding-left: 0px;
        padding-right: 0px; 
    }
    <---------------section--------------- > 

    Вот и все! Мы наконец подготовили нашу страницу для самого интересного! Как это все представить более красиво и сделать смену языка без перезагрузки станицы.


    Вторая часть

    Поделиться публикацией
    Похожие публикации
    Ой, у вас баннер убежал!

    Ну. И что?
    Реклама
    Комментарии 37
    • +4
      2ве

      Пожалуйста, не надо так!


      У вас Landing page, но вы хотите динамический контент без серверного рендеринга. Будет ли сайт корректно индексироваться в поисковиках?

      • –3
        Я не очень хорошо знакома с роботами, но они ведь заходят на сайт по ссылке, значит запускают все скрипты, которые и делают подмену текста, я планирую за завтра написать вторую часть где оставшаяся часть будет расписана
        • +1

          Не индексируют они скрипты. На примере комментариев от дискуса. Или там сделано иначе?

          • +1
            Если бы все было так круто, веб бы изменился в течение часа.
            Но нет. Поисковики не запускают JS. Пытаются потихоньку, но пока особо нет результатов.

            Впрочем, лендинг и не рассчитан на индексацию. Он рассчитан на рекламные каналы, которым наплевать на индексацию.
            • 0
              Если зайти через консоль вебмастера Гугла на сайт, где контент загружается через JS и посмотреть на страницу «глазами» робота, то видно, что js они запускают. И после появления node.js, наверное, все более-менее приличные боты JS стали уметь.
              Другое дело — как такой текст ранжируется. Но тут только СЕОшники подскажут, т.к. надо на практике сравнивать.
              • –1
                Верно, не так выразился. Запускать то они его запускают, но вот я не видел пока ни одного JS-сайта, который бы хорошо ранжировался без дополнительных плясок с бубном.

                Хотя я надеюсь, что это лишь вопрос времени. Самому надоело думать об индексации при написании более-менее сложного функционала сайта.
                • 0
                  Не очень понятно, почему «после появления node.js, наверное все более-менее приличные боты JS стали уметь», как это связано. Node — это серверная платформа, которая просто использует js как язык для разработки. Сервер отдаёт уже готовые html страницы, которые и индексируется поисковиками. Было бы удивительно, если бы поисковые боты могли читать js на сервере.
                  • 0
                    Потому, что раньше, чтобы получить контент, который генерируется на js, надо было писать интерпретатор js и прикручивать его к парсеру html.

                    А node.js + headless chromium позволили в «3 строчки» писать ботов, которые сразу и html отлично парсили и js умели исполнять аналогично тому, как это делают браузеры.

                    Ну, точнее, это больше заслуга headless chomium, но именно node.js дает ту инфраструктуру, которая позволяет запускать это все «тремя строками» и открыла возможность писать полнофункциональные парсеры страниц даже школьникам.

                    node в данном случае — инфраструктура для ботов, сайт может быть на чем угодно написан. Для бота это все равно html+css+js
                • 0

                  Вы не поверите у меня есть лендинг без рекламы.

                  • –1
                    У меня тоже :) Был. Потом я переделал его в полноценный сайт и дела пошли гораздо лучше.
              • 0
                Google и Yandex уже неплохо индексируют SPA и с основным содержимым хорошо справляются.
                • 0

                  Да, но у автора ещё переключение языков.

                • +5
                  Можете, пожалуйста, уточнить, в чем посыл статьи серии статей?
                  Надеялся увидеть красивое применение Vue.js (а скорей Nuxt.js) в качестве подобия статического генератора, создание переиспользуемых компонентов которые берут данные из markdown-файлов…
                  А получил примеры верстки хтмл\цсс (в чем ее полезность в рамках статьи?) и jquery скрипты (зачем нужен jquery если есть vue.js?).
                  • 0
                    Такое количество кода лучше выносить на какой-нибудь гитхаб.
                    • 0
                      В конце второй части я именно так и сделаю
                    • 0
                      Поэтому она и называется: Часть 1. Все что будет связано с Vue будет в следующей части
                      • +2
                        Очень странная статья, прям с первого абзаца. Надо обновить сайт и выбор пал на lp. Может вы имели ввиду spa?
                        • +2
                          В теле страницы куча текста! С такой разметкой же невозможно работать. А если надо поменять информацию? Это надо лезть в html, искать нужное, и менять в нескольких местах

                          А почему бы не создать сайт с помощью vue и добавить имитацию базы?

                          Аж сгораю от любопытства, "имитация базы" на vue для редактирования контента — без сервера?


                          По теме — даже если на выходе всего одна страница — можно использовать пост-процессор html-include и в процессе работы все запчасти и кусочки держать в отдельных подшаблонах, готовую страницу сбилдит вебпак/парсел/ролап
                          Пример
                          image

                          • +1
                            Зачем в лендинг-пейдж тащить тонну скриптов — vue и jquery?
                            Можно же использовать шаблонизатор (например nunjucks/twig), вместо базы использовать json со строками на всех нужных языках. Gulp-ом или webpack-ом собрать статические странички соответственно языкам «инклюдя» туда нужные строки из «базы», например page-ru.html, page-en.html и т.д.
                            Чтоб seo-шники не нервничали по поводу дублирования контента, в head главной странички добавить link rel=«alternate» hreflang=«en» href=«page-en.html», и в head переведённой странички добавить link rel=«alternate» hreflang=«ru» href=«page-ru.html»
                            • +3

                              Есть большая беда с вашей статьёй: уровень знания вёрстки, судя по коду, у вас довольно начальный или устаревший. Это даже не уровень хорошего новичка, которого возьмут на работу верстальщиком.


                              И нет ничего плохого, в том, чтобы быть новичком. А если вы не новичок, то знайте: в коде много ошибок и устаревшие подходы.


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


                              Может быть когда вы перейдёте к части про Vue.js, я буду ошеломлён и повержен. Но сейчас это урок плохой вёрстки.

                              • 0

                                pepelsbey, вёрстки не так уж и много, чтобы назвать её плохой. Плохая/хорошая это технологические оценки крутого специалиста верстальщика? Покажите хорошую. Статья собственно не про это.

                                • +1
                                  А где хороший?
                                  А как надо писать?
                                  Дайте примеры раз все так ужасно
                                  • +1

                                    Ну давайте разбираться. То, что я приведу ниже — это не повод поспорить (оправдаться) по каждому пункту, это общепринятые практики в современной вёрстке. Я её практикую сам и учу в рамках HTML Academy — это мой ответ на вопрос «а где научиться?»


                                    1. Опасные селекторы: #main может встречаться только один раз на странице, а значит никакой универсальности и сделать второй элемент с такими же стилями не получится. Плюс селектор по #id специфичнее, а значит его будет сложно перебить. Напротив, header может встречаться несколько раз на странице, а вы к нему обращаетесь глобально, мол, вообще все header на странице. Селектор .scroll-nav li a слишком зависит от структуры HTML, которая может и будет меняться.


                                    #main { … }
                                    header { … }
                                    .scroll-nav li a { … }

                                    Один из признаков того, что у вас проблемы с селекторами — это !important, который сам по себе является антипаттерном.


                                    .lang-first-init {
                                        display: none !important;
                                    }

                                    Вывод: сегодня подавляющее большинство разработчики пишут селекторы вида .main и .header, это самое гибкое и удачное решение. Познакомьтесь с подходом БЭМ — это хорошая система именования классов и описания интерфейсов, которая сегодня мейнстрим в разработке интерфейсов.


                                    2. Синтаксические ошибки: Это не CSS-комментарии (они выглядят так: /* … */) и такой код ломает следующий за ним селектор, то есть все стили для header не применятся.


                                    <---------------header--------------->
                                    header { … }

                                    Да, это «всего лишь пример в статье», но это показывает небрежность. Скопированный отсюда код сломается.


                                    3. Префиксы: В одном месте вы пишете очень подробную батарею префиксов для свойства transition, а в другом не пишете для animation и @keframes, притом, что кроссбраузерность у transition на поколение-два браузеров лучше, чем у animation.


                                    .transition{
                                        -webkit-transition: all 500ms linear;
                                        -moz-transition: all 500ms linear;
                                        -o-transition: all 500ms linear;
                                        -ms-transition: all 500ms linear;
                                        transition: all 500ms linear;
                                    }
                                    @keyframes hideBlock {
                                        …
                                    }

                                    Уже года три верстальшики не пишут префиксы для браузерных свойств руками. Для этого используется Автопрефиксер, которому вы, при желании, можете скормить список браузеров, которые вы хотите поддерживать. Код с префиксами слишком раздувается, а их наличие — признак устаревшего кода и отсутствия шага сборки (оптимизации) этого кода.


                                    4. Технологии вёрстки: Вы используете только флоаты float: left, которые хоть и продолжают работать во всех браузерах, но уже пару-тройку лет как уступили место флексам display: flex. Флексы гораздо удобнее: их не нужно клиарить, вертикальное выравнивание и колонки одинаковой высоты в них — ерундовое дело.


                                    <div class="clearfix"></div>

                                    Когда в коде есть .clearfix, то этот код с душком: либо устарел код, либо навыки автора.


                                    5. Лишние атрибуты: У вас вроде есть и <nav>, и <header>, и даже пара заголовков <h3> — за что вам отдельное спасибо. Но есть места, где мусорные (ненужные) атрибуты показывают небрежность.


                                    <link rel="stylesheet" type="text/css" href="css/style.css" media="all">
                                    <link rel="stylesheet" href="css/style.css">
                                    …
                                    <script type="text/javascript" src="scripts/jquery.min.js"></script>
                                    <script src="scripts/jquery.min.js"></script>
                              • +2
                                Статья ни о чем. Если опустить вступление, то 98% статьи это листинг кода сомнительного качества.
                                • –1

                                  96% населения вообще не умеют кодить. И что? Это лучше чем ничего. Никакого сомнительного кода я не увидел. Гораздо хуже использовать сомнительные алгоритмы. Но тут алгоритмов никаких нет. И код можно писать разными способами. Мне лично код понятен. Этого вполне достаточно.

                                  • 0
                                    Почему же все так подробно?
                                    Да все дело в том, что когда я только начинала и натыкалась на статьи на хабре мне это казалось непонятным. «Добавим метод» — куда? почему? Ответ — это же и так понятно, тривиально. Вспоминая эти свои поиски нужной мне информации, я решила сделать более подробно чем привыкли тут.
                                    Запомните если вы в этой сфере уже давно и вам все понятно, то есть много начинающих разработчиков которые этого могут не понимать
                                    Ну а раз тут все написано неправильно, прошу вас выложить переделанный данный код в «Правильном и современном» варианте
                                    • 0
                                      Меня очень пугают сайты, где начинают мешать jquery и vue. Ненадо так делать…
                                      • –2
                                        а что у нас Vue использует какой то другой язык? А, он наверно на CSS написан? Или как? А создаете Vue компонент вы наверно прямо в HTML? Скрипты при этом не используются?
                                        Vue это не более чем обертка для более быстрого и красивого написания того же кода
                                        • 0
                                          Что значит использует какой-то другой язык? Jquery не используется во вью. Когда пишут для вью библиотеку и по факту она является просто оберткой Jquery, то от такой библиотеки надо бежать и не оборачиваться, а вы собственноручно (!) пытаетесь засунуть сюда Jquery. Jquery мощная либа, но она ушла в прошлое. Почему? Потому что очень затратная по времени и ресурсам и на место ее пришли «реактивные» react, angular, vue. И ключевое здесь «вместо», а не «вместе».

                                          Решая использовать один из этих реактивных «фронт-енд фреймворков», первым делом забудьте про Jquery. Не можете забыть? Не используйте фремворки
                                          • 0

                                            Ну так и вместо этого jquery-кода будет лучше поставить "более быстрый и красивый" код на vue.

                                            • 0

                                              lissi4ka, на самом деле вам советуют уже проверенные подходы, не требующие холивара. Вы против более технологичного быстрого написания красивого кода? Нет? Тогда к чему эти вопросы.

                                          • 0
                                            Лучше иметь один источник состояния или модель, или (простите) ДОМ.
                                            $("#flag-menu").click(function () {
                                                    isMenuClicked = true;
                                                    showOrHideMenu();
                                                })


                                            Вместо addClass('show') + removeClass('hide') в If'ах можно попробовать toggleClass('show'), изначально элемент спрятан.
                                            • +1
                                              Зачем jQuery и Vue.js вместе? Это было бы обосновано если бы был постепенный перевод уже давно работающего сайта с jQuery на Vue, но использовать их вместе с нуля дикая тупость.
                                              • 0
                                                Детский сад какой-то ((

                                                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                Самое читаемое