• Зачем использовать template engines(pug, handlebars и т.д.) если есть ui libraries(react, vue)?

    k12th
    @k12th
    console.log(`You're pulling my leg, right?`);
    Я бы не стал так все в одну кучу валить.
    pug — это не только шаблонизатор, но и препроцессор, то есть он предоставляет альтернативный, во многом удобный синтаксис.
    Для vue/react генерация html это только часть обязанностей, они еще должны аккуратно и быстро обновлять его и реагировать на пользовательский ввод.
    Если проект не предусматривает динамического фронтенда, то вполне можно обойтись одним шаблонизатором — pug/handlebars/что хотите. Далеко не везде нужен SSR.

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

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

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

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

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

    Degradation должна быть gracefull, а не lazy.
    Ответ написан
    Комментировать
  • Как правильно подойти к построению large scale react app(c aws на бекенде)?

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

    webirus
    @webirus
    Тыжверстальщик! Наверстай мне упущенное...
    kubuntu, lubuntu, xubuntu, edubuntu
    Ответ написан
    4 комментария
  • Какой дистрибутив линукс ставить на нетбук?

    jamakasi666
    @jamakasi666 Куратор тега Linux
    Просто IT'шник.
    Puppy\PuppyRus, крайне миниатюрный, красивый, не требовательный и будет бегать очень резво на таком железе. Всякие KDE\GNOME окружения будут протупливать, lxde\xfce зайдет на любом дистре.
    Если по каким то причинам puppy не понравится то пробуй opensuse с lxde\xfce ибо сюзька всетаки более приветливая для новичков из за yast'a =)
    Ответ написан
    1 комментарий
  • Насколько легко(или сложно) будет злоумышленнику похитить access_token из local storage?

    petermzg
    @petermzg
    Самый лучший программист
    Для cookies можно на сервере задать следующие флаги

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

    Из javascript уже не достать будет.
    Ответ написан
    Комментировать
  • ES6 class method?

    Нода 7 умеет в async/await. Ну или в промисы на худой конец.
    Ответ написан
    Комментировать
  • Как вы делаете jwt аутентификацию в server-side react приложении?

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

    При авторизации сервер генерит:
    - 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
    Ответ написан
  • Почему при закрытии меню сайта сохраняется пространство справа от контента(если поскроллить)?

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Vue предполагает, что вы в скриптах используете CamelCase для названий компонентов, а в самой разметке (шаблонах) - именование-через-дефис:
    <div id="root">
    	<task-list></task-list>
    </div>
    Ответ написан
    1 комментарий
  • Как бы вы оценили этот свёрстанный одностраничный сайт?

    lukoie
    @lukoie
    Теперь понятно что делали Вы только верстку, так что дизайн и контент это отдельный разговор.
    Сделайте иконку тематическую а не yeoman'а
    Заголовок сайту тоже желательно.
    В хедер вставьте хоть намеки на сео метатеги.
    Юзабилити уже и так сказали, но это не ваша проблема в данном случае.
    В коде все нормально, но и сайтик то простой.
    Смутило только вот это:
    9a2d64a2c7c7.png
    Лучше спрайтом.
    И стрелки не работают - лучше чтобы они были кликабельны и открывали на следующий экран.
    Ответ написан
    Комментировать
  • Как бы вы оценили этот свёрстанный одностраничный сайт?

    А я придерусь к паре вещей: на первом экране у вас не видно ссылки "прокрутите вниз", очевидно что для этого хорошим решением будет сделать для шапки высоту 100vh и исходить уже из нее.

    Судя по тому как у вас работает меню, было бы логичнее сделать не полностью скроллирующийся сайт, а скролл блоков. Не помню как называется, что-то типа: full-page slider.
    Ответ написан
    2 комментария
  • Как бы вы оценили этот свёрстанный одностраничный сайт?

    @ferdasfarmazone
    Верстальщик!
    - вместо
    <div class="title home__title"><span class="bold">JWood</span> <span>Photography</span></div>

    <div class="title home__title"><b>JWood</b> Photography</div>

    -
    font-family: OpenSansLight,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;

    OpenSansLight? просто при подключении поставьте к примеру
    font-weight: 300;
    -
    <div class="contacts__item-value contacts__item-value__mail">jason@wood.com</div>

    <div class="contacts__item-value contacts__item-value__mail"><a href="mailto:jason@wood.com">jason@wood.com</a></div>

    так и для телефона, только вместое mailto: tel:+

    Это так, на скорую руку. В целом - хорошо!
    Ответ написан
    2 комментария
  • Как бы вы оценили этот свёрстанный одностраничный сайт?

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

    e84799ca926742e58b0a66eda6c90a2c.png

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

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

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

    В исходники не смотрел, о них говорить не буду.
    Ответ написан
    2 комментария
  • Как это можно промисифицировать?

    Fragster
    @Fragster
    помогло? отметь решением!
    что-то типа того:
    cognitoUser.prototype.authenticateUserPromise = function (authenticationDetails) {
    return new Promise((resolve, reject) => {
    		this.authenticateUser(authenticationDetails, (result)=>{return resolve(result)}, (error) =>{return reject(error)});
    });
    Ответ написан
    Комментировать
  • Как это можно промисифицировать?

    @vivcogit
    JS разработчик
    Если я правильно понял, то вам нужно попробовать так:
    Promise.resolve(() => cognitoUser.authenticateUser(authenticationDetails)).then(onSuccess).catch(onFailure )
    Ответ написан
    Комментировать
  • What the hell is going on с текстом?

    AxianLTD
    @AxianLTD
    Экраны кроме размера в пикселях различаются плотностью, формой и размером пикселя. Пиксель не обязательно квадратный или круглый, и не обязательно размещен в квадратной сетке.
    Ответ написан
    2 комментария
  • Свойства min-height, min-width, max-height, max-width должны иметь всегда фиксированное значение?

    SlampD
    @SlampD
    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/

    Куча инфы же.
    Ответ написан
    Комментировать
  • Как вы используете в вёрстке единицы измерения vh и vw?

    xmoonlight
    @xmoonlight
    https://sitecoder.blogspot.com
    vw/vh, vmin/vmax - нужны в основном для "резиновых" горизонтальных/вертикальных "живых" блоков (например, слайдер или wizard-опросник на лэндинге, и т.п.), соблюдение масштабируемых "резиновых" пропорций блоков или "резиновой" вёрстки одностраничных SPA-приложений: сервисов/игр, которые не нуждаются в скроллинге контента, а вся навигация - происходит исключительно в самом приложении/блоке и без смещения viewport-а, т.к. приложение/блок - занимает весь viewport (или же, всю его ширину или высоту).
    Ответ написан
    Комментировать
  • Как вы используете в вёрстке единицы измерения vh и vw?

    dom1n1k
    @dom1n1k
    Как? С матами :)
    Единицы мегаполезные, но у них есть один неприятный нюанс - размер вьюпорта считается включая полосу прокрутки.
    Это не баг, это так и должно быть по спецификации. И тому есть свои причины, почему сделано именно так.
    Но на практике в очень большой части случаев это неудобно. Это рушит всю идею.
    Ну типа отступили с двух боков марджины по 5vw - значит в середине контент 90vw? А вот фиг там - иногда это так, а иногда нет. Приходится придумывать дикие комбинации медиа-запросов и calc-ов.

    Реальные юзкейсы?
    Ну вот буквально вчера ситуация. Карусель, в которой крутятся влево-вправо некие блоки. И хочется, чтобы в ширину страницы помещалось целое количество блоков. Условно говоря, на планшете 2, на ноуте 3, на десктопе 4. То есть ширина блока должна составлять 50, 33 и 25% соответственно. Но в процентах указывать нельзя! Потому что карусельная либа оборачивает всё это дело в свои врапперы и проценты будут считаться не от экрана, а от этих врапперов. Флекс там тоже не подходит. Ну вот vw это спасение (за исключением вышеописанного нюанса).

    Ещё я приспособился в некоторых ситуациях привязывать размер шрифта к vmin.
    Ответ написан
    Комментировать