• Как вы используете в вёрстке единицы измерения 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.
    Ответ написан
    Комментировать
  • Как вы используете в вёрстке единицы измерения vh и vw?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Первый use case: Truly Fluid Typography With vh And vw Units

    Разные полезные штуки делаются через vw очень просто. Оставлю пару демок из своих ответов на другие вопросы, а вы посмотрите на досуге:
    сетка из квадратов
    скошенная секция
    округлости большого диаметра

    Ну и vh бывает полезно:
    приделанный к низу footer
    Ответ написан
    Комментировать
  • Как в HTML+CSS задать высоту на 100% относительно родительского блока?

    С помощью flexbox например так
    Ответ написан
    Комментировать
  • Появятся ли вакансии, требующие знания экосистемы vue.js в 2017?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Появятся ли вакансии, требующие знания экосистемы vue.js в 2017?

    Думаю да. За рубежом Vue сейчас в тренде (учитывая, что относительно стабильная версия 2.0 вышла пол года назад), многие его начинают использовать, а значит скоро и у нас некоторые продвинутые компании начнут пробовать, может кто-нибудь возьмется написать пару толковых статей на хабр в духе "Vue 2 в изучении проще, чем jQuery" (на медиуме уже было что-то такое), а затем (я надеюсь) и остальные, которые просто увидят, что "вон те крутые чуваки это используют".

    на тостере даже тега vue нет...

    А давайте заведем, позадаем друг другу вопросы, быть может и народ заинтересуется :)

    P.S.: Наверху Vue назвали "мутантом", но давайте ради интереса вернемся на 5 лет назад. Тогда любой здравомыслящий разработчик сказал бы, что писать разметку в скриптах - это фу-фу-фу и нужно этого избегать. А потом появился React... и те же самые люди стали говорить, что разметка в скриптах - это круто.
    Ответ написан
    1 комментарий
  • Появятся ли вакансии, требующие знания экосистемы vue.js в 2017?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Ну как бы они и сейчас есть, только vue этот там упомянут просто в смысле "любой фреймворк такого рода"...
    А как выделенная технология, кто знает, в фронтенде нынче как в мире моды, сегодня одно в тренде, завтра какой то бородатый хипстер что то скажет и в тренде будет уже иное. Но лично я надеюсь что этот мутант не займет заметной доли рынка... благо хоть React в топе без всяких там директив :)
    Ответ написан
    Комментировать
  • Каким образом вы используете относительные единицы при вёрсте страниц?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Последнее время все только в rem/em. Из плюшек - плавно меняется размер шрифта при изменении размера экрана (статья на smashingmagazine, вдруг кто-то еще не читал), не думаем о точных размерах отступов для текста, кнопок, да чего угодно - сам образ мышления становится другой - все измеряется в rem - 0.75, 1, 1.25, 1.5, 1.75, 2, 3, 4, 5... Можно верстать без дизайнера (без макета) по каким-то наброскам и будет выглядеть красиво. Можно менять некоторые вещи вроде border-radius в зависимости от размера шрифта, который сейчас используется: чем больше экран, тем больше буквы и больше border-radius (или border-width, или еще какое-то свойство). Сетку также можно трансформировать не на определенных разрешениях экрана, о по rem (на определенной длине строки) - немногие об этом задумываются, но если дизайнить content-first - это может быть очень удобно.

    Из особенностей - дизайнер должен думать так же, тогда у вас с ним будет полная гармония и взаимопонимание.
    Ответ написан
    Комментировать
  • Каким образом вы используете относительные единицы при вёрсте страниц?

    Sanes
    @Sanes
    Посмотрите новую версию Uikit. TB 4 тоже не помешает глянуть.
    Как раз с ретиной боролись в этих версиях.
    Ответ написан
    Комментировать
  • Как создать новый массив?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    var newUrls = urls.map(function(url) {
        return url + '/index.html';
    })
    Ответ написан
    Комментировать
  • В каких ситуациях верстать сайты по bem методологии нецелесообразно?

    dom1n1k
    @dom1n1k
    Сайты - целесообразно всегда.
    Нецелесообразно тащить БЭМ в небольшие изолированные фрагменты кода - например, наброски proof of concept, когда нужно просто быстро проверить/продемонстрировать идею. Ответы на Тостере сюда тоже можно отнести. Если же говорить именно о сайте, то есть законченном продукте (пусть даже и небольшом) - БЭМ как минимум не повредит. Сегодня я бы уже не стал верстать без БЭМ-а ничего, что содержит хотя бы 10 классов.

    P.S. Я сам всегда скептически отношусь к хайпам по поводу всех новых и жутко модных технологий, но БЭМ это реально полезная штука. Да и не такая уж новая - фрагментарно его идеи мелькали уже давно, в том числе в моих собственных верстках. Но нужен был локомотив, который их систематизирует и раскрутит.

    P.P.S. Разумеется, речь идет о самой методологии именования классов, а не всех библиотеках-космолетах, что Яндекс родил на эту тему - то уже на любителя.
    Ответ написан
    2 комментария
  • Как поменять местами 2 div?

    whoisthere
    @whoisthere
    Не благодари. Жми «Нравится»
    FlexBox — там есть свойство ORDER.
    С его помощью можно менять порядок.
    Ответ написан
    3 комментария
  • По поводу наполнения портфолио проектами, когда претендуешь на верстальщика без опыта?

    @Nwton
    Просто наверняка попросят показать работы
    Кончено просят. И ваша единственная работа очень плоха.

    для того чтобы наполнить портфолио проектами нужно найти psd файлы в инете и сверстать их
    Сначала стоит найти и сверстать 20-30 разнообразных макетов, чтобы набить руку, а потом уже искать макеты для заполнения портфолио.
    Ответ написан
    2 комментария
  • Как перебрать массив у которого индекс состоит из строки?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Когда вы создаёте строковые «индексы» у объекта массива, это просто создаёт новые свойства у этого объекта, но они не являются индексами массива. Иногда говорят, «в JavaScript всё является объектом» (что не совсем так). Но массив – это как раз вполне себе объект.
    var a = new Array(3); // [null,null,null]
    a['aaa'] = 'AAA';
    a['bbb'] = 'BBB';
    a.length // по-прежнему 3


    Т.е. такое обращение с массивом некорректно. Все методы массива, напр. map(), reduce(), проигнорируют добавленные вами свойства.

    Для вашей задачи правильнее создать вместо массива пустой объект:
    var ne_array = {};
    ne_array['one'] = 1;
    ne_array['two'] = 2;
    ne_array['three'] = 3; 
    
    for( var property in ne_array) {
      console.log( property,  ne_array[ property]);
    }
    Ответ написан
    Комментировать