• Как сделать квадратные изображения?

    landen13
    @landen13
    frontend-developer
    Здесь в любом случае понадобится бекенд.

    Как пример, можно определять ориентацию изображения и дальше от класса .horizontal или .vertical позиционировать через css (absolute, width/height: 100% - в зависимости от класса, left/top: 50% - в зависимости от класса, transform: translateX(-50%)/translateY(-50%) - тоже в зависимости от класса).
    В таком случае оригинальные размеры изображения сохраняются (пользователь может его сохранить таким же).

    Ну либо бекендом делать обычный crop.
    Ответ написан
    1 комментарий
  • Как заставить Firebug 3 реагировать на изменение состояния элемента на странице?

    landen13
    @landen13
    frontend-developer
    Вот то что Вам нужно: prntscr.com/7qphr0

    А вообще Firebug 3 пока глючный, часто изменения динамических элементов тупо не видно в инспекторе, приходится "переоткрывать" вкладку.
    Ответ написан
    1 комментарий
  • Какие задачи должен уметь решать web разработчик?

    landen13
    @landen13
    frontend-developer
    правильно гуглить
    Ответ написан
    Комментировать
  • Какие технологии использовать для быстрой верстки?

    landen13
    @landen13
    frontend-developer
    Технологий уйма. Я вижу, что ребята выше написали вообще все, что только можно.

    Но если говорить о скорости, то, в первую очередь, нужно все инструменты объединить в одном месте. Для этого лучше всего подходит Gulp.

    1. SASS - компилируется на ~150% быстрее чем LESS (при условии компилирования с помощью libsass), имеет интуитивно понятный синтаксис (речь о функциях и операторах, а не о CSS-возможностях).
    2. Gulp (указываю плагины, касающиеся именно повышения скорости разработки):
    - gulp-sass;
    - browser-sync - обновление стилей/изобр/скриптов без перезагрузки страницы (как статика, так и CMS)
    - генератор спрайта (как png, так и svg), при статике так же еще возможно обновление html;
    - оптимизация изображений (png, jpg, svg);
    3. Редактор кода - Sublime Text. Стабильный, быстрый, легковесный:
    - Emmet;
    - сниппеты;
    - Gulp плагин - для быстрого запуска тасков (самый удобный хоткей - CTRL + SHIFT + M - для запуска дефолтного таска, CTRL + ALT + M - для остановки всех тасков, CTRL + M - для вызова выпадающего списка с тасками);
    4. Методологии - SMACSS, как по мне, одна из самых удачных, но еще лучше разработать свой собственный подход. Верстать все максимально модульно, это даст огромный прирост скорости как на поздних этапах разработки, так и в дальнейшем при поддержке проекта.

    Ну и всегда думайте, как можно унифицировать тот или иной момент. В таком случае от проекта к проекту ваша скорость будет всегда расти, а значит времени на что-то новое будет все больше.
    Ответ написан
    4 комментария
  • Как измерить скорость верстки, т.е. оценить насколько быстро верстаешь?

    landen13
    @landen13
    frontend-developer
    Скорость верстки очень сильно зависит от типа проекта. Также скорость верстки прямо пропорциональна объему навыков (как связанных с IT, так и базовых), умноженному на опыт.

    Чтобы измерить скорость чистой верстки с типичным функционалом идеально подойдет обычный несложный лендинг, а лучше сразу несколько. На лендинги небольшого размера у опытного верстальщика уходит от 5 до 9 часов, в зависимости от инструментов и технологий, которые он применяет при верстке.

    Оценить скорость конкретно только верстки под CMS довольно сложно, так как верстка под CMS включает также много других смежных задач и подводных камней.

    Основные навыки и инструменты, повышающие скорость верстки:
    - touch typing - слепая печать - незаменимый навык, значительно ускоряющий любую деятельность за ПК
    - emmet, сниппеты, сохраненные заготовки, шаблоны
    - препроцессоры
    - хорошее владение редактором кода (шоткаты и т.п.), быстрое перемещение по коду
    - способность быстро осваивать новую информацию и сразу же применять ее
    и т.д. - можно долго продолжать этот список

    Использование первых трех в сумме дает очень большой прирост скорости.
    В таком случае скорость верстки будет выше средней.
    Ответ написан
    7 комментариев
  • Правильно ли переносить пиксельные размеры из фотошопа в вёрстку?

    landen13
    @landen13
    frontend-developer
    Редко попадаются дизайны, где легко все шрифты в em сделать и все четко через пиксельперфект выровнять. Если тз того не требует, размеры шрифтов можно задавать в пикселях, какие-то глобальные отступы и ширины измерять линейкой в фотошопе, далее после того, как все сверстано, подгонять это через Pixel Perfect (Firefox или Chrome).

    То есть вы делаете каркас/компоновку элементов, а уж потом выравниваете все. Сразу все пиксель в пиксель делать - больше времени займет.

    p.s.: для Firefox есть версия Pixel Perfect 1.8.1 (рабочая без глюков), которая спрятана в версиях плагина Pixel Perfect на addons.mozilla.org.
    Ответ написан
    2 комментария
  • Лишний 1 px, как убрать?

    landen13
    @landen13
    frontend-developer
    Ваша проблема локальная.
    Firefox 33.1 - проблема не наблюдается.
    Кстати, scale ужасно рендерится в сафари 5. но это так, к слову. и только при слишком маленьком значении.
    Ответ написан
    Комментировать
  • Как правильно сверстать такой хидер?

    landen13
    @landen13
    frontend-developer
    Все элементарно. Белая фигурка внутри - png (лучше с прозрачностью, вдруг цвет фона поменяется), треугольный выступ под ней - обычный css-треугольник, сделанный с помощью border. Александр выше Вам кинул пример, посмотрите как они генерируются, там все предельно просто.
    Ответ написан