Comments 37
Не индексируют они скрипты. На примере комментариев от дискуса. Или там сделано иначе?
Но нет. Поисковики не запускают JS. Пытаются потихоньку, но пока особо нет результатов.
Впрочем, лендинг и не рассчитан на индексацию. Он рассчитан на рекламные каналы, которым наплевать на индексацию.
Другое дело — как такой текст ранжируется. Но тут только СЕОшники подскажут, т.к. надо на практике сравнивать.
Хотя я надеюсь, что это лишь вопрос времени. Самому надоело думать об индексации при написании более-менее сложного функционала сайта.
А node.js + headless chromium позволили в «3 строчки» писать ботов, которые сразу и html отлично парсили и js умели исполнять аналогично тому, как это делают браузеры.
Ну, точнее, это больше заслуга headless chomium, но именно node.js дает ту инфраструктуру, которая позволяет запускать это все «тремя строками» и открыла возможность писать полнофункциональные парсеры страниц даже школьникам.
node в данном случае — инфраструктура для ботов, сайт может быть на чем угодно написан. Для бота это все равно html+css+js
Надеялся увидеть красивое применение Vue.js (а скорей Nuxt.js) в качестве подобия статического генератора, создание переиспользуемых компонентов которые берут данные из markdown-файлов…
А получил примеры верстки хтмл\цсс (в чем ее полезность в рамках статьи?) и jquery скрипты (зачем нужен jquery если есть vue.js?).
В теле страницы куча текста! С такой разметкой же невозможно работать. А если надо поменять информацию? Это надо лезть в html, искать нужное, и менять в нескольких местах
А почему бы не создать сайт с помощью vue и добавить имитацию базы?
Аж сгораю от любопытства, "имитация базы" на vue для редактирования контента — без сервера?
По теме — даже если на выходе всего одна страница — можно использовать пост-процессор html-include и в процессе работы все запчасти и кусочки держать в отдельных подшаблонах, готовую страницу сбилдит вебпак/парсел/ролап
Пример
Можно же использовать шаблонизатор (например 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»
Есть большая беда с вашей статьёй: уровень знания вёрстки, судя по коду, у вас довольно начальный или устаревший. Это даже не уровень хорошего новичка, которого возьмут на работу верстальщиком.
И нет ничего плохого, в том, чтобы быть новичком. А если вы не новичок, то знайте: в коде много ошибок и устаревшие подходы.
Как бы то ни было, вы радостно демонстрируете этот код в рамках наверняка очень полезной статьи. Но код плохой, я бы никому не рекомендовал делать что-то подобное.
Может быть когда вы перейдёте к части про Vue.js, я буду ошеломлён и повержен. Но сейчас это урок плохой вёрстки.
А как надо писать?
Дайте примеры раз все так ужасно
Ну давайте разбираться. То, что я приведу ниже — это не повод поспорить (оправдаться) по каждому пункту, это общепринятые практики в современной вёрстке. Я её практикую сам и учу в рамках 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>
Да все дело в том, что когда я только начинала и натыкалась на статьи на хабре мне это казалось непонятным. «Добавим метод» — куда? почему? Ответ — это же и так понятно, тривиально. Вспоминая эти свои поиски нужной мне информации, я решила сделать более подробно чем привыкли тут.
Запомните если вы в этой сфере уже давно и вам все понятно, то есть много начинающих разработчиков которые этого могут не понимать
Ну а раз тут все написано неправильно, прошу вас выложить переделанный данный код в «Правильном и современном» варианте
Vue это не более чем обертка для более быстрого и красивого написания того же кода
Решая использовать один из этих реактивных «фронт-енд фреймворков», первым делом забудьте про Jquery. Не можете забыть? Не используйте фремворки
$("#flag-menu").click(function () {
isMenuClicked = true;
showOrHideMenu();
})Вместо addClass('show') + removeClass('hide') в If'ах можно попробовать toggleClass('show'), изначально элемент спрятан.
Html страница глазами разработчика приложений. Часть 1: «Подготовка»