Ответы пользователя по тегу Вёрстка
  • LinkedIn, есть ли польза?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Линкедин это по большей части для западного рынка, когда вы уже поработали в нескольких неплохих компаниях, написали у себя в истории крутые должности с красивыми и офигенными описаниями и параллельно со всем этим обмазались всякими "коннекшенами" со всех тех же мест где вы работали (или с кем пиво на конференции пили). В общем такой себе Circle Jerk, на котором вас в основном будут находить ушлые HR, отправляющие слегка измененную копипасту с описанием вакансии.

    Не то чтобы это прям бяка жуткая, но активно профилем заниматься стоит только всяким менеджерам/бизнесменам и эйчарам, которым как бы без связей любых мастей далеко не ухать по карьерной лестнице.

    Я, как обычный разраб, просто принимаю почти все входящие коннект реквесты и любезно отвечаю эйчарам "сейчас позиция не интересует, но потом если что возможно напишу", ибо план B лишним не бывает (хотя, по ощущениям, все равно будет проще найти работу через друзей или какой-нибудь Hired если приспичет, чем ползти в эту жуть).
    Ответ написан
    Комментировать
  • От чего зависит плавность работы анимации на сайте?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Вам необходимость использовать Timeline в Chrome DevTools для профилирования производительности анимаций и не только.

    Хотите знать основы оптимизации рендеринга - вам сюда https://www.udacity.com/course/browser-rendering-o...

    Причин плохой оптимизации может быть вагон и маленькая тележка. У вас там могут огромные элементы анимироваться с помощью top/left вместо transform: translate, у вас при каждом скролле может идти repaint огромных картинок, забирая по 60-100мс на каждый шаг и так далее. Скорее всего причины крайне простые и связаны с использованием древних и убогих методик для анимаций, аля jQuery.animate (который до 3й версии юзает setTimeout вместо requestAnimationFrame под капотом).
    Ответ написан
    Комментировать
  • Как оптимизировать последовательность свойств в классе css?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Я делаю так:
    1) Z-index
    2) Display (flex и так далее)
    3) Позиционированние (position: absolute; left: 50%; top: 50%;)
    4) Padding
    5) Margin
    6) Border&border-radius
    7) Background/box-shadow и подобные свойства
    8) Шрифты/цвет и подобные вещи относящиеся к тексту
    9) Composite Layer Stuff (perspective/transforms/opacity и так далее)
    10) Cursor: pointer;
    Ответ написан
    Комментировать
  • Что думаете насчет квадратных скобок в атрибуте class?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Мешанина из классов в html - расстрелять. Надо юзать миксины/экстенды, а в хтмл держать БЕМ классы и некоторые клювые лэйаут классы иногда.
    Ответ написан
  • Актуален ли сейчас Yeoman? Или лучше использовать что-то поновее, напр. Webpack?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Актуален ли сейчас Yeoman? Или лучше использовать что-то поновее, напр. Webpack?


    Щито? Yeoman нужен для скаффолдинга, пару команд в шелле ввели и у вас уже готовая основа для проекта на руках. И внутри может быть тот же вебпак и что угодно, ибо действия ейомана заканчиваются после того как вы его заюзали. А вебпак вообще каким образом с ним связан то, не пойму?
    Ответ написан
  • CSS или SVG анимация. Как правильно реализовать идею?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Если бы вам нужно было как то обводку кругов динамично закрашивать, то тогда стоило бы юзать svg. А тут вообще можно сделать с помощью обычный круглых блоков, белых дивов для линий и их анимирования с помощью scaleX/width (в сочетании с overflow:hidden для кругов например).
    Ответ написан
    Комментировать
  • Как сверстать вот такое?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    1) Если все это дело вообще статичное и не должно быть адаптивным, то можно вообще хоть картинкой делать, с текстом отдельно (вариант для инвалидов).
    2) Можно сварганить с помощью :before/:after/div. Одни элементы будут отвечать за линии, другие за css-треугольники. Вариант для тех, кто боится SVG.
    3) SVG. Самый правильный вариант. И анимировать все красиво можно будет (включая круги), и на всех мониторах все будет выглядеть отлично.
    Ответ написан
    3 комментария
  • Как правильно верстать PSD-макет c шириной 1663px или Какими должны быть требования к макетам для дизайнеров?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Сверстать сайт с шириной в 1600 пикселей не проблема. Проблема сделать так, чтобы контент хорошо было видно на десктопах с более низкой шириной, аля 960-1300, имея всю ту же pixel-perfect верстку. Просить отдельный макет для мелких десктопов - мертвый номер, ибо почти никто не будет над таким париться. Делать примитивную резину для десктопа - выбор для тех, кого устраивает клепание говносайтиков. Ибо на сайтах с нормальным дизайном важно сохранение пропорций, 2015 год все таки.
    Я сейчас пилю фронт-енд для китайского интернет-магазина, у которого все десктоп макеты 1800px шириной. При этом им важно, чтобы на каком-нибудь ноутбуке с 1376x768 все выглядело так же, но при этом влезало. В итоге делаю все в rem юнитах. 1800 пикселей стартовая точка, где html, body {font-size: 125%;}, то есть 1rem = 20px (о том, почему не 62.5% для 1rem=10px, напишу ниже). Далее, через media-queries, снижаясь на каждые 10% от ширины, уменьшаю font-size на 10% (то есть на 12.5% в нашем случае). И так вплоть до 1.1к пикселей, то есть почти самого низкого десктопа. Заказчик в восторге, все выглядит ровно так как ему надо на всех разрешениях во всех браузерах (ему естественно не нужен убогий ie8).
    По поводу font-size: 125% - я изначально делал 62.5%, но при понижении до 40%- font-size (аля ~1300px) вебкитовские браузеры на MacOs начинали считать что такая величина шрифта слишком мала для юзера и сами по своей воле рандомно увеличивали габариты элементов. Увеличив весь font-size вдвое, проблема изчезла.
    Ответ написан
    7 комментариев
  • После textarea сайт обрывается, что делать?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Вы <textarea> закрыли тегом </textarea>?
    Ответ написан
    2 комментария
  • Как демонстрировать вёрстку заказчику?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Показывайте билд версию, где все минимизировано/склеено/изуродованно с тестовыми картинками и текстом например. Я бы посмотрел как кто-то стал бы такое воровать и пытаться модифицировать под себя :)
    Ответ написан
    Комментировать
  • Как вы начинаете вёрстку сайта?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    1) Захожу сюда codepen.io
    2) Жмякаю New Pen
    3) Создается новый пен где уже все настроено под меня (SASS/отступы/лайвапдейт и так далее).
    4) Верстаю
    5) ...
    6) PROFIT!
    Если верстка многостраничная, то один пен делаю глобальным (SASS переменные/общий JS код) и линкую его в другие пены. + можно все это дело форкать до потери пульса, и показывать ссылки заказчику (ссылки все приватные, если имеется PRO аккаунт). Особенно удобно, когда имеется несколько вариантов анимации, то просто делаю 2-3 форка и даю ссылки, а человек наглядно сравнивает все.
    Ответ написан
    15 комментариев
  • Можно ли использовать единицы измерения rem (root em) вообще для всего в CSS?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Делаю вот так:
    html, body {
      font-size: 62.5%; // 1rem = 10px и никакой попаболи как с EM
    }

    И верстаю все только в rem уже более полугода (за исключение тонких бордеров в 2-3px и подобных микро-вещей, которые при снижении font-size для html, body могут выдавать становиться тоньше, чем надо).
    Главная фишка - возможность скейлить всю верстку под разные разрешения. Хочется сделать все на 25% больше для мониторов шире 1600px? Просто пишешь:
    html, body {
      @media (min-width: 1600px) {
        font-size: 78.125%;
      }
    }

    И вся верстка магическим образом идеально скейлится. Тоже самое касается и понижения, очень удобно в адаптивной верстке.
    Недостатки у rem есть, но они безобидные для нормальных людей - ie9+ и баг с небольшой неточностью приема 62.5% в каких-то версиях ie (вроде как в 10), что в общем то не заслуживает внимания.
    Ответ написан
    4 комментария
  • Цена верстки на фрилансе?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Вам надо определиться со своим часовым рейтом (относительно ваших навыков/крутости/известности) и работать по этому рейту. Конкуренция за то, чтобы сверстать говношаблон для вп за 1к рублей (условно), это путь вникуда (если только вы не являетесь голодным студентом без опыта).
    Ответ написан
    Комментировать
  • Как быстро войти в технологический пик html5 верстки?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Вариант с обучением через верстку .psd макетов вас до "пика" не доведет. Максимум до уровня рядового "верстальщика". Сверстать статику может каждый второй, кто хоть иногда этим занимается. Если вы нацелены на реальный "пик", то вам надо учиться на основе живых примеров уровня www.awwwards.com www.cssdesignawards.com и www.thefwa.com
    Копайтесь, смотрите что как сделано, пытайтесь сами воссоздавать отдельные куски "не смотря под капот" (то есть только на основе того, что вы видите, не залезая в F12). Но перед этим вам надо будет нагнать основы, то есть все что связано с css трансформами, нестандартными лэйаутами и другими трендами дизайна, а то иначе когнетивный диссонанс вам обеспечен. После этого будете долго практиковать анимации, свг, 2d-canvas и в самом конце возможно даже WebGL. Обязателен к употреблению codepen.io
    Ну а если прочитав все это вы вдруг поняли, что вас на самом деле не интересуют всякие нестандартные промо-сайты, а вам просто надо уметь верстать странички для стандартных интернет-магазинов или еще чего подобного, то вам достаточно будет потратить 1-2 месяца на чтение вводных статей и начать штамповать сайты на бутстрапе. Вот.
    Ответ написан
    3 комментария