Pull to refresh

Comments 42

Как бы не ругали Bootstrap, я не собираюсь от него отказываться. Позволяет быстро решать задачи бизнеса.
Тут нужно не отказываться, а переучиваться нужно, и даже что-то переделывать, если продакшн это позволяет. А вот с иконками — засада, можно мигрировать на Font Awesome, но иконки будут уже отличаться от старых немного…
Там же есть отсылка на Open Iconic — вполне юзабельно, классы для 4ого бутстрапа там тоже вполне рабочие. Пользуюсь 4кой начиная с альфа версии в тестовой эксплуатации, сейчас проект переезжает в продакшн уже на релизе 4ки. По сравнению с тройкой — небо и земля, верстать фронтэнд стало намного проще.
Вы переделывали уже 3ью версию с иконками под новое? Суть в том, что компания просто напросто не даст времени переделывать под какие-то новые плюшки. А вот начать с нуля новый проект — это да, это стоит попробовать.
А чем Font Awesome не угодил? Слишком тяжёлый?
Проект начинался на тройке, в тестовой эксплуатации постепенно мигрировало на 4ку, по мере её разработки (с ранних альфа релизов 4ки), по этому переход состоялся довольно плавно и с минимумом трудозатрат. Собственно это веб-приложение, и на тройке были проблемы с адаптивной версткой при скрытии динамического левого (основного) и правого (списочного) меню.
Font Awesome действительно слишком тяжелый и не имеет выраженной «строгости». Нужно было что-то более лаконичное. Часть иконок была создана вручную под проект, но постепенно должно прийти к общему знаменателю (стилю), в опытной эксплуатации сейчас небольшой разнобой из наборов иконок, многого нет в обоих наборах шрифтов, нужно переделывать, но это меньшее из зол, чем если бы пришлось выкидывать все и изобретать заново.
На 4ке поддержка мобильных устройств значительно лучше, хотя без костылей не обошлось (для отмены :hover стиля на сенсорных экранах для боковых меню).
Спасибо. Сейчас как раз и думаю, что в самом начале проекта переделать на 4ку, пока проект ещё маленький.
многого нет в обоих наборах шрифтов

делайте кастомный хоть тем же icomoon.io и все
Ща бы для хедера jquery использовать вместо height: 100vh))
Для построения таких просты страниц можно использовать бесплатный mobirise, dragNdrop, готовые блоки, экспорт проекта сразу в FTP сайта,
$(document).ready(function(){
$('.header').height($(window).height());
})


мне казалось, что это уже моветон, CSS3 позволяет делать так:
.header {
  height: 100vh;
}
100vh проблемная практика, особенно на некоторых мобильных браузерах с их плавающими тулбарами.
UFO landed and left these words here
Раньше и flex почти никто не поддерживал из браузеров, теперь это уже вовсю применяют.

А если и делать на скриптах установку высоты по окну браузера, то желательно подписаться на событие resize:

$(document).ready(function(){
  $('.header').height($(window).height());
  $(window).on('resize', function(){
    $('.header').height($(window).height());
  }
})
Аналогия с флексом неправильная, потому что ноги проблем с vh растут не из поддержки, а прямо из спецификации. Эти единицы изначально задуманы проблемными.
Проблема получается не в единицах измерения высоты или ширины каскадных стилей, а как раз в мобильных браузерах и настройках масштабирования viewport, можно через media задать одни параметры для пк и другие для мобильных устройств.
Эти единицы изначально задуманы проблемными.

Как что-то может быть задумано проблемным? это всего лишь значение, эквивалентное 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.

Согласен, но событие resize не так уж часто происходит. А по событиям scroll и mousemove нельзя забивать callstack тяжелыми функциями, или как минимум ставить в очередь через setTimeout. И да, jQuery хоть и всемогущ, но всё таки тяжёл для простых вещей.
Жалко что глиф-иконки убрали оттуда, очень удобно было их использовать, а теперь на стороне искать придется
В самом деле?! Интересно, с чем связано. Скорее всего что-то с лицензией…
Спасибо за информацию!

Вообще жаль, в 3 версии было очень удобно, хотя и там (судя по сайту) были не все иконки…

Придётся искать способ подключать font awesome видимо как-то.
Да, в самом деле Glyph Icons больше нет в бутстрапе, сам расстроен. Из-за этого как-то не хочется переходить с 3ьей на 4ую версию…

А Font Awesome и начинал в составе Bootstrap, да и подключается он не так сложно на самом деле)
И сколько весит результирующий сайт, без учета графики? Если можно, с разбивкой vendor js, js, css, и т.п.?
Просто у меня есть опасения, что результатом будет очередное неповоротливое нечто, что будет загибаться на печатных машинках и мобильных устройствах. А ведь тут еще простой случай, а навесь доп. логики и каких-нибудь таблиц, все станет гораздо хуже…
Есть SPA-приложение на bootstrap 3.
Минифицированные файлы весят ~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 на странице — это не есть гуд.
UFO landed and left these words here

Такое ощущение, что я попал в 2003 год: комментаторы кивают головами «хорошая, хорошая статья, ну… разве что недостатки мелкие есть». Да вы с ума сошли все: <font color="#3AC1EF"> и сингл-пейдж на jQuery, серьёзно?


Опять вы переводите всякий мусор, не понимая, что делаете. Здесь очень много вредных советов для новичков. HTML, CSS, JS — весь код кричит «я с позавчерашнего дня во фронтенде, но вот вам статья».

SPA на jQuery даст фору ReactJS, VueJS или Angular? )) Серьёзно?))

оффтоп
image
Да.
Ссылка выше ведет на проект spa-приложения интернет магазина, который весит 100кб (код после gzip-сжатия) и работает без лагов на компе 2001 года с характеристиками Celeron 848Mhz, Озу 128мб и с древней Opera 9
Так же там же есть ссылка на live-demo
Скриншоты
image

image

image

image
Ангуляр громоздкий и проблемный. Не травите новичкам будущее. Уж лучше jQuery, а то и React.
Я и не рекомендую Angular, я НЕ рекомендую делать SPA на jQuery, сам имел опыт уже, это быстро разрастается и превращается в большую кашу со спагетти кодом. Уж пусть лучше начинающие смотрят в сторону React, там всё намного проще, да и рынок вакансий им полон.

Все таки не чистый jquery, у вас там еще Backbone используется:



Интересно, почему вы не пошли дальше и не заиспользовали Backbone.Model и Backbone.View. Можно было бы избавиться от части своего кастомного кода, типа этого

Все таки не чистый jquery, у вас там еще Backbone используется

Я чуть выше про это написал .

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

Backbone.Model и Backbone.View это все-таки уже жесткая привязка к другой архитектуре.

У Backbone, роутер и события находятся в рамках одной библиотеки, что удобно. Решил по новой не писать, а взять уже готовое :)
Я хоть уже набросал свой сайтик на bootstrap 4, но все равно для новичков, вроде меня, интересно было почитать. Например, я поначалу сразу споткнулся на удаленном размере xs, пока не покурил более детально документацию. Зато сюда добавили размер xl, для очень больших экранов. А карточки думаю стоят более детального рассмотрения, может даже отдельной статьи, так как они заменили собой большинство компонентов 3й версии. Ну а вообще было бы интересно почитать статьи по реализации различных компонентов на bootstrap 4.
Очень странно. Я сейчас наткнулся на оригинал на медиуме и почитал комментарии. Мне показалось, или на русскоязычных сайтах люди куда строже относятся ко всему?)

Безусловно, техническая грамотность, уровень качества и все такое — это очень важно, но, как мне кажется, стоит не забывать получать удовольствия от того, что ты что-то… создал)

Например, любой приют для собак или подобное не очень прибыльное учреждение будет радо, если данная статья вдохновит какого-то новичка и он потратит час-два (день-два) и напишет им такой одностраничник бесплатно как проба пера) И им не сильно важно будет, что хэдер через 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

Зачем и откуда font color в html-коде? В оригинале этого нет, да и не должно быть. Про h3 и h1 уже указали. Тоже в оригинале нет этой ошибки. Зачем вообще менять код при переводе.
Only those users with full accounts are able to leave comments. Log in, please.