Comments 42
$(document).ready(function(){
$('.header').height($(window).height());
})
мне казалось, что это уже моветон, CSS3 позволяет делать так:
.header {
height: 100vh;
}
А если и делать на скриптах установку высоты по окну браузера, то желательно подписаться на событие resize:
$(document).ready(function(){
$('.header').height($(window).height());
$(window).on('resize', function(){
$('.header').height($(window).height());
}
})
Эти единицы изначально задуманы проблемными.
Как что-то может быть задумано проблемным? это всего лишь значение, эквивалентное 1% ширины/высоты viewport (спецификация www.w3.org/TR/css3-values/#vw).
Так что тут как раз проблема поддержки бразуерами этой технологии, а не наоборот!
Если все же делать скриптами, в обработчике resize наверно все же стоит избегать использование методов jQuery и не создавать на каждый чих новый объект:
$(function(){
var header = $('.header').get(0);
function resizeHeader() {
header.style.height = window.innerHeight + 'px';
}
$(window).on('resize', resizeHeader);
resizeHeader();
});CSS для того и развивается, чтобы не загружать страницу скриптами.
Можно и так сделать
$(document).ready(function(){
$(window).on('resize', function(){
$('.header').height($(window).height());
}
$(window).trigger('resize');
})
Это пожалуй даже хуже чем дублирование кода, если каждый такой скриптик будет дергать resize после загрузки страницы — обработчики события resize будут так же выполняться несколько раз.
На события которые могут выполняться несколько десятков раз в секунду(например: resize, scroll, mousemove) нежелательно вешать тяжелые обработчики, такие как $('.header').height($(window).height());, во-первых, не надо каждый раз искать элемент, во-вторых, jQuery метод height даже при получении значения делает много лишних действий, получает значение стилей, добавляет падинги итд, зачем все это, когда можно просто получить размер рабочей области через window.innerHeight, с установкой значения высоты чуть сложнее, но при box-sizing: border-box; достаточно установить стиль height.
Просто у меня есть опасения, что результатом будет очередное неповоротливое нечто, что будет загибаться на печатных машинках и мобильных устройствах. А ведь тут еще простой случай, а навесь доп. логики и каких-нибудь таблиц, все станет гораздо хуже…
Минифицированные файлы весят ~100кб с включенным gzip-сжатием на сервере Nginx. А так ~320кб. Туда входит: underscore-min.js, backbone-min.js, jquery.min.js, bootstrap.min.js, bootstrap.min.css + шрифты, свои стили и код самого приложения. А новый bootstrap мне кажется не сильно много. Тут еще главное, чтобы печатные машинки поддерживали его новые фишки типа flex
1. Почему картинки в прямоугольных карточках помяты по вертикали? В 2018 году можно уже сказать пару слов про свойство object-fit или какое-другое решение проблемы.
2. Почему анимация при наведении на лица из «Our team» дергается, а текст в ней летает? Это прямо анти-паттерны анимаций в интерфейсах. И да, у меня в хроме анимация работает не так, как на гифках. Это баг?
3. При скролле к якорю заголовок соответствующей секции прячется под навигацией, а в ней самой не подсвечивается текущая секция. Налицо анти-паттерн, теперь по части юзабилити.
4. Почему при переходе в другую секцию с помощью навигации страница сначала дергается как бешеная, а потом уже начинает медленно прогручиваться к нужной секции? Хром последней версии, это не шутка про старый IE.
5. При уменьшении размера окна (по горизонтали) появляется небольшой скролл по горизонтали, а содержимое hero-хидера вылезает на следующую секцию. Положение рыжей кривой штуки, которая странно анимируется, также прыгает.
/зануда_моде_отключен
Такие статьи часто показывают как все просто, а потом оказывается, что есть куча каких-то косяков. Это не к тому, что бутстрап плохой, просто не стоит думать, что он решает абсолютно все проблемы.
Только одно но: несколько тегов Н1 на странице — это не есть гуд.
Такое ощущение, что я попал в 2003 год: комментаторы кивают головами «хорошая, хорошая статья, ну… разве что недостатки мелкие есть». Да вы с ума сошли все: <font color="#3AC1EF"> и сингл-пейдж на jQuery, серьёзно?
Опять вы переводите всякий мусор, не понимая, что делаете. Здесь очень много вредных советов для новичков. HTML, CSS, JS — весь код кричит «я с позавчерашнего дня во фронтенде, но вот вам статья».
и сингл-пейдж на jQuery, серьёзно?
А почему бы и нет? Фору по скорости многим даст)
github.com/artnv/ecommerce-demo
Ссылка выше ведет на проект spa-приложения интернет магазина, который весит 100кб (код после gzip-сжатия) и работает без лагов на компе 2001 года с характеристиками Celeron 848Mhz, Озу 128мб и с древней Opera 9
Так же там же есть ссылка на live-demo
Все таки не чистый jquery, у вас там еще Backbone используется:
Интересно, почему вы не пошли дальше и не заиспользовали Backbone.Model и Backbone.View. Можно было бы избавиться от части своего кастомного кода, типа этого
Все таки не чистый jquery, у вас там еще Backbone используется
Я чуть выше про это написал .
Само приложение изначально задумывалось как кастомное. А подобная архитектура позволяет легко заменять компоненты(роутер и события) на компоненты от других библиотек, путем подключения пустого модуля и реализации подобного интерфейса.
Backbone.Model и Backbone.View это все-таки уже жесткая привязка к другой архитектуре.
У Backbone, роутер и события находятся в рамках одной библиотеки, что удобно. Решил по новой не писать, а взять уже готовое :)
Безусловно, техническая грамотность, уровень качества и все такое — это очень важно, но, как мне кажется, стоит не забывать получать удовольствия от того, что ты что-то… создал)
Например, любой приют для собак или подобное не очень прибыльное учреждение будет радо, если данная статья вдохновит какого-то новичка и он потратит час-два (день-два) и напишет им такой одностраничник бесплатно как проба пера) И им не сильно важно будет, что хэдер через js или css делается))
Вот ссылка, если кому хочется самому проверить)
medium.freecodecamp.org/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33
Может в этом и отличие технического ресурса, от медиума, что комментаторы оценивают техническую сторону статьи, а не морально-этическую?
Я просто чувствую ответственность за то, чему мы учим новичков. Каждое наше неосторожное действие может заставить их сделать крюк по забытым или вторичным библиотекам и фреймворкам, вместо прямой дороги по современным или корневым технологиям.
В html .description используется h3, а в css .description h1
Начинающему веб-мастеру: делаем одностраничник на Bootstrap 4 за полчаса