Islam Ibakaev

https://codepen.io/anon/pen/QvKLBr
Отступы сами добавите.

Уберите position: relative; у .carousel-item

Я бы не стал так все в одну кучу валить.
pug — это не только шаблонизатор, но и препроцессор, то есть он предоставляет альтернативный, во многом удобный синтаксис.
Для vue/react генерация html это только часть обязанностей, они еще должны аккуратно и быстро обновлять его и реагировать на пользовательский ввод.
Если проект не предусматривает динамического фронтенда, то вполне можно обойтись одним шаблонизатором — pug/handlebars/что хотите. Далеко не везде нужен SSR.

P.S. то, что react нельзя использовать с pug — это личные половые трудности сугубо реакта. Я использую vue+pug и доволен как слон:)

почему бы не использовать комбинацию флексбокс сетка + flexibility?

А вот за это я бы отбивал руки. Категорически нельзя завязывать лейаут на JS. Это медленно, это бажно, это... это медленно!

Если человек сидит на старом IE (сам по себе очень медленный браузер), то у него с высокой степенью вероятности и компьютер слабый. Далее, у них скорее всего не установлены адблокеры - это ещё куча тормозов. Уж если вы по каким-то причинам решили, что эти пользователи вам нужны - зачем над ними издеваться?
Тут блин на мощном ПК с самым последним браузером порой раздражаешься оттого, что какая-то прилипающая панелька лагает... А если весь-весь лейаут будет отрисовываться JS в IE - это вешалка.

Я помню времена, когда CSS3 (скругления, тени, градиенты...) только недавно вышел и естественно IE этого ничего не поддерживал. Довольно быстро сообщество наплодило вагон полифилов для этого дела. Были и маленькие, под одну функцию, были и целые пакеты.
Так вот: они нормально работали только в демках и простеньких случаях. В реальных сложных сайтах пользоваться было невозможно - всё дико тормозило, да и глючило. Нельзя IE чрезмерно нагружать тем, на что он не предназначен.

Degradation должна быть gracefull, а не lazy.

1. Использовать Cognito отличный выбор, но есть ньюансы с федерейтед пулом ( в вопросе авторизации через социальные сети), если у вас такой опции нет, - то разворачивайте сервис в полной мере через sdk для вашего бэкенд решения.
2. Большое количество страниц с собственными мета, и участвующие в самостоятельном обороте в SEO, однозначно нужен сервер рендеринг и соответствующий роутинг.
3. Если вы на AWS то Shild/Waf от темной стороны вам в помощь.

Для cookies можно на сервере задать следующие флаги

Secure - The Cookie will be sent in secure channel--HTTPS
HttpOnly- Don't allow local scripts read cookies.

Из javascript уже не достать будет.

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

При авторизации сервер генерит:
- access token
- cookie
- refresh token
которые затем гоняются между клиентом и сервером.

Refresh token может отсутствовать. Вообще говоря он нужен только для обновления access token, и клиент добавляет его в запрос только когда истекает срок действия access token. В этом случае сервер генерит новый access и refresh token.

Cookie отдается с пометкой HTTP only, то есть клиент их прочитать никак не может. Cookie нужны только для проверки валидности access token, то есть никаких сессий по ним нет (вообще приложение полностью stateless).

Оба токена (access и refresh) клиент хранит в local storage, откуда извлекает их для каждого запроса на сервер.

Любой запрос от клиента, содержащий валидный access token, считается авторизованным, только если в нем есть соответствующие токену куки (не совпадающие, а соответствующие, то есть закодированные по какому-то алгоритму с access token в качестве базы). Ну и если есть refresh token, то также смотрим, подходит ли он к нашему access token.

Такая схема, в совокупности с HTTPS, неплохо защищает от XSS или от CSRF уязвимостей (оговорка: но не от обеих сразу).

Немного теории, почему это работает, можно прочитать здесь: www.redotheweb.com/2015/11/09/api-security.html

Поставьте для #wrapper { overflow: hidden }, а во время открытия меню - убирайте.
Проблема в том, что у вас элементы с атрибутами data-aos-*, которые анимируются при скроле, в дефолтном состоянии находятся за вьюпортом, в результате чего появляется горизонтальная прокрутка.

Vue предполагает, что вы в скриптах используете CamelCase для названий компонентов, а в самой разметке (шаблонах) - именование-через-дефис:

<div id="root">
	<task-list></task-list>
</div>

В целом - неплохо, но есть пара замечаний. Во-первых, когда делают hero header, его делают так, чтобы нижний край был по нижней границе экрана, а не уходил за нее, а то получается то, что я не могу узнать, что мне нужно скроллировать, пока не начну это делать (надписи не видно):



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

Второе: дизайнер может ошибаться. Точка. Повторю: дизайнер может ошибаться, и ваша задача не тупо повторить то, что он намалевал, но и поправить его в случае если он не прав. Пример:


У меня монитор немного отсвечивает, я не сразу заметил, что там что-то написано, а про стрелку понял, только после того, как наклонил его и посмотрел снизу. Это наглядный пример того, что дизайнеры переодически забывают о контрасте. Нужно исправить.

В исходники не смотрел, о них говорить не буду.

что-то типа того:

cognitoUser.prototype.authenticateUserPromise = function (authenticationDetails) {
return new Promise((resolve, reject) => {
		this.authenticateUser(authenticationDetails, (result)=>{return resolve(result)}, (error) =>{return reject(error)});
});

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

However, it’s acceptable to set min-height and height when the values are different units:

#example {
  min-height: 3em;
  height: 138px;
}

Here, the min-height declaration is based on em, which means that at some stage (due to text resizing) the em height may be larger than the 138px height we’ve set. In cases such as this, the element will be allowed to expand further than the 138px height, thus accommodating the resizing of the em-based text.

reference.sitepoint.com/css/min-height

https://developer.mozilla.org/en/docs/Web/CSS/max-...
https://css-tricks.com/almanac/properties/m/max-height/

Куча инфы же.