• AMP + Яндекс Турбо?

    AlexandrKazakov
    @AlexandrKazakov
    Frontend
    подскажите как работает в связке Яндекс Турбо + AMP

    Это разные технологии. Я хорошо знаю AMP и немного соприкасался с Турбо.

    AMP больше похожи на обычные HTML-страницы, но с некоторыми особенностями и ограничениями. Из AMP страниц сейчас, когда добавили возможность добавлять JS код, можно делать довольно мощные сайты, а из Турбо едва ли.
    Никаких проблем, в классическом исполнении, с данными технологиями в связке, не должно быть. Классическим исполнением я называю вот что: у нас есть обычная страница, а также её AMP и Турбо версии. Есть и другие варианты, например у АМП страницы может и не быть обычной версии, а будет только АМП, тогда нужно смотреть.

    И тогда снова проблема что если к примеру я использую яндекс турбо то сайт храниться на серверах яндекса и показатели в гугле падают.

    После такого заявления нужно доказательство приводить, например график и показатели из гугл аналитики.
    Гугл не выдаёт в своём поиске Турбо-страницы, при этом сами Турбо страницы добавляются преимущественно через яндекс Вебмастер. Каким тогда образом турбо страницы могут повлиять на ранжирование в гугле, остаётся загадкой.
    Также и наличие АМП страниц не может повлиять на ранжирование в яндексе. На обычной странице есть ссылка на АМП версию, ссылка в виде тега:
    <link rel="amphtml" href="https://www.example.com/url/to/amp/page.html">
    - таким образом гугл находит АМП-страницы, и это всё, всего один тег добавляется.

    В общем неверной информации вы где-то нахватались, используйте смело данные технологии вместе.
    Ответ написан
  • В каких случаях не стоит использовать Vuetify?

    AlexandrKazakov
    @AlexandrKazakov
    Frontend
    Есть очень много ответов о том в каких случаях не стоит использовать Bootstrap.
    Например, если требуется гибкая настройка дизайна, то этого можно добиться только костыльными способами.


    Почему-то я не вижу дату создания вопроса, очень странно. Вам нужно было указывать про какую версию бутстрап идёт речь. Допустим, что про актуальную 4 версию или про прошлую 3, это также подходит.

    Вы где-то нахватались неправильной информации. Я сделал много вёрстки сайтов на 3 бутстрапе, и ещё больше на 4. Вот, слова, что якобы в бутстрапе нужны какие-то костыли, чтобы стилизовать его, это неправда. В бутстрап-4 гибкий подход, модульная система. Можно подключать только только нужные части и при этом практически никакого левого кода не будет тянуться в проект и вообще никакого левого UI(!).
    Например я чаще всего в вёрстке сайтов беру сетку + модальные окна у бутстрапа, и это всё, ну иногда ещё и табы. Кода бутстрапа при таком подходе в проект подтягивается мизер, вёрстка сайта летает!

    Как же сделать так, чтобы не быть чайником и использовать бутстрап грамотно? Ну во-первых стоит документацию бутстрапа читать, вот например: ссылка - она недвусмысленно намекает, что можно брать только то, что нужно.
    Во-вторых нужна система сборки проекта, например Gulp. Один раз настроил и всё подтягивается автоматически, просто выбираешь нужные модули.
    Вот например как у меня организовано подключение CSS бутстрапа:
    5e7a1d03d179c583261717.png

    Вот подключаются скрипты:
    5e7a1dd58c70e058688911.png

    Вот пример как настраивать сетку бутстрапа под нужные требования:
    5e7a201457760487055962.png
    ^^ как видишь выше, вписывай нужные значения и вперёд, никаких костылей, всё там продумано грамотно.

    При этом выше на скриншотах я показываю классическую сборку для обычной вёрстки на нативном JS и jQuery. Весь JS там собирает Webpack, а проект целиком собирает Gulp.
    Вот кстати моя сборка из примеров выше: ссылка - но это вам мало что даст, так как такие вещи собираются под себя. Моя например сборка даже AMP-страницы может автоматом собирать!

    Итого: забудьте дичь, что для бутстрапа какие-то там костыли нужны, и не передавайте эту ложь никому. Оставьте это чайникам, что подключают бутстрап целиком, а потом рассуждают, дескать как его настроить. Учитесь использовать системы сборки, типа Gulp, и у вас проблем не будет с бутстрапом.

    Ну а насчёт Vuetify, к ответу profesor08 мне пока нечего добавить.
    Ответ написан
  • Дизайн-макет делается до или после технического задания?

    AlexandrKazakov
    @AlexandrKazakov
    Frontend
    Дизайн-макет делается до или после технического задания?


    Вопрос стоит заведомо неправильно, впрочем как и рассуждения, например следующие:

    Мне видится, что делать ТЗ до макета не правильно, поскольку это лишает дизайнера свободы.


    Какая свобода о чём вы здесь говорите? Большинство дизайнеров совершенно не разбираясь в вёрстке начинают рисовать дизайн-макеты, да ещё и адаптивные. Результат закономерен.

    1). Дизайнер должен хорошо разбираться в вёрстке, иначе должен рисовать дизайн вместе с верстальщиком.
    2). Естественно, до начала любого процесса, должен быть чёткий план действий и техническое задание. В вёрстке сайтов, помимо картинки ещё есть жёсткие технические требования, как-то: быстрая скорость загрузки, кроссбраузерность, оптимальные решения по коду. Дизайнер не может рисовать, что ему вздумается, всегда есть определённые рамки.

    Разные там обсуждения и доработки есть практически всегда. У вас видимо неверное представление о ТЗ, как оно строится и какое бывает.
    Ответ написан
  • Когда использовать в pug mixins, когда block, когда include?

    AlexandrKazakov
    @AlexandrKazakov
    Frontend
    Здравствуйте.

    На самом деле здесь нет однозначного ответа и правил, когда что использовать. Часто например в русскоязычном сообществе можно услышать мнение , что мол mixins решают, а include стоит использовать только в редких случаях, например для подключения на страницу этих самых миксинов, однако я не разделяю в полной мере данную точку зрения.

    Сам я занимаюсь вёрсткой сайтов, пишу, что использую сейчас:

    extends core/layout.pug
    
    block vars
      - var pageTitle = 'Название'
      - var pageDescription = 'Описание'
      - var pageKeywords = 'Ключевые слова'
      - var userState= 'logout'
    
    block content


    Данный код у меня идёт в начале типовой страницы. Как видно вначале я подключаю базовый шаблон(layout) на который подключаю: миксины, bemto, HEAD с содержимым, скрипты(перед закрытием body) и тому подобное(ниже есть пример).
    Далее у меня идёт набор переменных. если взять последнюю переменную, то можно понять, как это может быть удобно(в данном случае когда имеет несколько состояний: залогинен пользователь или нет).

    Можно подобным образом вынести в шапку страницы кучу переменных и затем уже не так важно, что вы будете дальше использовать: миксины или инклюды. В зависимости от переменных можно писать условия и в инклюдах и в миксинах.

    Конечно больше я всё же использую миксины, возможно привык. Но вообще здесь куча вариантов, даже например в том, в каком виде передавать значения в миксинах. Я всем желаю не бояться Pug.js а начать писать на нём многостраничный сайт и вскоре вы сами всё поймете, что для вас удобнее.

    Как писал ранее, сам я использую библиотеку миксинов bemto, мне нравится, но использовать её не обязательно, это больше индивидуально.

    Осталось рассказать про block

    Вначале стоит начать использовать block только в шаблоне(layout) , вот например у меня(сопоставьте с примером выше):

    include ../bemto/bemto
    include   mixins
    
    doctype html
    html(lang="ru")
      block vars
      head
        meta(charset='utf-8')
        meta(http-equiv='X-UA-Compatible', content='IE=edge')
        meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
        meta( name="format-detection" content="telephone=no")
        link(href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,700,700i&amp;subset=cyrillic" rel="stylesheet")
        title #{pageTitle}
        meta(name='description', content= pageDescription)
        meta(name='keywords', content= pageKeywords)
        link(rel="stylesheet" href="css/bundle.min.css")
      body
        block content
    
    
        +b.overlay(id="overlay")
    
        include ../blocks/product-card-modal
        include ../blocks/cart-modal
        include ../blocks/login-modal
    
        block scripts 
          script(src="js/bundle.min.js")


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

    Верстая, вскоре научитесь передавать block в миксины, это элементарно(Илья Ростопка привёл пример), жизнь заставит научиться :)
    Ответ написан